总结
1.详解css中的定位(fixed/relative/absolute)
3.案例:优酷顶部导航
CSS中的定位(Position)属性允许你对元素进行定位;(fixed/relative/absolute)
fixed:元素的位置相对于浏览器窗口是固定位置
例：position: fixed;top:20px ;left:40px
relative:相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块
position: relative;top: 20px;left: 20px
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于出始包含块
特点：绝对定位使元素的位置与文档流无关，因此不占据空间
例：position: absolute;left:30px;
z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效
子绝父相
例：z-index:-1;
2.伪选择器:hover
例：ul li:hover
font-weight: bold 字体加粗
text-decoration: underline 给元素加上下划线
display: none 使当前元素不显示
display: block 使当前元素显示
实例
<!DOCTYPE html>
<html>
<head>
<title>优酷-这世界很酷</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="http://img.alicdn.com/tfs/TB1u5jLkMoQMeJjy0FpXXcTxpXa-200-200.jpg">
<style type="text/css">
*{margin: 0; padding: 0;}
li{float: left; list-style: none;}
a{color: black; text-decoration: none;}
h2{font-family: 微软雅黑 Light;}
span{
font-size: 13px;
}
small{
font-size: 10px;
color: #999999;
}
.tv_show li{
margin-bottom: 18px;
}
.clear{clear: both;}
.mr{margin-right: 10px;}
.l{float: left;}
.contents{
width: 1740px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 20px;
}
.contentUL{
line-height: 70px;
}
.hot_tv img{
width: 240px;
height: 360px;
}
.tv_show ul img{
width: 240px;
height: 135px;
}
.tab li{
margin-left: 20px;
}
.header{
position: relative;
width: 100%;
height: 520px;
background: #BCBFC5;
}
.pic_show{
width: 1664px;
height: 520px;
background:url(http://ykimg.alicdn.com/develop/image/2019-03-13/6ab534d2c40f22b065325bc04d588531.jpg) no-repeat;
margin: 0 auto;
}
.bg{
background: url(http://gw.alicdn.com/mt/TB1RQJ6ognH8KJjSspcXXb3QFXa-1664-520.png);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.menu_ul{
position: absolute;
left: 82px;
top: 23px;
z-index: 100;
}
.menu_ul form{
width: 500px;
height: 40px;
position: relative;
left: 490px;
top: -7px;
}
.menu_ul input{
width: 421px;
height: 38px;
border-top-left-radius: 19px;
border-bottom-left-radius: 19px;
border: none;
background:rgba(234,234,234,0.6);
}
button{
width: 80px;
height: 38px;
border-top-right-radius: 19px;
border-bottom-right-radius: 19px;
background: #B30702;
border: none;
color: #FFEABF;
position: absolute;
}
</style>
</head>
<body>
<div class="header">
<div class="pic_show"></div>
<div class="bg"></div>
<div class="menu_ul">
<img src="https://img.alicdn.com/tfs/TB1dw0vqHGYBuNjy0FoXXciBFXa-120-24.png" class="l">
<form action="" method="" class="l">
<input type="text" name="">
<button>搜全网</button>
</form>
<ul>
<li>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="contents">
<div class="content">
<div class="contentUL">
<h2>正在热播</h2>
</div>
<div class="hot_tv">
<ul class="l">
<li class="mr">
<a href="https://v.youku.com/v_show/id_XMzk1NjM1MjAw.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E000059C3713EADBC0904C106D601?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>名侦探柯南</span>
</a><br>
<small>万年小学生的推理生涯</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA5MjAxMzcyNA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!2~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C3EC801ADBA6B484907E37A?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>大冰小将 第一季</span>
</a><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA4MjM0OTUyOA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!3~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C662F3FADB185E088068403?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>欢乐喜剧人 第五季</span>
</a><br>
<small>张云雷返场爆笑来袭</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA4OTMyMDQ0NA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!4~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C416719ADC311330B03413D?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>最强大脑之燃烧吧大脑 第二季</span>
</a><br>
<small>百名天才少年脑力竞技</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA2MDEzMjQ5Mg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!5~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C0A0869859B5E5CCA0ADF28?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>运行中国 第二季</span>
</a><br>
<small>展现中国最新发展成果</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDAwMjMwODcxMg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!6~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>偶像</span>
</a><br>
<small>独立音乐系列纪录长片</small>
</li>
<li>
<a href="https://v.youku.com/v_show/id_XNDA4OTE1MTE3Ng==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!7~5~5~A" target="_bank">
<img src="http://r1.ykimg.com/050E00005C77A8DAADA7B2AE4A0E2B7F?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>大城晓聚</span>
</a><br>
<small>四座城市四场晓聚</small>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="contentUL">
<h2 class="l mr">剧集 ></h2>
<ul class="l tab">
<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="l mr">
<a href="https://v.youku.com/v_show/id_XNDA5MDAxMzk5Mg==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5~5~5~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-03-14/e5c8e654077f568854e460b9fbd8f046.jpg"><br>
<span>只为遇见你·张嘴吃糖</span>
</a><br>
<small>行走的“撩妹宝典”！霸气帅总撩动你的少女心</small>
<div class="clear"></div>
</div>
<ul>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li>
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li>
<a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
<img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例