时间：2018.07.19 大一下学期暑假
地点：成都-实习
项目类型：HTML+CSS仿优酷网页
制作时间：两天
网页源码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="youku.css">
<title>优酷-这世界很酷</title>
</head>
<body>
<header>
<!--头条广告部分-->
<div class="TopAd">
<a href="#"><img src="img/广告头幅logo.png" width="100%"></a>
</div>
<!--头条大横幅部分-->
<div class="TopImg">
<a href="#"><img src="img/头幅图片.jpg" height="420px"></a>
<img src="img/logo.png" id="logo">
<!--搜索栏-->
<div id="FindBox">
<input type="text" id="textbox">
<a href="#"><input type="submit" value="搜库" id="search"></a>
</div>
</div>
</header>
<!--主体-->
<div class="wrapper">
<!--主导航栏-->
<ul class="TopNavigation">
<li class="choose" >
<a href="#" class="chooses">剧集</a>
<a href="#" class="chooses">电影</a>
<a href="#" class="chooses">动漫</a>
<a href="#" class="chooses">综艺</a>
<a href="#" class="chooses">娱乐</a>
<a href="#" class="chooses">资讯</a>
</li>
<li class="choose">
<a href="#" class="chooses">少儿</a>
<a href="#" class="chooses">来疯</a>
<a href="#" class="chooses">音乐</a>
<a href="#" class="chooses">搞笑</a>
<a href="#" class="chooses">直播</a>
<a href="#" class="chooses">片库</a>
</li>
<li class="choose">
<a href="#" class="chooses">纪事</a>
<a href="#" class="chooses">公益</a>
<a href="#" class="chooses">体育</a>
<a href="#" class="chooses">财经</a>
<a href="#" class="chooses">汽车</a>
<a href="#" class="chooses">科技</a>
</li>
<li class="choose" style="border-right: none;">
<a href="#" class="chooses">文化</a>
<a href="#" class="chooses">旅游</a>
<a href="#" class="chooses">时尚</a>
<a href="#" class="chooses">亲子</a>
<a href="#" class="chooses">教育</a>
<a href="#" class="chooses">游戏</a>
</li>
</ul>
<!--推荐视频栏1-->
<div class="HotVideoOne">
<h1>接力世界杯！2018中超来了</h1>
<div class="HotVideoBox">
<a href="#">
<div class="videobox">
<img src="img/推荐视频栏img1.jpg" class="video">
<p class="videotitle">新援首秀带帽郜林倒钩 恒大4-0贵州</p>
<p class="Playback">23.9万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/推荐视频栏img2.jpg" class="video">
<p class="videotitle">巴坎布绝杀国安登顶 国安2-1建业</p>
<p class="Playback">6.2万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/推荐视频栏img3.jpg" class="video">
<p class="videotitle">登巴巴回归献绝杀 申花1-0泰达</p>
<p class="Playback">3.5万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/推荐视频栏img4.jpg" class="video">
<p class="videotitle">先知补时失必杀点球 大连0-0华夏</p>
<p class="Playback">3.3万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/推荐视频栏img6.png" class="video">
<p class="videotitle">郜林惊世倒钩 致敬C罗！这球进的美如画</p>
<p class="Playback">15.5万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/推荐视频栏img7.png" class="video">
<p class="videotitle">塔利斯卡首秀帽子戏法 恒大新援一鸣惊人</p>
<p class="Playback">7520次播放</p>
</div>
</a>
</div>
</div>
<!--个性推荐-->
<div class="MyVideo">
<h1>优酷懂你
<p id="hp">看得越多，推荐的内容越符合你的口味哟~</p>
<a href="#" id="changeicon" style="text-decoration: none;"><img src="img/换一换图标.png"><p>换一换</p></a>
</h1>
<div class="HotVideoBox">
<a href="#">
<div class="videobox">
<img src="img/个性推荐1.jpg" class="video">
<p class="videotitle">被儿子儿媳气死的南宋皇帝</p>
<p class="Playback">4.8万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐2.jpg" class="video">
<p class="videotitle">小伙表白美女: 连续追我100天我就答应你!</p>
<p class="Playback">4.2万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐3.jpg" class="video">
<p class="videotitle">《想办法爸爸》：戚薇女儿大哭 </p>
<p class="Playback">40.4万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐4.jpg" class="video">
<p class="videotitle">90后姑娘酒店长住两月 房间生虫逼酒店报警</p>
<p class="Playback">33.0万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐5.jpg" class="video">
<p class="videotitle">古代神箭手百步穿杨全靠装备</p>
<p class="Playback">457.6万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐6.jpg" class="video">
<p class="videotitle">外国小美女看上卖早餐小哥</p>
<p class="Playback">301.4万次播放</p>
</div>
</a>
</div>
<div class="HotVideoBox" style="margin-top:210px;">
<a href="#">
<div class="videobox">
<img src="img/个性推荐7.jpg" class="video">
<p class="videotitle">陈翔六点半: 想听真心话吗? 试一试测谎仪</p>
<p class="Playback">6.9万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐8.jpg" class="video">
<p class="videotitle">一辆1978年的旧摩托车, 牛人全部拆开翻新...</p>
<p class="Playback">21.1万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐9.jpg" class="video">
<p class="videotitle">王祖蓝要当爸爸啦 李亚男发博感恩</p>
<p class="Playback">35.9万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐10.jpg" class="video">
<p class="videotitle">没服役就老了? 国产002航母为何锈迹斑斑</p>
<p class="Playback">6.9万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐11.jpg" class="video">
<p class="videotitle">震惊！！！花季少女竟突变活人偶</p>
<p class="Playback">27.8万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐12.jpg" class="video">
<p class="videotitle">我今天没带钱找女孩子出来玩 结果被堵了</p>
<p class="Playback">18.2万次播放</p>
</div>
</a>
</div>
</div>
<!--二号广告栏-->
<div class="Ad">
<a href="#"><img src="img/广告栏1.jpg"></a>
</div>
<!--推荐视频栏2-->
<div class="HotVideoTwo">
<div class="titlechoose">
<h1>剧集
<a href="#"><img src="img/大于号图标.png" width="8px" class="bigicon"></a>
<ul id="chooseul">
<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>
<a href="#">
<img src="img/剧集排行.png" style="margin-left: 425px;margin-bottom: 38px;">
<p style="color: #0B0B0B;font-size: 12px;margin-left: 900px;width: 60px;margin-top: -58px;">剧集排行</p>
</a>
</h1>
</div>
<a href="#">
<div class="bigvideo">
<img src="img/推荐视频大图.jpg" width="310px" height="258px;">
<p class="videotitle">双峰</p>
<p class="Playback">悬疑美剧鼻祖 大卫·林奇经典重启</p>
</div>
</a>
<div class="HotVideoBox">
<a href="#">
<div class="videobox">
<img src="img/推荐视频栏13.jpg" class="video">
<p class="videotitle">梅格雷探案 第二季</p>
<p class="Playback">名侦探“憨豆先生”归来</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐14.jpg" class="video">
<p class="videotitle">黑帆 第四季</p>
<p class="Playback">海盗船长终极决战</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐15.jpg" class="video">
<p class="videotitle">美国众神 第一季</p>
<p class="Playback">围观异次元神仙打架</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐16.jpg" class="video">
<p class="videotitle">神探夏洛克 第四季</p>
<p class="Playback">福华组合强势回归</p>
</div>
</a>
</div>
<div class="HotVideoBox" style="margin-top:180px;">
<a href="#">
<div class="videobox">
<img src="img/个性推荐17.jpg" class="video">
<p class="videotitle">戈德曼家族</p>
<p class="Playback">哈佛精英卷入国际商战</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐18.jpg" class="video">
<p class="videotitle">福斯特医生 第二季</p>
<p class="Playback">女医生智斗丈夫小三</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐19.jpg" class="video">
<p class="videotitle">黑色孤儿 第四季</p>
<p class="Playback">克隆姐妹命运抉择</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/个性推荐20.jpg" class="video">
<p class="videotitle">烈阳</p>
<p class="Playback">末日警察拯救伦敦</p>
</div>
</a>
</div>
</div>
<!--推荐视频栏3-->
<div class="HotVideoThree">
<h1>超级网剧
<a href="#"><img src="img/大于号图标.png" width="8px" class="bigicon"></a>
</h1>
<div class="HotVideoBox">
<a href="#">
<div class="videobox">
<img src="img/超级网剧1.jpg" class="video">
<p class="videotitle">媚者无疆</p>
<p class="Playback">李一桐至美极虐</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/超级网剧2.jpg" class="video">
<p class="videotitle">《香蜜沉沉烬如霜》特辑</p>
<p class="Playback">首曝超长制作特辑</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/超级网剧3.jpg" class="video">
<p class="videotitle">萌妃驾到</p>
<p class="Playback">甜蜜反套路神剧</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/超级网剧4.jpg" class="video">
<p class="videotitle">武动乾坤</p>
<p class="Playback">曝美术特辑</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/超级网剧5.jpg" class="video">
<p class="videotitle">艳势番之新青年</p>
<p class="Playback">黄子韬代表作即将上线</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/超级网剧6.jpg" class="video">
<p class="videotitle">热血书院</p>
<p class="Playback">VIP会员抢先看</p>
</div>
</a>
</div>
</div>
<!--三号广告栏-->
<div class="Ad">
<a href="#"><img src="img/广告.jpg"></a>
</div>
<!--推荐视频栏4-->
<div class="HotVideoFour">
<div class="HotVideoBox">
<h1>获奖好片拯救你的暑假</h1>
<a href="#">
<div class="videobox">
<img src="img/movie1.jpg" class="movie">
<p class="videotitle">男人与战争</p>
<p class="Playback">1.7万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie2.jpg" class="movie">
<p class="videotitle">我不害怕</p>
<p class="Playback">1.5万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie3.jpg" class="movie">
<p class="videotitle">内衣大战</p>
<p class="Playback">43.5万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie4.jpg" class="movie">
<p class="videotitle">遇见海洋</p>
<p class="Playback">1.7万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie5.jpg" class="movie">
<p class="videotitle">我们的世界</p>
<p class="Playback">1.4万次播放</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie6.jpg" class="movie">
<p class="videotitle">甜蜜的梦</p>
<p class="Playback">1.1万次播放</p>
</div>
</a>
</div>
<!--分割-->
<div class="HotVideoBox" style="margin-top: 350px;" >
<h1>暑期减压必备，爆笑喜剧停不下来</h1>
<a href="#">
<div class="videobox">
<img src="img/movie7.jpg" class="movie">
<p class="videotitle">鹿鼎记</p>
<p class="Playback">陈小春七个老婆一台戏</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie8.jpg" class="movie">
<p class="videotitle">星光灿烂</p>
<p class="Playback">范伟挑战中国版阿甘</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie9.jpg" class="movie">
<p class="videotitle">原来是美男</p>
<p class="Playback">伪男朴信惠恋上张根硕</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie10.jpg" class="movie">
<p class="videotitle">异能家庭</p>
<p class="Playback">低配异能齐聚高萌家庭</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie11.jpg" class="movie">
<p class="videotitle">不要恋爱要结婚</p>
<p class="Playback">剩女恋上不婚男</p>
</div>
</a>
<a href="#">
<div class="videobox">
<img src="img/movie12.jpg" class="movie">
<p class="videotitle">我才不会被女孩子欺负呢</p>
<p class="Playback">热血少年智斗美少女</p>
</div>
</a>
</div>
</div>
</div>
<footer>
<!--网站相关-->
<div class="AboutWeb">
<ul>
<li class="aboutword">
<p>网络文化经营许可证 京网文[2014]0934-236号</p>
<p>网络110报警服务</p>
<p>药品服务许可证(京)-经营-2015-0029</p>
<p>节目制作经营许可证京字670号</p>
<p>违法不良信息举报: 电话4008100580、</p>
<p>邮箱youkujubao@service.alibaba.com</p>
</li>
<li class="aboutword">
<p>请使用者仔细阅读优酷《用户协议》、《隐私政策》、
《版权声明》、《反盗链声明》、《账号注销协议》和
历史协议文本</p>
<p>Copyright©2018 优酷 youku.com 版权所有</p>
<p>信息网络传播视听节目许可证0108283号</p>
</li>
<li class="aboutword">
<p>京ICP证060288号</p>
<p>网络出版服务许可证</p>
<p>北京互联网举报中心</p>
<p>北京12318文化市场举报热线</p>
</li>
<li class="aboutword" style="width: 100px; ">
<img src="img/优酷二维码.jpg" width="80px">
</li>
</ul>
</div>
<!--页脚-->
<div class="WebFoot">
<p>作者：ando</p>
</div>
</footer>
</body>
</html>CSS代码：
（youku.css）
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
html,body {
width:100%;
}
body {
background-color:#FFFFFF;
position: relative;
}
.clear {
clear: both;
}
.wrapper {
width:960px;
margin: 0 auto;
overflow: hidden;
}
.footer{
width:960px;
margin: 0 auto;
overflow: hidden;
}
a {
color:#000000;
text-decoration: none;
}
/*头条广告样式*/
.TopAd {
text-align: center;
}
/*头条图样式*/
.TopImg {
width: 100%;
height: 420px;
background-color:#000000;
text-align: center;
margin-top: -4px;
position: relative;
}
#logo {
position: absolute;
top: 25px;
left: 180px;
z-index: 9;
}
#textbox{
background:rgba(255,255,255,0.3);
border:1px none;
width: 300px;
color: #fff;
border-radius:20px 0 0 20px;
height: 38px;
outline:none;
font-size: 16px;
}
#FindBox{
position: absolute;
top: 25px;
left: 38%;
z-index: 8;
}
#search{
width: 80px;
height: 38px;
margin-left: -7px;
border:1px none;
border-radius:0px 20px 20px 0px;
color: #FFFFFF;
background: linear-gradient(to right ,#1CBFFF,#3A9FFF);
outline:none;
}
/*导航样式*/
.TopNavigation {
width: 100%;
font-family: "微软雅黑";
color:#6E6E6E;
font-size: 14px;
margin: auto;
overflow: hidden;
margin-top: 20px;
}
.TopNavigation a{
color:#6E6E6E;
width: 33%;
float: left;
text-align: center;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
}
.TopNavigation a:hover{
color:deepskyblue;
}
.choose{
list-style: none;
float: left;
border-right: 2px solid #f3f3f3;
width: 240px;
box-sizing: border-box;
}
/*推荐视频栏1*/
.HotVideoOne{
margin-top: 40px;
width: 960px;
}
h1{
font-family: "微软雅黑";
text-align: left;
font-weight: 100;
font-size:28px;
margin-bottom: 20px;
}
.HotVideoBox{
width: 960px;
margin-top: 20px;
margin: 0 auto;
}
.videobox{
width:154px;
float: left;
margin-right:6px;
}
.video{
width: 150px;
height: 98px;
}
.videotitle{
font-family: "微软雅黑";
text-align: left;
font-size:14px;
margin-bottom: 6px;
}
.Playback{
text-align: left;
font-size:12px;
color: #8C8C8C;
}
/*个性推荐*/
.MyVideo{
margin-top: 220px;
width: 960px;
}
#hp{
font-size: 14px;
margin: -28px 0 0 155px;
color: #515151;
width: 500px;
}
#changeicon{
float: right;
margin-top: -30px;
width: 100px;
}
#changeicon img{
margin-left: 31px;
}
#changeicon p {
color: #0B0B0B;
font-size: 12px;
margin-left: 51px;
margin-top: -24px;
}
/*广告栏样式*/
.Ad{
text-align: center;
}
.Ad img{
width: 100%;
margin-top: 40px;
}
/*推荐视频栏2*/
.HotVideoTwo {
margin-top: 50px;
height: auto;
}
.HotVideoTwo h1{
width: 960px;
height: 30px;
}
.bigicon{
margin-left: 10px;
}
.HotVideoTwo li{
font-size: 16px;
font-weight: normal;
list-style: none;
float: left;
margin-left: 30px;
}
#chooseul{
margin-left: 80px;
margin-top: -28px;
}
#chooseul li a{
color:#000000;
text-align: center;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
}
#chooseul li a:hover{
color:deepskyblue;
border-bottom:3px solid deepskyblue;
border-radius: 2px;
}
.bigvideo{
width: 310px;
float: left;
margin-right: 10px;
}
/*推荐视频栏3*/
.HotVideoThree
{
margin-top: 350px;
}
/*电影推荐*/
.HotVideoFour{
margin-top: 30px;
}
.movie{
width: 150px;
height: 250px;
}
/*网站相关样式*/
.footer{
width: 960px;
margin: 0 auto;
}
.AboutWeb{
width: 960px;
margin: auto;
margin-top: 100px;
}
.AboutWeb li{
font-size: 13px;
width: 240px;
height: 100px;
float: left;
list-style-type: none;
margin-right: 30px;
}
.AboutWeb p{
margin-bottom: 5px;
color:#5C5C5C;
}
/*尾巴*/
.WebFoot{
width: 960px;
height: 100px;
float: left;
text-align: center;
margin-left: 240px;
margin-top: 100px;
}
.WebFoot p{
font-size: 24px;
font-family: "微软雅黑";
font-weight: 100;
}
总结：重温HTML一个星期，花了两天仿制的优酷，不足点太多，页面写的很死。
扫一扫
2880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
