自定义按钮~自适应布局~常见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>
  1. 按钮组合 灵活使用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>
  1. 前自定义后跟随 定义两层结构,利用magin的负值保持跟随者在尾部的空间
  2. 表头固定内容滚动的表格 给内容设置最大高度值,超出时使用滚动条 注意:overflow-y是用来给div进行裁剪的,所以tbody部分需要在div中 table>head,div(table>tbody)
  3. 纯CSS手风琴 通过列表显示图片,定义ul固定宽高,定义li

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杂七杂八

HTML初学笔记1

[TOC] 什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) ...

43270
来自专栏JavaEdge

CSS 全解析实战(二)-HTML基础强化1 HTML常见元素和理解(1)2 HTML常见元素和理解(2)3 HTML常见元素和理解(3)4 HTML版本5 元素分类6 嵌套关系

9110
来自专栏九彩拼盘的叨叨叨

inline-block 布局写法示例

注意:如果元素之间如果没有空格,回车之类的,两端对齐会失效。如,用 Angular 的 ng-repeat 生成出来的元素之间就就没有空格。

11520
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——BarcodeView控件的使用方式,.Net移动开发

      设置控件类型,将BarcodeFormat属性设置为“QRCode”,让控件显示为二维码,如图1;

15820
来自专栏web前端-

JQ事件和事件对象

  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

29820
来自专栏前端知识分享

第56天:选中文字弹出提示框

所以这个的事件一定是  onmouseup  ,盒子显示而且盒子的位置 在  鼠标的 clientX 和 clientY 一模一样

15820
来自专栏自动化测试实战

HTML第三课——css【3】

301120
来自专栏前端知识分享

第141天:前端开发中浏览器兼容性问题总结(二)

在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:m...

24220
来自专栏自动化测试实战

html——css基础

上一节我们讲了display的inline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: le...

50750
来自专栏十月梦想

bootstrap轮播图实现

2.轮播速度设置在整个轮播设置data-interval=“1000”设置轮播速度,1000=1m,单位是毫秒

20030

扫码关注云+社区

领取腾讯云代金券