一、css中的定位(fixed/relative/absolute).
position属性允许对元素进行定位。
fixed:元素的位置为固定定位。
relative：相对定位，不单独使用，父级下定位，绝对定位的容积块。
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么他的位置相对于初始包含块。特点：绝对定位使元素的位置于文档流无关，不占据空间。
z-index：属性设置元素的堆叠顺序，只能在定位中使用。
子绝父相：子元素为绝对定位父元素必为相对定位。
二、伪选择器：hover
实例
<ul><li font-weight:bold>文字加粗</li><li text-decoration:underline>给元素加下划线</li></ul>
运行实例 »
点击 "运行实例" 按钮查看在线实例
border 边框粗细，solid 实线 颜色。display:none 取消元素显示，block显示
伪选择器写法：xxx:hover .class
background-size:cover 背景图拉伸
实例
<!DOCTYPE html>
<html>
<head>
<title>优酷-这世界很酷</title>
<link rel="icon" type="images-icon" href="static/images/1.ico">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{overflow-x: hidden; }/*去掉X轴的滚动框*/
a{color: #000;text-decoration:none; }/*a链接加颜色去下划线*/
li{list-style:none; float: left;}/*去除无序列表效果，向左浮动*/
.qcfd{clear: both;}/*清除浮动*/
.fd{float: left;}/*向左浮动*/
.cn_tu{ /*定义li无序列表*/
margin-right: 10px;
}
.cn_tu2{
margin-right: 20px;
}
.cnwai{ /*最外围的一个大小*/
width: 1316px;
margin: 0 auto;
margin-left: 50px;
}
.cnnei{
width: 100%;
margin-top: 20px;
}
.cnul{line-height: 70px;
}
.hot_tv img{
width: 200px;
height: 300px;
}
.tb li{
margin-left: 25px;
}
.tv_teb img{
width: 230px;
height: 142px;
}
.header{
position: relative;
width: 1366px;
height: 400px;
background: #D5D9E2
}
.pic_show{
margin: 0 auto;
width: 1250px;
height: 400px;
background: url(static/images/bg.jpg);
background-size: cover; /*背景图拉伸*/
}
.bg{
background:rgb(0,0,0,0.3)width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 99;
}
.menu_ul{
position:fixed; top:20px;left: 50px;z-index: 100;/*固定定位*/
}
.menu_ul form{
width: 500px;
height: 40px;
position: relative;left: 350px;/*相对定位*/
}
.menu_ul input{
width: 300px;
height: 28px;
border-radius: 100px;border: none;background: rgba(234,234,234,0.5);/*去圆角*/
}
.menu_ul button{
width: 60px;
height: 28px;
border-top-right-radius: 30px; /*去右上圆角*/
border-bottom-right-radius: 30px;
border: none;
color: #fff;
background: #B30702;
position: absolute;top: 0;right:200px;/*绝对定位*/
}
.menu_li{
float:right;
}
</style>
<body>
<div class="header">
<div class="pic_show"></div>
<div class="bg"></div>
<div class="menu_ul">
<img src="static/images/logo.png" class="fd">
<form action="" method="" class="fd"> <!-- 搜索框，全局搜索 -->
<input type="text" name="">
<button>全网搜</button>
</form>
<div class="qcfd"></div>
<ul class="menu_li">
<li><i class="fa fa-diamond"></i></li></ul>
</div>
</div>
<div class="cnwai">
<!-- 正在热播 -->
<div class="cnnei">
<div class="cnul"><h2>正在热播</h2></div>
<ul class="hot_tv">
<li class="cn_tu">
<a href="">
<img src="static/images/a.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/b.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/c.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/d.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/e.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/f.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
</ul>
<div class="qcfd"></div>
</div>
<!-- 剧集 -->
<div class="cnnei">
<div class="cnul"><h2 class="cn_tu fd">剧集 ></h2>
<ul class="fd tb">
<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="qcfd"></div>
</div>
<div class="tv_show">
<div class="big_show fd cn_tu2">
<a href="">
<img src="static/images/tv.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small></div>
<ul class="tv_teb">
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li><li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<div class="qcfd"></div>
</div>
<div class="cnnei"><h2>大陆影讯</h2></div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例