2018.07.19 仿优酷网页小项目
时间：2018.07.19 大一下学期暑假
地点：成都-实习
项目类型：HTML+CSS仿优酷网页
制作时间：两天
网页源码：
<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>
<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>
<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>
<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>
<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-0029p>
<p>节目制作经营许可证京字670号p>
<p>违法不良信息举报: 电话4008100580、p>
<p>邮箱[email protected]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>作者：andop>
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一个星期，花了两天仿制的优酷，不足点太多，页面写的很死。