收藏
批改状态：未批改
老师批语：
定位 relative=相对定位 absolute=绝对定位 fixed=固定 不受浏览器滚动影响。 一般来说 子绝父相 absolute 以父级定位标签为参照点，若没有找到就用浏览器做绝对定位 脱离文档流；z-index 表示层级，值越大越高；relative 相对于自身位置的定位 没有脱离文档流。另外还知道如何将字库拿来使用以及做下拉框的原理；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优酷视频网站</title>
<style type="text/css">
*{margin: 0px;padding: 0px;list-style: none;}
.l {float: left;margin-right: 3px;}
img{border-radius: 10px;}
.clear{clear: both;}
a{color: #000;text-decoration: none;}
.contents{width: 1740px;margin: 0px auto;}
.hot_tv{line-height: 70px;}
.hot_tv ul{padding: 0 30px;}
li img{width: 240px;height: 360px;}
li{float: left; }
.mr{margin-right:10px; }
.hg{line-height: 70px;}
.big_img img{width: 100%;}
.tv_img img{width: 240px;height: 130px;}
.tv_img{width: 1740px;}
.tv_img li{margin-bottom: 55px;}
small {color: #999;}
li img:hover {box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);} /*伪类鼠标移到图片的阴影效果 X y 模糊度 外延值 颜色*/
.hot_tv img:hover {box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2);}
.hot_tv li a:hover {text-decoration: none;color:#2692FF;} /*设置鼠标移上去的颜色，没有下划线*/
.hot_tv li a:hover:after {content: "";background:#2692FF;border-radius: 10px;display: block;width: 20px;height: 3px;margin:-20px auto; }
/* :after 在……之后加上content内容（content参数必须要的） 画圆角 转换成区块 使他能用宽高参数，然后居中显示*/
.headers{width: 100%;height: 520px;position: relative;background:rgb(160, 113, 89);}
.header_banner{background: url(images/3.jpg);width: 1663px;height: 520px;margin: 0 auto;}
.header_banner_zz{background: url(images/2.png);width: 1863px;height: 520px;margin: 0 auto;}
.header_menu{position: relative;top:30px;width: 100%;}
.so form{position: absolute;}
.so{position: relative;top:30px;margin-left: 500px;width: 400px;}
.so input{width: 503px;height: 30px;border:none;border-radius: 100px;background: rgba(234,234,234,0.5);border: none;width: 400px;}
.so button{width: 100px;height: 30px;border:none;border-top-right-radius: 30px;border-bottom-right-radius: 30px;background: #B30702;color: #fff;position:absolute;top: 0;right: 0}
.yb{ position: absolute;right: 200px;top: 30px;}
.yb li{padding: 0 20px;color: #fff;}
.yb li:hover{color: red;}
.ybj{width: 400px;height: 400px;background: rgba(0,0,0,0.5);border-radius: 30px;position: absolute;right: 155px;top: 95px;}
.ybj ul{width: 50px;height: 30;text-align: center;}
</style>
</head>
<body>
<div class="headers">
<div class="header_banner">
<div class="header_banner_zz">
<div class="header_menu l">
<div clss="logo"><img src="images/logo.png" alt=""></div>
</div>
<div class="so">
<form action="">
<input type="text">
<button>搜索</button>
</form>
</div>
<ul class="yb">
<li>VIP</li>
<li>订阅</li>
<li>记录</li>
</ul>
<div class="ybj">
<ul>
<li>努力</li><br>
<li>勤奋</li><br>
<li>喜欢</li><br>
<li>乐趣</li><br>
<li>成功</li><br>
</ul>
</div>
</div>
</div>
</div>
<div class="contents">
<div class="content">
<div class="hot_tv">
<h2>正在热播</h2>
</div>
<ul>
<li class="l">
<a href="">
<img src="images/a.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/b.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/c.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/d.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/e.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/f.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/g.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="hot_tv">
<h2 class="l">剧集></h2>
<ul class="l">
<li class="mr"><a href="">大陆剧</a></li>
<li class="mr"><a href="">日韩剧</a></li>
<li class="mr"><a href="">港台剧</a></li>
<li class="mr"><a href="">英国美剧</a></li>
</ul>
<div class="clear"></div>
</div>
<ul>
<li class="big_img mr">
<a href="">
<img src="images/tv.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<ul class="tv_img">
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
