常用选择器的使用
a.标签选择器 ul{}
b.类class选择器 .bg-green{}
c.Id选择器 #bg-blue{}
d.属性选择器 li[id=”bg-blue”]
e.群组选择器 .bg-green ,#bg-blue{} 用逗号分开
f.兄弟选择器 #bg-blue ~*{}
g.相邻选择器 #bg-blue + *{}
h.伪类：子元素选择器 Ul:first-child{}
J.伪类：类型选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用选择器的应用</title>
<style>
body{ font-size: 15px;}
*{ margin: opx;}
/* Id选择器 */
#content{
width: 800px;
margin: 0 auto;
}
/* 标签选择器 */
h2{color: brown; text-align: center;}
ul{ margin: 0px;}
ul li{ list-style: none;}
ul li a{float: left; padding: 0 15px; text-align: center;}
/* 类选择器class */
.home a{color: red; }
/* 属性选择器*/
li[class="yuwen"] a{color: salmon;}
/* 群组选择器 */
.home , .yuwen{ font-size: 20px;}
/* 兄弟选择器 */
li~* a{text-decoration: none;}
/* 相邻选择器 */
.yuwen+*{ display: none}
/* 伪类：子元素选择器 */
ul :last-child a{ color: seagreen;}
ul :nth-child(5) a{ color: violet;}
/* 伪类：类型选择器 */
ul li:nth-of-type(6) a{ color: yellow;}
</style>
</head>
<body>
<div id="content">
<h2>学生作业管理</h2>
<div>
<ul>
<li class="home"><a href="">首页</a></li>
<li class="yuwen"><a href="">语文作业</a></li>
<div>dfd</div>
<li><a href="">数学作业</a></li>
<li><a href="">英语作业</a></li>
<li><a href="">历史作业</a></li>
<li><a href="">政治作业</a></li>
<li><a href="">计算机作业</a></li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
网页中间内容块布局---双飞翼布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局DOM结构</title>
<style>
*{margin: 0px;}
#header,#foot{
height: 60px;
width: 100%;
}
.header_content, .foot_content{
width: 1000px;
height: inherit;
background-color:red;
margin: 0 auto;
}
.foot_content{
background-color: blueviolet;
}
#content{
width: 1000px;
min-height: 600px;
background-color: #999;
margin: 5px auto;
}
.cotent_nad{ width: inherit; min-width: inherit; background-color: lime;}
.left{width: 200px;min-height: inherit; background: khaki; margin-left: -100%;}
.right{ width: 200px;min-height: inherit; background: lightcoral;margin-left: -200px; }
.cotent_nad,.left,.right{ float: left;}
.main{ padding: 0 200px;}
</style>
</head>
<body>
<div id="header">
<div class="header_content"></div>
</div>
<div id="content">
<div class="cotent_nad">
<div class="main">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div id="foot">
<div class="foot_content"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
绝对定位实现窗口遮罩功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位实现窗口遮罩功能</title>
<style>
body{ margin: 0px; }
.shezhao{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: black;
background-size: contain;
opacity: 0.7;
}
.login{
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="shezhao"></div>
<div class="login"><img src="http://www.uustv.com/1.gif"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
固定定位制作广告位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位制作广告位</title>
<style>
.guang{
position: fixed;
right: 0px;
bottom: 0px;
height: 200px;
width: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="guang">我是广告</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
外边距有三个特征
1. 同级塌陷（谁大向谁） 2. 嵌套传递 3. 自动挤压
浮动
1.文档流：html元素默认按照书写的顺序在浏览器中，遵循先从左到右，在从上到下进行排列
2.布局前提：先将元素从文档流中脱离，这样才能随心所欲操作
3.元素脱离文档流的手段，浮动和绝对定位
定位与相对定位
定位是将元素在页面中重新排列
静态定位：浏览器默认方式
相对定位：元素并未脱离文档流，只是相对于他原来的位置，做相对运动
绝对定位：元素脱离文档流重新排列，不论元素之前是什么类型，全部转为块元素，支持宽高。
固定定位：始终相对于浏览器的窗口作为定位父级，进行定位。