自定义按钮~自适应布局~常见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中,位置可以随意摆放: ...
随机推荐
- 手机端H5 header定义样式
<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ...
- 用备份控制文件做不完全恢复下的完全恢复（全备<老>--备份控制文件<次新>--删除表空间andy--日志文件<新>）
为什么会使用备份的控制文件? 实际工作中主要有两种情况:第一种:当前控制文件全部损坏,而数据文件备份,控制文件备份及当前日志处于不同SCN版本,它们之间又增加过表空间(数据文件).第二种:当前控制文件 ...
- js判断获取浏览器关闭状态
如题,js获取浏览器关闭状态,可实现判断选择是否关闭. <html> <head> <title> </title> </head> < ...
- Linux install sogou input method
# Copyright (c) 2016, 付刘伟 (Liuwei Fu)# All rights reserved.# 转载请注明出处 Linux下安装搜狗输入法需要安装以下插件,当以下所有插件安装 ...
- 使用spring-data-mongodb操作mongodb
mongodb.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...
- Ajax beforeSend和complete 方法与防止重复提交
$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle t ...
- Cracking the Coding Interview 第一章
第一章:数组与字符串 1 数组与字符串 请实现一个算法,确定一个字符串的所有字符是否全都不同.这里我们要求不允许使用额外的存储结构. 给定一个string iniString,请返回一个bool值,T ...
- DuiLib 中滚动条不显示的问题
DuiLib 很好用,同时在没有完全理解源码的前提下,坑也不少,比如今天遇到的添加滚动条不显示... 情况是这样的,将一个页面作为Tab控件的其中一页,为了代码不窝在一起,就没有在CreateCont ...
- Linux中一些简单命令(一)
1.查看当前用户:who 2.显示当前目录:pwd 3.查看当前服务器的时间:date 4.查看日历:cal+year; 例如:cal 2016 5.计算器:bc 退出计算器:quit或者ctrl+ ...
- ZendStudio9之SVN项目代码提示丢失解决
前几天转移服务器,SVN 也重建了个,但用着重建的项目发现代码提示丢失了...好郁闷..搞了半天终于找到解决的方法了! 如果你还保留有以前的 SVN 项目本地完整备份,可以直接拷贝以下三个文件到新项目 ...