一、元件
- 自定义按钮
可用button或a display为 inline-block 方便设置格式，通过 padding,height,line-height,font-size设置按钮的大小
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>BUTTON</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 a { 8 text-decoration: none; 9 } 10 span{ 11 display: inline-block; 12 border-style: solid; 13 border-width: 4px 4px 0; 14 border-color: #fff transparent transparent; 15 vertical-align: middle; 16 margin-left: 3px; 17 } 18 .u-btn{ 19 display: inline-block; 20 box-sizing: content-box; 21 -moz-box-sizing: content-box; 22 -webkit-box-sizing: content-box; 23 padding: 4px 15px; 24 margin: 20px; 25 height: 20px; 26 line-height: 20px; 27 border: 1px solid #2b88bf; 28 border-radius: 5px; 29 background:linear-gradient(#6dbde4,#399dd8); 30 font-size: 12px; 31 color: #fff; 32 cursor: pointer; 33 } 34 .u-btn:hover{ 35 background-color:#122772; 36 } 37 </style> 38 </head> 39 <body> 40 <button class="u-btn">click</button> 41 <a class="u-btn" href="#">click</a> 42 <a class="u-btn" href="#"> 43 click 44 <span></span> 45 </a> 46 </body> 47 </html>
- 按钮组合
灵活使用display inline-block设置下拉列表
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>按钮组合</title> 5 <meta charset='utf-8'> 6 <style type="text/css"> 7 span{ 8 display: inline-block; 9 border-style: solid; 10 border-width: 4px 4px 0; 11 border-color: #fff transparent transparent; 12 vertical-align: middle; 13 margin: 0; 14 } 15 16 .u-btns{ 17 position: relative; 18 display: inline-block; 19 margin: 20px; 20 } 21 .u-btn{ 22 display: inline-block; 23 float: left; 24 padding: 6px 15px; 25 margin: 0px; 26 font-size: 12px; 27 color: #fff; 28 border: 1px solid #2b88bf; 29 background:linear-gradient(#6dbde4,#399dd8); 30 border-width: 1px 1px 1px 0; 31 cursor: pointer; 32 } 33 button:first-child{ 34 border-radius: 5px 0 0 5px; 35 } 36 button:last-child{ 37 border-radius: 0 5px 5px 0; 38 } 39 ul{ 40 position: absolute; 41 top: 13px; 42 left: auto; 43 right: 0px; 44 padding: 0; 45 display: inline-block; 46 list-style-type: none; 47 border: 1px solid #d0d0d0; 48 border-radius: 5px; 49 } 50 li,a{ 51 height: 30px; 52 line-height: 30px; 53 text-decoration: none; 54 font-family: Arial; 55 font-size: 12px; 56 color: #333; 57 cursor: pointer; 58 } 59 a{ 60 display: block; 61 padding: 4px 8px; 62 text-align: center; 63 } 64 li:empty{ 65 border-top: 1px solid #ddd; 66 height: 5px; 67 line-height: 5px; 68 margin: 0px; 69 } 70 li:hover{ 71 background: #f7f7f7; 72 } 73 </style> 74 </head> 75 <body> 76 <div class="u-btns"> 77 <button class="u-btn" type="button">click</button> 78 <button class="u-btn" type="button"> 79 <span></span> 80 </button> 81 <ul> 82 <li><a href="#">下拉式菜单项</a></li> 83 <li><a href="#">下拉式菜单项</a></li> 84 <li><a href="#">下拉式菜单项</a></li> 85 <li></li> 86 <li><a href="#">下拉式菜单项</a></li> 87 </ul> 88 </div> 89 </body> 90 </html>
二、BUG
-
问题：如果参照物没有触发haslayout，那么在ie6中“绝对定位的容器”的left和bottom就会有问题
解决方案：在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决
小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题
- 问题：在ie67下，红色区域溢出，拖动垂直或水平滚动条时，红色区域不会动
解决方案：只需要在有滚动条的容器上也设置相对定位即可。 - 问题：IE6下参照物宽高为奇数时，绝对定位元素设置了位置为0或100%时，仍会有1px的空隙
解决方案：设为偶数 - 问题：浮动时margin加倍
解决：设置为inline
三、布局
- 全局自适应
所有元素绝对定位，上下部固定高度，宽度100%，中间高度auto
注意合并样式，精简代码1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>全局自适应布局</title> 6 <style type="text/css"> 7 div{ 8 position: absolute; 9 left: 0px; 10 } 11 .hd,.foot{ 12 width: 100%; 13 height: 100px; 14 } 15 .hd{ 16 top: 0px; 17 background-color: #ccc; 18 } 19 .con-left,.con-right{ 20 top: 100px; 21 bottom: 100px; 22 height: auto; 23 } 24 .con-left{ 25 left: 0px; 26 width: 300px; 27 background-color: #b8d9e0; 28 } 29 .con-right{ 30 right: 0px; 31 margin-left: 300px; 32 background-color: #b8d9aa; 33 } 34 .foot{ 35 bottom: 0px; 36 background-color: #ccc; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="hd"></div> 42 <div class="con-left"></div> 43 <div class="con-right"></div> 44 <div class="foot"></div> 45 </body> 46 </html>
- 前自定义后跟随
定义两层结构，利用magin的负值保持跟随者在尾部的空间 - 表头固定内容滚动的表格
给内容设置最大高度值，超出时使用滚动条
注意：overflow-y是用来给div进行裁剪的，所以tbody部分需要在div中
table>head,div(table>tbody) - 纯CSS手风琴
通过列表显示图片，定义ul固定宽高，定义li