一.clear
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{ /*善用after和defore*/
content: "111"; /*注意加引号*/
clear: both;
display: block;
visibility: hidden; /*隐藏并有高度*/
height: 0; /*去掉高度*/ }
.c{
width: 100px;
/*height: 100px;*/
background-color:red;
}
.c .item{
float:left;
width:30px;
background-color: green ;
} </style>
</head>
<body>
<div class='c clearfix'>
<div class='item'>123</div>
<div class='item'>456</div> </div> <div class="test">内容</div>
</body>
</html>
定义公共样式clearfix
避免每次都写标签clear:both来清除浮动
二.hover
样式一：
为伪类加边框效果
<!DOCTYPE html>
<html lang="en">
<!--伪类1-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0}
.ele{
border: 2px solid transparent;
}
.ele:hover {
border: 2px solid red;
}
.ele:hover .ele_item{
color: red;
}
</style>
</head>
<body>
<div class="ele">
<div class="ele_item">
123
</div>
test
</div> </body>
</html>
样式一
加图片文字
<!DOCTYPE html>
<html lang="en">
<!--伪类2-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{
width: 200px;
height: 169px;
overflow: hidden;
position: relative;
}
.main .content{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: #666666;
opacity: 0.7;
text-align: center;
visibility: hidden;
}
.main:hover .content{
visibility: visible;
}
.main .content .c2{
color: red;
} </style>
</head>
<body>
<div class="main">
<div class="images"><img src="a.png"></div>
<div class="content">
<div>test</div>
<div class="c2">ttttt</div>
</div>
</div>
</body>
</html>
样式二
Z-index可被用于将在一个元素放置于另一元素之后
三.position
规定元素的定位类型
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移
属性值
例 ：
<!DOCTYPE html>
<html lang="en">
<!--position-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.main{
background-color: whitesmoke;
height: 800px;
}
.main .pos{
position: fixed;
right: 10px;
bottom: 10px;
width: 50px;
height: 50px;
background-color: rosybrown;
}
.main .pos2{
position: relative;
background-color: burlywood;
width: 800px;
margin: 0 auto;
height: 100px; } .main .pos2 .little_div{
position: absolute;
background-color: darksalmon;
width: 100px;
height: 30px;
left: 0;
bottom: 0; }
</style>
</head>
<body>
<div class="main">
<div class="pos2">
<div class="little_div"></div>
</div>
<div class="pos"></div>
</div> </body>
</html>
relative与absolute并用
四.实现小尖角
通过设置边框实现小尖角效果，如
<!DOCTYPE html>
<html lang="en">
<!--下拉尖角-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.up{
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
border-left: 30px solid transparent;
display: inline-block;
}
.down{
border-top: 30px solid green;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
display: inline-block;
}
.c1{
border: 30px solid transparent;
border-top: 30px solid green;
display: inline-block;
margin-top: 40px;
}
.c1:hover{
border: 30px solid transparent;
border-bottom: 30px solid green;
display: inline-block;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="up"></div>
<div class="down"></div>
<div style="height: 100px;background-color: #666666">
<div class="c1"></div>
</div> </body>
</html>
小尖角
五.图标
一般实现制作图标有三种方式：
- 图片（自定义）
- CSS实现
- fontawsome
本例引用第三方，fontawsome，网址：http://fontawesome.io/icons/
首先下载解压，引用，使用方法，例：
<!DOCTYPE html>
<html lang="en">
<!--图标-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<span class="icon-dollar"></span>
</body>
</html>
六.important
CSS写在不同的地方有不同的优先级， .css文件中的定义 < 元素style中的属性，但是如果使用!important，事情就会变得不一样
css定义中的用!important限定的定义却是优先级最高的
格式：
Tag：css !important
例：
<!DOCTYPE html>
<html lang="en">
<!--important-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 16px;
color: red;
font-weight: bold;
}
.limit{
color: orchid !important;
} </style>
</head>
<body>
<div>
<p>没应用样式</p>
</div>
<div >
<a class="limit">应用了</a>
<p>hello</p>
</div>
</body>
</html>
important应用
七.overflow
规定溢出元素的首选滚动方法
例：
<!DOCTYPE html>
<html lang="en">
<!--页面布局-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0px}
.top{
background-color: #666666;
height: 30px;
}
.center .center_left{
position: absolute;
background-color: antiquewhite;
width: 110px;
left: 0;
}
.center .content{
position: absolute;
background-color: #2459a2;
top: 30px;
left: 112px;
right: 0;
bottom: 0;
overflow: auto;
} </style>
</head>
<body>
<div class="top"></div>
<div class="center">
<div class="center_left">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div class="content">
<h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
<h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
<h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
<h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
</div>
</div> </body>
</html>
内容溢出滚动
八.小实例
1.登录框
<!DOCTYPE html>
<html lang="en">
<!--登录框-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login_des{
position: relative;
width: 200px;
}
.login_des .user_info{
width: 160px;
height: 30px;
padding-right: 30px;
}
.login_des .user_logo{
position: absolute;
top: 8px;
left: 170px;
}
</style>
</head>
<body>
<div class="login_des">
<input type="text" class="user_info">
<span class="user_logo">R</span>
</div> </body>
</html>
2.提示框
边缘标签：relative，absolute
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
a {color: #428bca;
text-decoration: none;
} .modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
background-color: #white;
opacity: 0.8;
} .modal {
position: fixed;
top: 30%;
left: 50%;
z-index: 1030;
} .hide {
display:none;
}
</style> </head>
<body>
<div>
<input type="button" onclick="fadeIn();" value="模态对话框"/>
</div>
<div id="shade" class="modal-backdrop hide">
<div class="modal">
<img src="./images/loading_32.gif"/>
</div>
</div>
<script >
function fadeIn() {
document.getElementById('shade').className = 'modal-backdrop';
} function fadeOut() {
document.getElementById('shade').className = 'modal-backdrop hide';
}
</script>
</body>
</html>
3.购物产品选择框
<!DOCTYPE html>
<html lang="en">
<!--加减框-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0}
.left{
float: left;
}
.select{
background-color: #999999;
height: 25px;
width: 140px;
border: 1px solid darksalmon;
}
.select .minus{
width: 20px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
}
.select .plus{
width: 20px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
} .select .content input{
width: 88px;
height: 23px;
border: 0;
border-left: 1px solid darksalmon;
border-right: 1px solid darksalmon;
}
</style>
</head>
<body>
<div class="select">
<div class="minus left" onclick="Minus()">-</div>
<div class="content left">
<input id = "count" type="text" name="num" value="0"/>
</div>
<div class="plus left" onclick="Plus()">+</div>
</div>
<script type="text/javascript">
// 定义函数
function Plus() {
var old_str = document.getElementById("count").value;
var old_int = parseInt(old_str)
var new_int = old_int + 1;
document.getElementById("count").value = new_int
}
function Minus() {
var old_str = document.getElementById("count").value;
var old_int = parseInt(old_str)
var new_int = old_int - 1;
document.getElementById("count").value = new_int
}
</script>
</body>
</html>