前言：这是第四课，主要讲了css中的定位和伪选择器。
种一棵树最好的时间是十年前，其次就是现在！开始吧！
一、css中的定位(Position)属性允许你对元素进行定位：(fixed/relative/absolute)
fixed 元素的位置相对于浏览器窗口是固定位置；
relative 相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块（子绝父相）相对定位如果不设置属性，没有效果。
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于出始包含块 （特点：绝对定位使元素的位置与文档流无关，因此不占据空间）
z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定位</title> <style type="text/css"> *{margin: 0;padding: 0;} .fix{ width: 30px; height: 900px; background: red; position: fixed;top: 30px;right: 10px; /*fixed 固定定位*/ } .rel{ width: 300px; height: 300px; background: red; position: relative;top:30px;left: 30px; /*relative 相对定位*/ } .a{ width: 400px; height: 400px; background: blue; position: absolute;/*left: 400px;*/ z-index: -1; } </style> </head> <body> <div class="fix"> </div> <div style="height: 1500px;"> <div class="rel"> <div class="a"></div> </div> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
总结：以上代码演示了固定定位、相对定位及绝对定位；
二、伪选择器:hover 语法：
a:hover{
font-weight: bold;/*字体加粗*/
color: red;
text-decoration: underline; /*给元素加上下划线*/
}
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪选择器</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{
color: #000;
text-decoration: none;
}
a:hover{
font-weight: bold; /*字体加粗*/
color: blue;
text-decoration: underline; /*给字体加下划线*/
}
/*ul{margin-left: 30px;}*/
ul li{
list-style: none;
float: left;
width: 100px;
border: 2px solid red;
line-height: 50px;
text-align: center;
}
ul .MU:hover{
background: blue;
color: red;
position: relative;
}
ul .menu{
position: absolute;left:0;
width: 100px;
/*height: 100px;*/
display: none;
}
ul li:hover .menu{
display: block;
}
</style>
</head>
<body>
<div>
<a href="">你好，世界！</a>
<ul>
<li class="MU">1
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：以上代码为伪选择器的使用；
三、仿优酷顶部布局
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优酷布局实战</title>
<link rel="icon" type="image/x-icon" href="static/images/1.ico">
<!-- <link rel="stylesheet" type="text/css" href="static/css/style.css"> -->
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none; float: left;}
a{color: #000;text-decoration: none;}
.clear{clear: both;}
.contents{
width: 1740px;
margin: 0 auto;
/*border: 2px solid red;*/
}
.content{
width: 100%;
margin-top: 15px;
}
.hot_tv img{
width: 240px;
height: 360px;
}
.contentUL{line-height: 70px;}
.mr{
margin-right: 10px;
}
.l{float: left;}
.tab li{margin-left: 25px;}
.tv_tab img{
width: 240px;
height: 135px;
}
.big_show img{
width: 490px;
height: 335px;
}
.tv_tab{width: 1240px;}
.tv_tab li{margin:0 4px 19px;}
small{font-size: 12px;color: #999;}
span{font-size: 14px;color: #333;}
.header{
position: relative;
width: 100%;
height: 520px;
background: #e8e8e8;
}
.pic_show{
margin: 0 auto;
width: 1740px;
height: 520px;
background: url(static/images/bg.jpg) no-repeat;
}
.bg{background: rgba(0,0,0,0.3);width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 99;}
.menu_ul{
position: fixed;top: 20px;z-index: 100;
}
.menu_ul form{
width: 500px;height: 40px;position: relative;left: 500px;
}
.menu_ul input{
width: 500px;
height: 40px;
border-radius: 100px;
border: none;
background: rgba(234,234,234,0.5);
}
.menu_ul button{
width: 90px;
height: 40px;
border-top-right-radius:30px;
border-bottom-right-radius: 30px;
border: none;
color: #fff;
background: #B30702;
position: absolute;top: 0;right: 0;
}
.menu_li{float: right;}
</style>
</head>
<body>
<div class="header">
<div class="pic_show">
<div class="bg"></div>
<div class="contents menu_ul">
<img src="static/images/logo.png" class="l">
<form action="" method="" class="l">
<input type="" name="">
<button>全网搜</button>
</form>
<ul class="menu_li">
<li><i class="fa fa-diamond"></i></li>
</ul>
</div>
</div>
</div>
<div class="contents">
<div class="content">
<div class="contentUL">
<h2>正在热播</h2>
</div>
<ul class="hot_tv">
<li class="mr">
<a href="http://youku.com/">
<img src="static/images/a.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="http://youku.com/">
<img src="static/images/b.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="http://youku.com/">
<img src="static/images/c.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="http://youku.com/">
<img src="static/images/d.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="http://youku.com/">
<img src="static/images/e.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="http://youku.com/">
<img src="static/images/f.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="http://youku.com/">
<img src="static/images/g.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="contentUL">
<h2 class="l">剧集 ></h2>
<ul class="tab l">
<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 class="clear"></div>
</div>
<div class="tv_show">
<div class="big_show l mr">
<a href="">
<img src="static/images/tv.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</div>
<ul class="tv_tab l">
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
</div>
<!-- 剧集 -->
<div class="content">
<div class="contentUL">
<h2 class="l">剧集 ></h2>
<ul class="tab l">
<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 class="clear"></div>
</div>
<div class="tv_show">
<div class="big_show l mr">
<a href="">
<img src="static/images/tv.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</div>
<ul class="tv_tab l">
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例