实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优酷-这世界很酷</title>
<link rel="icon" type="icon/x-images" href="http://img.alicdn.com/tfs/TB1u5jLkMoQMeJjy0FpXXcTxpXa-200-200.jpg">
<style type="text/css">
*{margin:0;padding: 0px;}
.clear{clear:both;}
li{list-style: none;}
a{color: #333;text-decoration: none;font-size: 16px;}
span{color: #ccc;font-size: 12px;}
h2{line-height: 26px;font-size: 25px;margin:0 auto;}
.head{width: 100%;height: 420px;position: relative;}
.head_pic{width: 1536px;height: 420px;background: url(https://ykimg.alicdn.com/develop/image/2019-03-14/c63e7842043cf754cd66d766d1b30883.jpg) 0 -100px no-repeat;}
.head_pic1{width: 1536px;height: 420px;background: url(https://gw.alicdn.com/mt/TB1RQJ6ognH8KJjSspcXXb3QFXa-1664-520.png) 0 -100px no-repeat;}
.logo{position:absolute;top: 20px;left: 100px; }
.head form{position: absolute;top: 20px;left: 600px;width: 320px;height: 38px;}
.head input{width: 320px;height: 38px;border: none;border-radius: 50px;height: 38px;position: relative;outline: 0 none;}
.head button{width: 80px;height: 38px;border: none;border-top-right-radius: 25px;background: #B30702;border-bottom-right-radius: 25px;position: absolute;right:0;top: 0;color: #FFEABF;}
/* .head img{background: no-repeat;}*/
.contents{width: 100%;margin-bottom: 20px;}
.content{width: 1200px;margin:0 auto; }
.text{margin:0 0 20px 0;height: 26px;line-height: 26px;}
.text li{float: left;}
.text li a{margin:0 10px;}
.show{width: 1200px;height: 340px;margin:0 auto;}
.show li{float: left;}
.img1{width: 192px;height: 288px;margin-right: 8px;}
.img2{width: 192px;height: 108px;}
.img_l{margin-left: 8px;}
.img_t{margin-top: 8px;}
</style>
</head>
<body>
<div class="head">
<div class="head_pic">
<div class="head_pic1"></div>
</div>
<div class="logo">
<img src="https://img.alicdn.com/tfs/TB1dw0vqHGYBuNjy0FoXXciBFXa-120-24.png">
</div>
<form>
<input type="text" name="">
<button>搜全网</button>
</form>
</div>
<div class="contents">
<div class="content">
<div class="text">
<h2 style="margin-top: 100px;">正在热播</h2>
</div>
<div class="show">
<ul>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C46D398ADC311BEE20A5697?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">闯堂兔3</a></li><br>
<li><span>闯堂兔的穿越之旅</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C248687AD881A04D80ABCF1?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">巨兵长城传</a></li><br>
<li><span>寻找将神的冒险之旅</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E000059C3713EADBC0904C106D601?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">名侦探柯南</a></li><br>
<li><span>万年小学生的推理生涯</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005BBD6765859B5D699901BE17?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">不良人 第三季</a></li><br>
<li><span>王者弈天下大唐生死局</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C18548F859B5E9775088BEF?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">白蛇:缘起</a></li><br>
<li><span>白蛇前世爱情凄美动人</span></li>
</ul>
</li>
<li><img class="img1" src="https://r1.ykimg.com/050E00005C4EE7CB8B7774D04402A24F?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">我的亲爹和后爸</a></li><br>
<li><span>张译张国立花式互怼</span></li>
</ul>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div class="contents">
<div class="content">
<div class="text">
<a href=""><h2 style="float: left;">剧集 ></h2></a>
<ul>
<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="show">
<div style="float: left;">
<img src="https://ykimg.alicdn.com/develop/image/2019-03-14/e5c8e654077f568854e460b9fbd8f046.jpg" width="394px" height="280px">
<ul>
<li><a href="">只为遇见你.张嘴吃糖</a></li><br>
<li><span>行走的任性战斗机!</span></li>
</ul>
</div>
<div>
<ul>
<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">都挺好</a></li><br>
<li><span>亲情旋涡</span></li>
</ul>
</li>
<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-01-26/79d4c3de275715d4c09ba15d4baeda63.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">乡村爱情11</a></li><br>
<li><span>刘熊赵四争c位</span></li>
</ul>
</li>
<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-21/7cb276539f90edde8e1dafc559692133.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">老中医</a></li><br>
<li><span>陈宝国冯远征许晴弘扬医德</span></li>
</ul>
</li>
<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-12/778d31c3d19e28e1ed2a3672ecce5b8c.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">国宝奇旅</a></li><br>
<li><span>张大彪花和尚携手护国宝</span></li>
</ul>
</li>
<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-03-12/7e0311477110ff80df583f98cca4b899.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">重耳传奇</a></li><br>
<li><span>春秋版"王子历险记"</span></li>
</ul>
</li>
<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-03-13/013cc9422f4c032737722edf1e6180f7.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">春暖花又开</a></li><br>
<li><span>李建上演新农村创业</span></li>
</ul>
</li>
<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-03-14/60d637f05f000a19542c742ba5f01158.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">逆流而上的你</a></li><br>
<li><span>咸鱼夫妻带娃逆袭</span></li>
</ul>
</li>
<li class="img_t img_l"><img class="img2" src="https://liangcang-material.alicdn.com/liangcang/product/20190107391926/upload/e35649cd7a8a47b58fabe456480bf37a.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
<ul>
<li><a href="">小女花不弃</a></li><br>
<li><span>林依晨来袭</span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
笔记:
css中的三种定位:
1.fixed(固定定位):元素的位置相对于浏览器窗口是固定位置;
2.relative(相对定位):相对定位元素的定位是相对其正常位置,相对定位元
素经常被用来作为绝对定位元素的容器块;
3.absolute(绝对定位):绝对定位的元素的位置相对于最近的已定位父元素，
如果元素没有已定位的父元素，那么它的位置相对于出始包含块.绝对定位
使元素的位置与文档流无关，因此不占据空间;
z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在绝对定位元素上奏效
