2018.07.19 仿优酷网页小项目

时间：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一个星期，花了两天仿制的优酷，不足点太多，页面写的很死。

2018.07.19 仿优酷网页小项目相关推荐

第五课实战go语言改造php仿优酷-RabbitMQ改造项目
第五课实战go语言改造php仿优酷-RabbitMQ改造项目 tags: Beego 慕课网 categories: RabbitMQ 五种工作模式文章目录第五课实战go语言改造php仿优酷- ...
完整视频播放器封装库，仿优酷
目录介绍 1.关于此视频封装库介绍 1.1 能够满足那些业务需求 1.2 对比同类型的库有哪些优势 2.关于使用方法说明 2.1 关于gradle引用说明 2.2 添加布局 2.3 最简单的视频播放器 ...
优酷java_youtubie 仿优酷的视频网站，采用JAVA开发，支持Oracle数据库。主要功能包含注册登录，上传 Jsp/Servlet 238万源代码下载- www.pudn.com...
文件名称: youtubie下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 12657 KB 上传时间: 2015-04-23 下载次数: 1 详细说明:仿优酷的 ...
优酷视频整段代理php,thinkphp仿优酷带数据源码|php仿优酷视频源码带后台功能强大...
本项目是仿优酷官网,优酷官网是一个集多种知识面为一体的网站,能全面的锻炼我们的技能,所以我们决定仿优酷网. 本项目后台主要实现了:用户管理.分类管理.视频管理.评论管理.权限管理.轮播管理.网站配置和 ...
苹果cms V10模板仿优酷网PC模板+wap模板
介绍: 苹果cms V10模板仿优酷网PC模板+wap模板网盘下载地址: http://kekewangLuo.net/OuZ98B55Sin0 图片:
android仿优酷菜单,Android编程实现仿优酷旋转菜单效果(附demo源码)
本文实例讲述了Android编程实现仿优酷旋转菜单效果.分享给大家供大家参考,具体如下: 首先,看下效果: 不好意思,不会制作动态图片,只好上传静态的了,如果谁会,请教教我吧. 首先,看下xml文件: ...
高仿优酷Android客户端图片左右滑动（自动切换）
本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...
苹果cmsV10仿优酷模板，最新自适应苹果cms模板
苹果cms优酷模板,苹果cms优酷模板免费送给大家V10版本,更加全面的功能支持本套模板适用于苹果cms,最新仿优酷风格模板, 模板美观大气上档次,类优酷风格, 自适应,带手机风格此模板花了重金购 ...
苹果cms模板_怎么下载苹果cmsv10仿优酷模板？
苹果cmsv10仿优酷模板在这里我的主题网需要提醒的是,不是1:1仿优酷的模板只是首页的幻灯有些模仿,如果太多人都用仿优酷的模板不利于seo优化,有些差异化还是比较利于网站优化的. 苹果cmsv1 ...

2018.07.19 仿优酷网页小项目

2018.07.19 仿优酷网页小项目相关推荐

最新文章

热门文章