自定義按鈕~自適應布局~常見bug - chaoran－IT工程師數位筆記本

文章出處

一、元件

自定義按鈕
可用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