-
关键代码 .button{box-sizing:border-box;}width不用减去padding和border了 border-box | content-box(默认值) border-box含义：width=宽+padding+border content-box含义：盒子所占宽度=width+padding+border查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> </html>查看全部
-
transform旋转查看全部
-
transform属性查看全部
-
通过分隔分为3个 <div class="box"> <div class="link mission-link"> <span class="icon animated"></span> <a class="button" data-title="自定义标签"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> Mission </a> </div> <div class="link play-link"> <span class="icon animated"></span> <a class="button" data-title="自定义标签"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> Play </a> </div> <div class="link touch-link"> <span class="icon animated"></span> <a class="button" data-title="自定义标签"> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> Touch </a> </div> <p class="tip"><em></em><span></span></p> </div>查看全部
-
.link .icon{}类下面的写法查看全部
-
background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) no-repeat center right rgb(33,83,12);查看全部
-
css3实现圆角按钮 <a href="javascript:;" class="btn">按钮</a> 图片的样子是repeat重复的那部分，一个原始状态，一个hover状态 .btn{display:inline-block;height:38px;padding:0 15px;border:1px solid #3c81c4;background:url();border-radius:5px;} .btn:hover{background-position:0 -40px;}查看全部
-
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基本上够用了查看全部
-
<input type="button" value="按钮"> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="image">现在都是用css美化，这个基本上不用了 表单按钮的默认样式是有操作系统决定的 input{width:100px;height:40px;background:url();border:none;} input背景图片展示的话，只能做固定宽高的，如果宽度改变，会出现背景图片repeat效果查看全部
-
bug修复-鼠标两个按钮来回切换会出bug查看全部
-
document.title=title;用于测试用 var pos=$(this).position().left;含义获取$(this)与绝对定位的父元素的位置距离 css3-transition：移动端开启硬件加速 jq-animate:电脑端 提示内容动态加载的话，用jq 如果不考虑浏览器兼容性的话，能用css3就用查看全部
-
添加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，取值为边框的一半查看全部
-
那四条线是用绝对定位做的 .button{position:relative;}查看全部
-
关键代码 .button{box-sizing:border-box;}width不用减去padding和border了 border-box | content-box(默认值) border-box含义：width=宽+padding+border content-box含义：盒子所占宽度=width+padding+border查看全部
举报
0/150
提交
取消