自定义按钮~自适应布局~常见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中,位置可以随意摆放: ...
随机推荐
- 创建 OVS vlan100 netwrok - 每天5分钟玩转 OpenStack（137）
上一节完成了 OVS vlan network 的配置准备工作,今天我们创建 vlan100.打开菜单 Admin -> Networks,点击 "Create Network&quo ...
- UIView的生命周期和layout方法总结
生命周期 1. loadView 什么时候调用? 每次访问UIViewController的view时候并且view == nil时候调用. 如何实现? 1> 如果在初始化UIViewContr ...
- ETL的经验总结
ETL的考虑 做数据仓库系统,ETL是关键的一环.说大了,ETL是数据整合解决方案,说小了,就是倒数据的工具.回忆一下工作这么些年来,处理数据迁移.转换的工作倒还真的不少.但是那些工作基 ...
- ASP.NET Zero--8.一个例子（1）菜单添加
以一个商品分类管理功能来编写,代码尽量简单易懂.从一个实体开始,一直到权限控制,由浅到深一步步对功能进行完善. 1.打开语言文件 [..\MyCompanyName.AbpZeroTemplate.C ...
- 二、spark入门之spark shell：文本中发现5个最常用的word
scala> val textFile = sc.textFile("/Users/admin/spark-1.5.1-bin-hadoop2.4/README.md") s ...
- Linux下的暴力密码在线破解工具Hydra安装及其组件安装-使用
Linux下的暴力密码在线破解工具Hydra安装及其组件安装-使用 hydra可以破解: http://www.thc.org/thc-hydra,可支持AFP, Cisco AAA, Cisco a ...
- 信息设计工具IDT创建从SAP Business Object到SAP HANA的连接
1. 打开Information Design Tool, 并添加BO Server的连接 2. 在Connection上右击, 选择Insert Relational Connection 3. 输 ...
- Jquery 操作DropDownList 根据条件选中
$("#<%=DDLCounty.ClientID%> option").each(function () { if ($(this).text() == $(&quo ...
- Firefox一次提交两次请求的问题
把这迅雷的插件禁用后一切恢复正常.
- 在ueditor编辑器的光标停留处插入内容
业务场景: 首先在ueditor编辑器中插入一段文本,然后我想在文本的某个位置(光标停留处)插入一个字符串,这个字符串是从页面的其他地方选择得来的. 注意,当我们点击ueditor编辑器以外的地方,编 ...