自定义按钮~自适应布局~常见bug

一、元件
  1. 自定义按钮
    可用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>

     

  2. 按钮组合
    灵活使用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

  1. 问题：如果参照物没有触发haslayout，那么在ie6中“绝对定位的容器”的left和bottom就会有问题

    解决方案：在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决

    小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题

  2. 问题：在ie67下，红色区域溢出，拖动垂直或水平滚动条时，红色区域不会动
    解决方案：只需要在有滚动条的容器上也设置相对定位即可。
  3. 问题：IE6下参照物宽高为奇数时，绝对定位元素设置了位置为0或100%时，仍会有1px的空隙
    解决方案：设为偶数
  4. 问题：浮动时margin加倍
    解决：设置为inline

三、布局

  1. 全局自适应

    所有元素绝对定位，上下部固定高度，宽度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>
  2. 前自定义后跟随
    定义两层结构，利用magin的负值保持跟随者在尾部的空间
  3. 表头固定内容滚动的表格
    给内容设置最大高度值，超出时使用滚动条
    注意：overflow-y是用来给div进行裁剪的，所以tbody部分需要在div中
    table>head,div(table>tbody)
  4. 纯CSS手风琴
    通过列表显示图片，定义ul固定宽高，定义li

 

posted @ 2015-09-04 15:07  超然haha  阅读(999)  评论(1)  编辑  收藏  举报
back to top