自定义按钮~自适应布局~常见bug
一、元件
- 自定义按钮 可用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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-09-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读