CSS中的定位：
CSS中的定位(Position)属性允许你对元素进行定位;(fixed，relative，absolute)
fixed:元素的位置相对于浏览器窗口是固定位置;
relative:相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块;
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于出始包含块
特点：绝对定位使元素的位置与文档流无关，因此不占据空间
z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效
伪选择器:hover
优酷轮播图的实现
实例
<!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" href="static/css/font-awesome.min.css"> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div class="header"> <!-- 轮播 --> <div class="pic_show"> <div class="bg"></div> <div class="contents head_r"> </div> </div> <!-- 搜索 --> <div class="contents header_ul"> <div class="logo l mt"> <a href=""><img src="static/images/logo.png"></a> <form> <input type="text" /> <button type="button">全网搜</button> </form> </div> <ul class="menu_li r mt"> <li><i class="fa fa-bank"></i><br><a href="">VIP</a></li> <li><i class="fa fa-feed"></i><br><a href="">订阅</a></li> <li><i class="fa fa-clock-o"></i><br><a href="">记录</a></li> <li><i class="fa fa-arrow-up"></i><br><a href="">上传</a></li> <li><i class="fa fa-television"></i><br><a href="">客户端</a></li> <li><a href=""><img src="static/images/tx.png" width="40px" style="margin-top: -5px;"></a></li> </ul> </div> </div> <!-- 正在热播 --> <div class="contents"> <div class="content"> <div class="contentUL"> <h2>正在热播</h2> </div> <ul class="hot_tv"> <li class="mr"> <a href=""> <img src="static/images/a.jpg"><br> <span>非诚勿扰 2019</span> </a><br> <small>孟非把脉国民婚姻大事</small> </li> <li class="mr"> <a href=""> <img src="static/images/b.jpg"><br> <span>三星营养午餐</span> </a><br> <small>米其林厨师养成记</small> </li> <li class="mr"> <a href=""> <img src="static/images/c.jpg"><br> <span>神探蒲松龄</span> </a><br> <small>成龙颠覆演绎志怪书生</small> </li> <li class="mr"> <a href=""> <img src="static/images/d.jpg"><br> <span>逆流而上的你 TV版</span> </a><br> <small>潘粤明马丽扮演小夫妻</small> </li> <li class="mr"> <a href=""> <img src="static/images/e.jpg"><br> <span>我们村里的人</span> </a><br> <small>回乡创业带动乡村发展</small> </li> <li> <a href=""> <img src="static/images/f.jpg"><br> <span>王牌对王牌 第四季</span> </a><br> <small>中国最红王牌大PK</small> </li> </ul> </div> <!-- 剧集 --> <div class="content"> <div class="contentUL"> <h2 class="l">剧集<i class="fa fa-angle-right" style="margin-left:10px;"></i></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" style="margin-right:4px;"> <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><br> </a> <small>漫威英雄筋肉集结</small> </li> <li> <a href=""> <img src="static/images/tv1.jpg"><br> <span>神盾局特工</span><br> </a> <small>漫威英雄筋肉集结</small> </li> <li> <a href=""> <img src="static/images/tv1.jpg"><br> <span>神盾局特工</span><br> </a> <small>漫威英雄筋肉集结</small> </li> <li> <a href=""> <img src="static/images/tv1.jpg"><br> <span>神盾局特工</span><br> </a> <small>漫威英雄筋肉集结</small> </li> <li> <a href=""> <img src="static/images/tv1.jpg"><br> <span>神盾局特工</span><br> </a> <small>漫威英雄筋肉集结</small> </li> <li> <a href=""> <img src="static/images/tv1.jpg"><br> <span>神盾局特工</span><br> </a> <small>漫威英雄筋肉集结</small> </li> <li> <a href=""> <img src="static/images/tv1.jpg"><br> <span>神盾局特工</span><br> </a> <small>漫威英雄筋肉集结</small> </li> <li> <a href=""> <img src="static/images/tv1.jpg"><br> <span>神盾局特工</span><br> </a> <small>漫威英雄筋肉集结</small> </li> </ul> <div class="clear"></div> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
}
a {
color: #000000;
text-decoration: none;
}
.clear {
clear: both;
}
.mr {
margin-right: 10px;
}
.ml {
margin-left: 10px;
}
.mt {
margin-top: 20px;
}
.r {
float: right;
}
.l {
float: left;
}
.contents {
width: 1060px;
margin: 0 auto;
}
.content {
width: 100%;
margin-top: 20px;
}
h2 {
font-size: 26px;
font-weight: 200;
}
small {
color: #999999
}
.hot_tv img {
width: 168px;
height: 252px;
}
.contentUL {
line-height: 70px;
}
.tab li {
margin-left: 25px;
}
.big_show img {
width: 346px;
height: 252px;
}
.tv_tab img {
width: 168px;
height: 94px;
}
.tv_tab {
width: 710px;
}
.tv_tab li {
margin: 0 4px 15px;
}
/* 轮播及头部导航 */
.header {
height: 520px;
width: 100%;
background: #FFC0CB;
}
/* 轮播 */
.pic_show {
width: 1280px;
height: 520px;
background: url(../images/lunbo1.jpg);
margin: 0 auto;
position: relative;
}
.bg {
width: 100%;
height: 100%;
background: url(../images/zhezhao.png);
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
.header_ul {
position: fixed;
top: 0;
left: 90px;
z-index: 1000;
}
form {
width: 400px;
height: 40px;
position: relative;
margin-left: 200px;
display: inline-block;
}
input {
width: 380px;
height: 40px;
border-radius: 100px;
border: none;
background: rgba(254, 254, 254, 0.5);
outline: none;
padding-left: 20px;
}
button {
width: 80px;
height: 40px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #b30702;
border: none;
color: #FFFFFF;
position: absolute;
right: 0;
top: 0;
}
.menu_li a, i{color: rgba(234,234,234,1);}
.menu_li li{
padding: 0 10px;
text-align: center;
font-size: 12px;
}
.menu_li i{font-size: 18px;}运行实例 »
点击 "运行实例" 按钮查看在线实例
