自定义按钮~自适应布局~常见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中,位置可以随意摆放: ...
随机推荐
- 【数据压缩】LZ78算法原理及实现
在提出基于滑动窗口的LZ77算法后,两位大神Jacob Ziv与Abraham Lempel [1]于1978年又提出了LZ78算法:与LZ77算法不同的是LZ78算法使用树状词典维护历史字符串. [ ...
- C#中的StringBuilder
1. 使用StringBuilder的好处 由于string对象是不可更改的,我们每次使用string类的方法时,都会在内存中重新创建一个新的string对象,这时候就要为该对象分配内存空间了.如果在 ...
- C#_单例模式
单例:在程序的整个进程中只会被实例化一次 如:User user =new User();实例化一个User();的时候new User()是调用的 User类的 默认的公有构造函数:public U ...
- MVC源码解析 - 进入CLR
这一篇是转载自汤姆大叔的一篇随笔. IIS 5 的 ASP.net 请求处理过程 IIS5核心特征是:IIS是允许在一个叫InetInfo.exe的进程上的,所以无论是aspx页面还是html页面都是 ...
- XAF-列表视图编辑模式
下面来看看XAF中列表有哪些编辑模式: 一.inline编辑 下图说明了WinForms和ASP.NET应用程序中的可编辑列表视图. 在win中,这个很友好,就像excel中编辑一样.5星功能^_^. ...
- AC日记——字典 codevs 4189
4189 字典 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题解 查看运行结果 题目描述 Description 最经,skyzhong得到了 ...
- Ubuntu16.04 server下配置MySQL，并开启远程连接
背景 最近正在学nodejs,想到曾经有台云服务器,但是很久不用了,由于怕麻烦,一股脑的把云主机重装了个Ubuntu系统,于是配置MySQL成了配置服务中的一个环节(node用不用MySQL不管,主要 ...
- 开通域名绑定DDNS
一.初衷 我想要有一个自己的域名,然后有自己的server,在server上搭一个网站或者开通一个ftp服务,我想通过这个域名来访问它. 二.什么是DDNS DDNS 动态dns,电信宽带采用拨号联网 ...
- Tiny6410之重定位代码到SDRAM
在上一章中,将代码重定位到了SRAM中,但是这样的做法作用不大.正确的做法的是将代码重定位到更大的主存中,即DRAM.Tiny6410的DRAM控制寄存器最多只能支持两个同一类型的芯片.每个芯片最多可 ...
- Unity3d请求webservice
我们在对接第三方sdk时,第三方sdk通常会以一个webservice接口的形式供我们来调用.而这些接口会以提供我们get,post,soap等协议来进行访问.get,post方法相信大家都比较熟悉了 ...