-
用a标签制作圆角按钮： 1、在a中添加一个span 2、a中放置按钮左背景，span放置宽度自适应右背景 2、可以有交互效果查看全部
-
用a标签制作水晶按钮查看全部
-
a标签制作按钮的优点<a href="javascript:;"><span>按钮</span></a> 1.没有默认事件 2.用css模拟按钮外观，并做到宽度自适应 3.可增加交互效果，且浏览器均兼容 a{display:inline-block;height:40px;text-decoration:none;line-height:40px;background:url();padding-left:15px;}背景放上左侧圆角的图片 a span{display:inline-block;height:40px;background:url() right -40px;padding-right:15px}背景放上很长的全的图片 a:hover{background-position:0 -80px;} a:hover span{background-position:right -120px;} 图片width:300px基本上够用了查看全部
-
box-sizing值描述查看全部
-
关键代码 .button{box-sizing:border-box;}width不用减去padding和border了 border-box | content-box(默认值) border-box含义：width=宽+padding+border content-box含义：盒子所占宽度=width+padding+border查看全部
-
CSS3用于过渡的属性transition查看全部
-
transform属性查看全部
-
1、display:inline-block; 把<span>元素显示为块元素，然后定义宽高。 2、三个盒子（div display:block; 独占一行) 摆一排的方法，既可以用float，亦可以display：inline-block; 使其同行 3、.link .icon :hover{} //鼠标滑过.icon 时icon才变化 .link:hover .icon {} //鼠标滑过link 时icon 变化查看全部
-
.icon { background : #foo url(../images/icon.png) no-repeat center center; } 居中对齐查看全部
-
span标签实现小三角形查看全部
-
通过这一段时间的学习，我发现学习CSS不只是会代码，而且要学会分析没个细微的动作，有的是局部的，有的是全局的，CSS可以做出非常好效果，用法简单，但我总是在布局上出现问题，后来发现，再思考的过程中应该清楚自己是相对的哪个div,搞清楚后再考虑是相对或者绝对定位，就好办了，老师讲解的非常详细，不仅把技术点告诉了，还教你怎么去分析，怎么做到那些好看的页面，一步步深入，最后自己也可以做出非常绚丽的页面了，还能自己发挥想要的页面；/*.link:hover .icon 是对link盒子操作 icon的变化*/ .link-miss .icon:hover{ background: url("icon/dog96.png") no-repeat center center; background-size: 110px; } .link-play .icon:hover{ background: url("icon/cat-blue128.png") no-repeat center center; background-size: 110px; } .link-touch .icon:hover{ background: url("icon/girl128.png") no-repeat center center; background-size: 120px; }查看全部
-
用a标签制作圆角水晶效果关键步骤 （1）在a标签内增加span标签 （2）给按钮贴图 （3）增加交互效果 将a标签变为行内块元素 display：inline-block border-radius ie9+支持 ie9-不支持查看全部
-
三角形的制作查看全部
-
添加class为tip的div，看图片 要放在.box里面，不能放在a里面。因为tip是根据文字自适应的，可能会超过a的宽度，所以要放到.box里面 .tip{opacity：0;border-radius:3px;position:absolute;height:35px}相对于.box做绝对定位 三角形制作 .tip span{display:block;width:0;height:0;overflow:hidden;border:7px solid transparent;border-top-color:#2dcb70;position:absolute;top:35px;left:50%;margin-left:-3px;} .tip span相对于.tip做绝对定位 三角形越大，border宽度越大 border-top-color:#2dcb70; top是朝下的箭头 margin-left:-3px; 边框为7，取值为边框的一半查看全部
-
传统的按钮复习 <input type="button" value="按钮"/> <input type="submit" value="提交"/> <input type="reset" value="重置"/>查看全部
举报
0/150
提交
取消