自定义按钮~自适应布局~常见bug
- 自定义按钮
可用button或a display为 inline-block 方便设置格式，通过 padding,height,line-height,font-size设置按钮的大小<!DOCTYPE html>
<html>
<head>
<title>BUTTON</title>
<meta charset="utf-8">
<style type="text/css">
a {
text-decoration: none;
}
span{
display: inline-block;
border-style: solid;
border-width: 4px 4px 0;
border-color: #fff transparent transparent;
vertical-align: middle;
margin-left: 3px;
}
.u-btn{
display: inline-block;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
padding: 4px 15px;
margin: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #2b88bf;
border-radius: 5px;
background:linear-gradient(#6dbde4,#399dd8);
font-size: 12px;
color: #fff;
cursor: pointer;
}
.u-btn:hover{
background-color:#122772;
}
</style>
</head>
<body>
<button class="u-btn">click</button>
<a class="u-btn" href="#">click</a>
<a class="u-btn" href="#">
click
<span></span>
</a>
</body>
</html> - 按钮组合
灵活使用display inline-block设置下拉列表<!DOCTYPE html>
<html>
<head>
<title>按钮组合</title>
<meta charset='utf-8'>
<style type="text/css">
span{
display: inline-block;
border-style: solid;
border-width: 4px 4px 0;
border-color: #fff transparent transparent;
vertical-align: middle;
margin: 0;
} .u-btns{
position: relative;
display: inline-block;
margin: 20px;
}
.u-btn{
display: inline-block;
float: left;
padding: 6px 15px;
margin: 0px;
font-size: 12px;
color: #fff;
border: 1px solid #2b88bf;
background:linear-gradient(#6dbde4,#399dd8);
border-width: 1px 1px 1px 0;
cursor: pointer;
}
button:first-child{
border-radius: 5px 0 0 5px;
}
button:last-child{
border-radius: 0 5px 5px 0;
}
ul{
position: absolute;
top: 13px;
left: auto;
right: 0px;
padding: 0;
display: inline-block;
list-style-type: none;
border: 1px solid #d0d0d0;
border-radius: 5px;
}
li,a{
height: 30px;
line-height: 30px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #333;
cursor: pointer;
}
a{
display: block;
padding: 4px 8px;
text-align: center;
}
li:empty{
border-top: 1px solid #ddd;
height: 5px;
line-height: 5px;
margin: 0px;
}
li:hover{
background: #f7f7f7;
}
</style>
</head>
<body>
<div class="u-btns">
<button class="u-btn" type="button">click</button>
<button class="u-btn" type="button">
<span></span>
</button>
<ul>
<li><a href="#">下拉式菜单项</a></li>
<li><a href="#">下拉式菜单项</a></li>
<li><a href="#">下拉式菜单项</a></li>
<li></li>
<li><a href="#">下拉式菜单项</a></li>
</ul>
</div>
</body>
</html>
二、BUG
问题：如果参照物没有触发haslayout，那么在ie6中“绝对定位的容器”的left和bottom就会有问题
解决方案：在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决
小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题
- 问题：在ie67下，红色区域溢出，拖动垂直或水平滚动条时，红色区域不会动
解决方案：只需要在有滚动条的容器上也设置相对定位即可。 - 问题：IE6下参照物宽高为奇数时，绝对定位元素设置了位置为0或100%时，仍会有1px的空隙
解决方案：设为偶数 - 问题：浮动时margin加倍
解决：设置为inline
三、布局
- 全局自适应
所有元素绝对定位，上下部固定高度，宽度100%，中间高度auto
注意合并样式，精简代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局自适应布局</title>
<style type="text/css">
div{
position: absolute;
left: 0px;
}
.hd,.foot{
width: 100%;
height: 100px;
}
.hd{
top: 0px;
background-color: #ccc;
}
.con-left,.con-right{
top: 100px;
bottom: 100px;
height: auto;
}
.con-left{
left: 0px;
width: 300px;
background-color: #b8d9e0;
}
.con-right{
right: 0px;
margin-left: 300px;
background-color: #b8d9aa;
}
.foot{
bottom: 0px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="hd"></div>
<div class="con-left"></div>
<div class="con-right"></div>
<div class="foot"></div>
</body>
</html> - 前自定义后跟随
定义两层结构，利用magin的负值保持跟随者在尾部的空间 - 表头固定内容滚动的表格
给内容设置最大高度值，超出时使用滚动条
注意：overflow-y是用来给div进行裁剪的，所以tbody部分需要在div中
table>head,div(table>tbody) - 纯CSS手风琴
通过列表显示图片，定义ul固定宽高，定义li
自定义按钮~自适应布局~常见bug的更多相关文章
- 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范
常用样式制作思路 学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
- Flutter 中的常见的按钮组件 以及自定义按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...
- 22Flutter中的常见的按钮组件 以及自定义按钮组件
/* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...
- 常见css水平自适应布局
左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- 为iPhone6设计自适应布局
Apple从iOS6加入了Auto Layout后开始就比较委婉的开始鼓励.建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在心底 ...
- 为iPhone6 设计自适应布局（一）
译者的话:本文是自适应布局的巩固篇,所以对布局约束的添加操作步骤等没有详细的说明.如果看着吃力的话请先移步Swift自适应布局(Adaptive Layout)教程. Apple从iOS6加入了Aut ...
- Swift自适应布局（Adaptive Layout）教程（二）
给TextContainer中添加内容 打开 Main.storyboard ,从组件库(Object Library)中拖拽两个 Label 组件到TextContainer中,位置可以随意摆放: ...
随机推荐
- form表单重复提交，type=“button”和type=“submit”区别
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...
- .Net多线程编程—同步机制
1.简介 新的轻量级同步原语:Barrier,CountdownEvent,ManualResetEventSlim,SemaphoreSlim,SpinLock,SpinWait.轻量级同步原语只能 ...
- Linux学习笔记（一）：常用命令（2）
3.帮助命令 A,帮助命令:man B,其他帮助命令 3.1,格式:man [命令名] 查看命令拥有哪个级别的帮助: ...
- 标签<a>的注意事项1
使用a标签时,其子元素可以为其他元素,但是不能包含<a>标签,否则会造成布局改变! 因此请尽量不要在a标签里放太多子元素,可以在外层套一个div,其他子元素放在a标签同级下. 正确布局: ...
- Codevs 4189 字典
4189 字典 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 最经,skyzhong得到了一本好厉害的字典,这个字典里整整有n ...
- 【51Nod】1005 大数加法
给出2个大整数A,B,计算A+B的结果. Input 第1行:大数A 第2行:大数B (A,B的长度 <= 10000 需注意:A B有可能为负数) Output 输出A + B Input示例 ...
- make -j 多核并行编译 导致笔记本过热 自动关机保护
中午在装着CentOS的笔记本上把 Oneinstack 跑起来然后去上班了,本来等着下班回来用的,回来之后发现是关机状态,环境也没有装好. 查看日志,找不到相关信息,甚至还以为是被入侵了.又试了几遍 ...
- MemoryStream和FileStream
一,FileStream对象的数据来自文件,而MemoryStream对象的数据来自内存缓冲区.这两个类都继承自Stream类. 二,抽象基类System.IO.Stream代表流,它提供Read和W ...
- 觉得VR头显太笨重？轻便的VR“神器”来了
一直以来需要搭配手机才能使用的VRBOX(VR眼镜盒子)都被大家诟病携带不便.比较笨重.不透气等等问题.大家也一直期待能够有轻便的搭配手机的VR设备出现,最好是可以随身携带的.另外一方面,作为手机最常 ...
- 十件你需要知道的事，关于openstack-trove（翻译）
开源数据库即服务OpenStack Trove应该知道的10件事情 作者:Ken Rugg,Tesora首席执行官 Ken Rugg是Tesora的创始人,CEO和董事会成员. Ken的大部分职业都是 ...