自定义按钮~自适应布局~常见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中,位置可以随意摆放: ...
随机推荐
- Cordova环境搭建与hello word
一.环境下载 1.下载并安装Node.js 安装一路下一步即可 2.下载并安装Git 安装一路下一步即可 3.配置Android开发平台环境 (1)下载JDK (2)下载AndroidSDK (3)下 ...
- 使用LR11录制手机脚本
要使用Loadrunner11录制手机脚本,需要先搭建好测试环境: 能够正常使用的LoadRunner11: 安装一个LR11的补丁包,用于手机录制: pc端和手机端的网络在同一个网段. ...
- angular1.x 脏检测
写在前面 双向绑定是angular的大亮点,然后支撑它的就是脏检测.一直对脏检测都有一些理解,却没有比较系统的概念. 以下是我阅读网上博文以及angular高级程序设计的理解与总结. 接收指导与批评. ...
- Mac OS 上 CRT 的终端设置
这种设置完全是个人习惯, 切勿效仿!!! 整个终端是 白底黑字 显示方式(奇葩中的奇葩) 1) ANSI Color & Use color scheme 同时勾选 2) Characte ...
- ng1 http 读取json数据
在前端开发过程中,有时后端还没开发出接口,需要经常自己构造获取本地mock数据. AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服 ...
- SQL总结之增删改查
SQL语句增删改查(总结) 一.增:有2种方法 1.使用insert插入单行数据: 语法:insert [into] <表名> [列名] values <列值> 例:ins ...
- 整理一些css在使用中的小技巧（进行中）
1. 消除li排列display:inline-block的间隙 ul{ font-size:; } ul li{ display:inline-block; }
- Python之软件管理
常用软件包管理工具 一般python软件包管理工具,主要有以下: 图 常用python包管理工具 可以看到distribute是setuptools的替代方案(因为Setuptools包不再维护了), ...
- lunix存取windows共享文件夹
在访问Windows共享资料之前,请确保Windows共享是可用的,这里就不再赘述该怎样设置Windows共享了,那可是另外一个课题. Linux访问Windows共享或者Linux共享资料给Wind ...
- The property System
The property System 和其它编译器厂商一样, Qt 也提供了复杂的属性机制, 但是作为一个编译器无关.平台无关的库,Qt没有那些不被标准编译器支持的特征, 如 BCB的 __prop ...