📒 web网页设计期末课程大作业:仿爱奇艺官网影视网站(1页)
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
该首页代码采用了DIV盒子的布局方法，展示了盒子嵌套、浮动、边距、边框和背景等属性的运用。外部大盒子实现居中，内部布局为左右中结构，底部则是横向浮动排列。代码中涵盖了大学前端学习的知识点和布局技巧，CSS代码量丰富且细致，通过hover效果实现过渡和鼠标滑过效果。此外，页面中使用表格和表单来补充功能，方便新手学习。某些源码页面未使用JS，需者可自行添加。
涵盖个人、电影、美食、动漫、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、摄影、文化、家乡、鲜花、礼品、汽车等多个网页设计主题，能够满足大学生在网页大作业中的需求！
页面结构： 分为页头、菜单导航栏（最好支持下拉）、主要内容区域和页脚四大部分。
页面链接： 所有页面应互相超链接，支持三级页面，整体结构为5-10个页面。
样式统一： 页面样式需统一且布局正常，使用Div+CSS技术确保无错乱。
美观的菜单： 菜单设计应美观且醒目，二级菜单可正常弹出和跳转。
JS特效： 需要有如定时和手动切换的图片轮播等JS特效。
多媒体元素： 页面中应包含多媒体元素，如GIF、视频和音乐，并运用表单技术。
清爽美观： 页面设计应清新、优雅，避免雷同。
整体上，不仅要能展示用户需求的内容，还需确保良好的布局、优雅的界面、恰当的配色以及多样的表现形式。
目录导航
一、📖 作品介绍
网页作品简介： 该设计达到了HTML网页设计A++水平，部分支持手机和PC的响应式布局。
网页作品编辑： 此作品为学生网页设计类型，代码采用简单的学生水平的HTML+CSS布局制作。下载后可使用任何HTML编辑软件（如：DW、HBuilderX、Vscode、Sublime Text、Webstorm、Notepad++等）进行编辑和修改。
网页作品布局： 整体采用响应式布局，包含LOGO、导航、主体内容等布局。子页面有多种布局方式，兴趣爱好内容使用图片列表展示，成绩页面插入了表格，联系我们页面则使用了左对齐的图片布局。
网页作品技术： 使用DIV+CSS制作网页，包含背景图、音乐、视频、Flash、滚动文字、CSS特效、鼠标悬停效果、导航变色、表单提交及评论留言功能，并通过JavaScript进行表单验证（确保提交时表单不能为空）。
提示：以下是本篇文章正文内容，下面案例可供参考
二、🌐 效果演示
三、🪓 代码实现
🧱 HTML结构代码
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱奇艺-中国领先的视频门户，高清影视剧，网络视频在线观看</title>
<link rel="shortcut icon" href="http://www.qiyipic.com/common/images/logo.ico" type="image/icon">
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="warp" id="banner">
<div class="layer"></div>
<div class="header">
<div class="text clearfix">
<input type="text" class="fl" id="text" placeholder="爱情保卫战" />
<div class="fl">
<div class="fl sou">搜全网</div>
</div>
<ul class="menu clearfix">
<li class="fl login1"><a href="javascript:;">登录</a></li>
<li class="fl enroll1"><a href="javascript:;">注册</a></li>
<li class="fl"><a href="javascript:;">开通VIP</a></li>
<li class="fl upload" id="upload">
<a href="javascript:;">上传</a>
<div class="upload1" id="Upload1">
<a href="javascript:;" style="color:#000;margin-top:5px;">上传视频</a>
<a href="javascript:;" style="color:#000">制作视频</a>
<a href="javascript:;" style="color:#000">我的空间</a>
<a href="javascript:;" style="color:#000">视频管理</a>
<a href="javascript:;" style="color:#000">流量分析</a>
<a href="javascript:;" style="color:#000">申请分成</a>
<div class="jiao"></div>
</div>
<i></i>
</li>
<li class="fl">
<a href="javascript:;">下载客户端</a>
</li>
<li class="fl message" id="message">
<a href="javascript:;">消息</a>
<div id="message1" class="message1">
<div class="jiao jiao1"></div>
<span class="active">更新提示</span>
<span>用户推荐</span>
<span style="margin-right:0;">系统通知</span>
<div class="tab">
<div class="active">您还没有收到新的更新消息</div>
<div>暂时还没有新的推荐</div>
<div>您还没有登录，<a href="javascript:;" class="loginline login1">登录</a>后可以可以查看完整的通知列表</div>
</div>
<a href="javascript:;" class="andmore">查看更多</a>
</div>
<i></i>
</li>
<li class="fl" id="pr">
<a href="javascript:;">播放记录</a>
<div id="pr1" class="message1">
<div class="jiao jiao2"></div>
<div class="pr_text">
<p>暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，<b>查看全部</b></p>
</div>
</div>
<i></i>
</li>
</ul>
<div class="login login_y">
<div class="baby"></div>
<div class="close"></div>
<div class="account">
<div class="clearfix">
<p class="fl">账 号 ：</p>
<input type="text" placeholder="请输入手机/邮箱" class="fl">
</div>
<div class="clearfix" style="margin-top:24px">
<p class="fl">密 码 ：</p>
<input type="text" placeholder="请输入密码" class="fl">
</div>
</div>
<div class="memory clearfix">
<input type="checkbox" checked="true" class="fl">
<p class="fl">记住我</p>
<a href="javascript:;" class="fl" style="padding-left:85px;">找回密码</a>
<div class="fl" style="padding-left:11px;padding-right:11px;">|</div>
<a href="javascript:;" class="fl">立即注册</a>
</div>
<div class="loginto"><a href="javascript:;">登录</a></div>
<div class="other"></div>
</div>
<div class="enroll enroll_y">
<div class="baby"></div>
<div class="close"></div>
<div class="account">
<div class="clearfix">
<p class="fl">手   机 ：</p>
<input type="text" placeholder="请输入手机号码" class="fl">
</div>
<div class="clearfix" style="margin-top:8px">
<p class="fl">密   码 ：</p>
<input type="text" placeholder="8~20位字母、数字或字符，至少包含两种" class="fl">
</div>
<div class="clearfix" style="margin-top:8px">
<p class="fl">验证码 ：</p>
<input type="text" placeholder="请输入右侧字母" class="fl" style="width:107px;height:30px;">
<div class="yzm fl"></div>
<div class="change fl"></div>
</div>
</div>
<div class="clearfix agree">
<input type="text" placeholder="8~20位字母、数字或字符，至少包含两种" class="fl" style="width:268px;height:30px;border:1px solid #ccc;padding-left:7px;">
<input type="checkbox" checked="true" class="fl" style="margin-top:10px; margin-right:10px;">
<p class="fl" style="margin-top:8px;">我同意</p>
<a href="javascript:;" class="fl" style="margin-top:8px;">《用户服务协议》</a>
<a href="javscript:;" class="fr" style="margin-top:8px;">立即登录</a>
</div>
<div class="loginto" style="margin-left:97px;width:278px; margin-top:20px;">
<a href="javascript:;">注册</a>
</div>
</div>
</div>
</div>
<div class="form">
<ul class="clearfix" id="scroll">
<li class="fl active"><a href="javascript:;" class="colors">涩世纪传说 : 四鬼魂骑士归来</a></li>
<li class="fl"><a href="javascript:;">废材兄弟3 : 王宁修睿大笑归来</a></li>
<li class="fl"><a href="javascript:;">跑男 : 孙俪率跑男团上演体操秀</a></li>
<li class="fl"><a href="javascript:;">吴晓波 : 越南是中国的好学生</a></li>
<li class="fl"><a href="javascript:;">僵尸来了 : 致敬大师林正英</a></li>
<li class="fl"><a href="javascript:;">外国人迷之“你忘”惊呆跑男团</a></li>
<li class="fl"><a href="javascript:;">敢耀更想要 : 高端时尚生活方式</a></li>
<li class="fl"><a href="javascript:;">小哇领衔隐婚族 雪炫语击前辈</a></li>
<li class="fl"><a href="javascript:;">歌神2预告 : 李维嘉欲退通告费</a></li>
<li class="fl"><a href="javascript:;">刘翔吃回头草 文章再陷唱K门</a></li>
</ul>
</div>
<div class="nav clearfix">
<div class="logo fl">
<h1>爱奇艺</h1>
<img src="images/zi.png">
</div>
<div class="fl run"></div>
<ul class="nav_one fl">
<li class="fl"><a href="javascript:;">娱乐</a></li>
<li class="fl"><a href="javascript:;">体育</a></li>
<li class="fl"><a href="javascript:;">资讯</a></li>
</ul>
<ul class="nav_two fl">
<li class="fl"><a href="javascript:;">电影</a></li>
<li class="fl"><a href="javascript:;">电视剧</a></li>
<li class="fl"><a href="javascript:;">片花</a></li>
<li class="fl"><a href="javascript:;">综艺</a></li>
<li class="fl"><a href="javascript:;">微电影</a></li>
<li class="fl"><a href="javascript:;">脱口秀</a></li>
</ul>
<img src="images/1.png" class="fl" style="margin-top:7px;">
</div>
</div>
<div class="today clearfix">
<div class="t_left fl">
<div class="clearfix" style="border-bottom:3px solid #85ba4d; padding-bottom:5px;">
<h2 class="fl">今日焦点</h2>
<a href="javascript:;" class="fl more">更多></a>
<div class="exclu fr">独播</div>
</div>
<div style="padding-top:22px;">
<h3 style="padding-bottom:15px;font-size:17px;"><a href="javascript:;" style="color:#000">深圳滑坡规模30年罕见 失联人数降至81人</a></h3>
<p style="border-bottom:1px dashed #ccc; padding-bottom:6px;"><a href="javascript:;" style="color:#666">失联者多为外来务工人员 老板一声吼救115名工人 倒塌建筑打通一半</a></p>
</div>
<ul class="new">
<li><a href="javascript:;">云南17岁少女坐冤狱13年无罪释放 母亲已病逝</a></li>
<li><a href="javascript:;">女子买貂导致交通瘫痪 : 两演员为炒作演戏</a></li>
<li><a href="javascript:;">环球小姐闹史上最大乌龙  主持人错把亚军当冠军</a></li>
<li><a href="javascript:;">男子两年考43次驾照卖分</a>  <a href="#">13岁男孩开车离家8小时</a></li>
<li><a href="javascript:;">男子没抢到票报旅游团回家</a> <a href="#">正直播NFL雄狮VS圣徒</a></li>
</ul>
<ul class="clearfix">
<li class="fl" style="margin-right:15px;">
<a href="javascript:;" class="scale"><img src="images/img1.gif" title="进水"><div class="part">超长卡车冲进水中当船开</div></a>
</li>
<li class="fl">
<a href="javascript:;" class="scale"><img src="images/img2.jpg" title="微信"><div class="part">微信晒持枪照帮警方破了案</div></a>
</li>
</ul>
</div>
<div class="content fl">
<a href="javascript:;">
<img src="images/img3.jpg" title="薛之谦">
<div>
《7分7秒》 薛之谦自爆更想红 : 契机比能力更重要
</div>
</a>
<ul class="new">
<li><a href="javascript:;">早班机 : 胡歌高情商征服小S遗憾《康熙》停播</a></li>
<li><a href="javascript:;">谢娜马天宇春晚节目被毙 《跑3》鹿晗PK王祖蓝</a></li>
<li><a href="javascript:;">刘德华一家度假保镖护娃阵仗大  柯震东疑泄恋情</a></li>
<li><a href="javascript:;">《三打》韩范八戒特辑</a>  <a href="#">好妹妹动情演唱一封家书</a></li>
<li><a href="javascript:;">低音线控耳机19.9包邮</a> <a href="#">QCY蓝牙耳机29.9包邮</a></li>
</ul>
</div>
<div class="right fl">
<ul class="clearfix">
<li class="fl noleft">
<a href="javascript:;" class="scale"><img src="images/img4.jpg" title="邓超"><div class="part">孙俪邓超比哭调侃不合</div></a>
</li>
<li class="fl">
<a href="javascript:;" class="scale"><img src="images/img5.jpg" title="吴莫愁"><div class="part">吴莫愁分享特殊辨识技巧</div></a>
</li>
</div>
</div>
<div class="variety clearfix">
<div class="left fl">
<div class="top clearfix">
<div class="fl top_l">
<b class="fl">综艺</b>
<div class="more fl">
<i>更多 ></i>
<span>偶滴歌神啊第2季<em></em></span>
<span>爱上超模第2季<em></em></span>
<span>晓松奇谈<em></em></span>
<span>大牌对王牌</span>
</div>
</div>
<div class="fr top_r">
<div class="div1 fl"></div>
<div class="div2 fl"></div>
</div>
</div>
<div class="content">
<div class="banner_l fl">
<a href="javascript:;">
<img src="images/img10.jpg" title="赛车">
<div class="today"></div>
<div class="zhen"></div>
<div class="time"></div>
</a>
<div class="gray">
<p class="first">巅峰拍档</p>
<p class="second">张震综艺首秀大展车身魅力 程雷马东欧弟再竞速难分高下</p>
</div>
</div>
<ul class="clearfix">
<li class="fl scale">
<a href="javscript:;">
<img src="images/11.jpg" title="岳云鹏">
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">西游奇遇记</p>
<p class="second">金世佳告白岳云鹏 超赶莲藕CP</p>
</div>
</a>
</li>
<li class="fl scale">
<a href="javscript:;">
<img src="images/12.jpg" title="闪亮的爸爸">
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">闪亮的爸爸</p>
<p class="second">黄子韬念念碎被女儿嫌弃</p>
</div>
</a>
</li>
<li class="fl scale">
<a href="javscript:;">
<img src="images/16.jpg" title="隐藏的歌手">
<div class="dubo"></div>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">隐藏的歌手</p>
<p class="second">黄小琥现场霸气放狠话</p>
</div>
</a>
</li>
<li class="fl scale" style="margin-top:15px;">
<a href="javscript:;">
<img src="images/13.jpg" title="笑傲江湖第2季">
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">笑傲江湖第2季</p>
<p class="second">冯小刚现场欲签陆敏雪</p>
</div>
</a>
</li>
<li class="fl scale" style="margin-top:15px;">
<a href="javscript:;">
<img src="images/14.jpg" title="大牌对王牌">
<div class="zhen1"></div>
<div class="time1"></div>
<div class="dubo"></div>
<div class="copy">
<p class="first">大牌对王牌</p>
<p class="second">左立神模仿“真相只有一个”</p>
</div>
</a>
</li>
<li class="fl scale" style="margin-top:15px;">
<a href="javscript:;">
<img src="images/15.jpg" title="偶滴歌神">
<div class="zhen1"></div>
<div class="time1"></div>
<div class="dubo"></div>
<div class="copy">
<p class="first">偶滴歌神啊第2季</p>
<p class="second">俊豪出言震惊全场被消音</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="fl right">
<div class="splendor_t clearfix">
<span class="fl"></span>
<a href="javascript:;" class="fl">更多</a>
</div>
<div class="splendor_b">
<div>
<img src="images/17.jpg" title="育儿之道" width="180px" height="101px">
<p>粗糙义渠王的育儿之道</p>
</div>
<ul>
<li><a href="javascript:;">岳云鹏荒漠变身纯爷们</a></li>
<li><a href="javascript:;">大张伟成功锐变获认可</a></li>
<li><a href="javascript:;">金智敏自爆单身遭恶搞</a></li>
<li><a href="javascript:;">盘点男扮女装的偶像</a></li>
<li><a href="javascript:;">金希澈欧巴的少女心</a></li>
</ul>
</div>
</div>
</div>
<div class="runman">
<div class="header"></div>
<ul class="clearfix">
<li class="fl scale">
<a href="javascript:;">
<img src="images/18.jpg" title="跑男">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="dubo"></div>
<div class="copy">
<p class="first">王祖蓝搞笑体操表演 邓超大赞“完美”</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/25.jpg" title="跑男">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">跑男七宗最 : 做完这个Game基本就废了</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/21.jpg" title="跑男">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">邓超腿短被众人无情揭露</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/26.jpg" title="跑男">
</a>
<div class="zhen1"></div>
<div class="dubo"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">郑凯化身购物主持人</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/23.jpg" title="跑男">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">呆萌鹿晗寻保护 李晨无奈 : 节奏不对</p>
</div>
</li>
<li class="fl scale" style="margin-right:0">
<a href="javascript:;">
<img src="images/20.jpg" title="跑男">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">奔跑吧小鹿 : 鹿晗珍藏视频大曝光</p>
</div>
</li>
</ul>
</div>
<div class="talkshow">
<div class="header"></div>
<ul class="clearfix">
<li class="fl scale">
<a href="javascript:;">
<img src="images/27.jpg" title="脱口秀">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="dubo"></div>
<div class="copy">
<p class="first">康熙来了</p>
<p class="second">陈汉典经典模仿大回顾</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/28.jpg" title="脱口秀">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="dubo"></div>
<div class="copy">
<p class="first">晓松奇谈</p>
<p class="second">英法联军火烧圆明园真相</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/22.jpg" title="脱口秀">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">今晚80后脱口秀</p>
<p class="second">亚当兰伯特被哄骗吃毛血旺</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/29.jpg" title="脱口秀">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">谁是你的菜</p>
<p class="second">国民老公林依轮大谈美食心得</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/30.jpg" title="脱口秀">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">世界青年说</p>
<p class="second">柳岩变身大猩猩</p>
</div>
</li>
<li class="fl scale" style="margin-right:0;">
<a href="javascript:;">
<img src="images/31.jpg" title="脱口秀">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="dubo"></div>
<div class="copy">
<p class="first">老梁观世界</p>
<p class="second">历史上真的有芈月吗</p>
</div>
</li>
</ul>
</div>
<div class="recreation">
<div class="clearfix" style="border-bottom:2px solid #8ac024;">
<div class="left fl">
<div class="more fl"></div>
<div class="fl list">
<span class="fl"><a href="javascript:;">大牌对王牌</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">爱奇艺早班机</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">超能大星探</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">帕帕帮</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">泡菜帮</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">娱乐猛回头</a></span>
</div>
</div>
<div class="right fr"></div>
</div>
<div class="clearfix content">
<div class="fl banner">
<img src="images/32.jpg" title="贝克汉姆">
<div class="time"></div>
<div class="dubo"></div>
<div class="today"></div>
<div class="gray">
<p class="first" style="font-size:15px;">《星战》“霸道”营销众星模仿致敬 表姐玩笑惹怒LiLo</p>
<p class="second">昆丁怒斥星战挖墙脚，表姐玩笑惹怒Lindsay Lohan .DC英雄转投漫...</p>
</div>
</div>
<ul class="fl">
<li class="fl scale">
<a href="javascript:;">
<img src="images/33.jpg" title="娱乐">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">《奔跑吧3》曝光未播花絮 邓超拒不配合黑衣人</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/34.jpg" title="娱乐">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">《三打》发“天蓬元帅”特辑 小沈阳 : 就没拿自己当猪</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/img6.jpg" title="娱乐">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="dubo"></div>
<div class="copy">
<p class="first">《大牌对王牌》游戏环节 王青抱冯建宇唱《大花轿》</p>
</div>
</li>
<li class="fl scale" style="margin-right:0;">
<a href="javascript:;">
<img src="images/35.jpg" title="娱乐">
</a>
<div class="dubo"></div>
<div class="copy">
<p class="first">《七分七秒》歌手薛之谦 : 我特别想红</p>
</div>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/24.jpg" title="娱乐">
</a>
<div class="dubo"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">刘雯方否认与崔始源谈恋爱目前还单身</p>
</div>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/36.jpg" title="娱乐">
</a>
<div class="time1"></div>
<div class="copy">
<p class="first">王丽坤片场挨冻无奈卖萌搭档朱亚文拍新剧</p>
</div>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/37.jpg" title="娱乐">
</a>
<div class="time1"></div>
<div class="copy">
<p class="first">嗯哼喝下午茶赏猫显呆萌无毛猫抢镜酷似被扒皮</p>
</div>
</li>
<li class="fl scale top" style="margin-right:0;">
<a href="javascript:;">
<img src="images/38.jpg" title="娱乐">
</a>
<div class="dubo"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">第30届韩国金唱片颁奖盛典BIGBANG暂列男子一位</p>
</div>
</li>
</ul>
</div>
</div>
<div class="like">
<div class="clearfix" style="border-bottom:2px solid #8ac024; padding-bottom:7px;">
<div class="fl bg"></div>
<div class="fl bg_r">
<span class="fl"><a href="javascript:;">我的播放记录</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">我的订阅</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">我的收藏</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">我的上传</a></span><em class="fl"></em>
</div>
</div>
<ul>
<li class="fl scale">
<a href="javascript:;">
<img src="images/39.jpg" title="猜你喜欢">
</a>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="copy">
<p class="first">枪侠</p>
<p class="second">上海枪王的抗日传奇</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/47.png" title="猜你喜欢">
</a>
<div class="time1"></div>
<div class="copy">
<p class="first">深圳山体滑坡85人失联</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/40.jpg" title="猜你喜欢">
</a>
<div class="time1"></div>
<div class="copy">
<p class="first">Big笑工坊</p>
<p class="second">唐唐神吐槽 : 无节操女妖</p>
</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/41.jpg" title="猜你喜欢">
</a>
<div class="time1"></div>
<div class="copy">
<p class="first">囧人囧事</p>
<p class="second">下辈子一定做一个理疗师</p>
</div>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/44.jpg" title="猜你喜欢">
</a>
<div class="zhen1"></div>
<div class="copy">
<div class="vip"></div>
<p class="first">前任2 备胎反击战: </p>
<p class="second">风流郑恺恋上备胎软妹</p>
</div>
</li>
</ul>
</div>
<div class="love">
<div class="ico"></div>
<div class="l_left"></div>
<div class="l_right"></div>
<div class="solid">
<div class="love_logo"></div>
</div>
<ul class="clearfix">
<li class="fl">
<a href="javascript:;">
<div class="clearfix" style="padding-left:12px; padding-top:12px;">
<img src="images/dog.png" class="fl">
<div class="fl" style="padding-left:10px;">
<div style="padding-bottom:10px;">亲宝网咕力...</div>
<div style="padding-bottom:9px;"><b>视频</b> <span>1,210</span></div>
<div><b>粉丝</b> <span>88,831</span></div>
</div>
<b class="fl" style="padding-top:11px;">"孩子快乐源泉的聚集地"</b>
</div>
</a>
<div class="green"> + 订阅</div>
</li>
<li class="fl">
<a href="javascript:;">
<div class="clearfix" style="padding-left:12px; padding-top:12px;">
<img src="images/tuzi.png" class="fl">
<div class="fl" style="padding-left:10px;">
<div style="padding-bottom:10px;">兔小贝儿童...</div>
<div style="padding-bottom:9px;"><b>视频</b> <span>1,086</span></div>
<div><b>粉丝</b> <span>56,209</span></div>
</div>
<b class="fl" style="padding-top:11px;">"儿歌故事早教先锋"</b>
</div>
</a>
<div class="green"> + 订阅</div>
</li>
<li class="fl">
<a href="javascript:;">
<div class="clearfix" style="padding-left:12px; padding-top:12px;">
<img src="images/kan.png" class="fl">
<div class="fl" style="padding-left:10px;">
<div style="padding-bottom:10px;">爱侃</div>
<div style="padding-bottom:9px;"><b>视频</b> <span>154</span></div>
<div><b>粉丝</b> <span>12.4万</span></div>
</div>
<b class="fl" style="padding-top:11px;">"接地气的犀利精悍动画"</b>
</div>
</a>
<div class="green"> + 订阅</div>
</li>
<li class="fl">
<a href="javascript:;">
<div class="clearfix" style="padding-left:12px; padding-top:12px;">
<img src="images/meiz.png" class="fl">
<div class="fl" style="padding-left:10px;">
<div style="padding-bottom:10px;">御姐—萝莉</div>
<div style="padding-bottom:9px;"><b>视频</b> <span>8,991</span></div>
<div><b>粉丝</b> <span>14.4万</span></div>
</div>
<b class="fl" style="padding-top:11px;">"精彩游戏内容大全"</b>
</div>
</a>
<div class="green"> + 订阅</div>
</li>
</ul>
</div>
<div class="volin clearfix">
<div class="fl top_pc1">
<img src="images/sfq/1.jpg" title="广告" alt="图挂了">
<img src="images/sfq/1.1.jpg" title="广告" alt="图挂了">
</div>
<div class="fl top_pc1">
<img src="images/sfq/2.jpg" title="广告" alt="图挂了">
<img src="images/sfq/2.1.jpg" title="广告" alt="图挂了">
</div>
<div class="fl top_pc1">
<img src="images/sfq/3.jpg" title="广告" alt="图挂了">
<img src="images/sfq/3.1.jpg" title="广告" alt="图挂了">
</div>
<div class="fl top_pc1">
<img src="images/sfq/4.jpg" title="广告" alt="图挂了">
<img src="images/sfq/4.1.jpg" title="广告" alt="图挂了">
</div>
<div class="fl top_pc1">
<img src="images/sfq/5.jpg" title="广告" alt="图挂了">
<img src="images/sfq/5.1.jpg" title="广告" alt="图挂了">
</div>
<div class="fl top_pc1">
<img src="images/sfq/6.jpg" title="广告" alt="图挂了">
<img src="images/sfq/6.1.jpg" title="广告" alt="图挂了">
</div>
</div>
<div class="movie clearfix">
<div class="fl movie_l">
<div class="clearfix movie_h">
<div class="fl header"></div>
<div class="fl movie_c">
<span class="fl">爱奇艺爱电影</span><em class="fl"></em>
<span class="fl">网络大电影</span><em class="fl"></em>
<span class="fl">VIP会员</span><em class="fl"></em>
<span class="fl">盘点2015最耀眼韩国影人TOP10</span><em class="fl"></em>
<span class="fl">金鸡百花学院奖短片大赛</span><em class="fl"></em>
</div>
</div>
<ul class="clearfix">
<li class="fl scale">
<a href="javascript:;">
<img src="images/59.jpg" title="电影">
<div class="dubo"></div>
<div class="zhen1"></div>
<div class="gray clearfix">
<div class="fl">
<p class="first">《星球大战》幕后探班</p>
<p class="second">传奇经典 重磅回归</p>
</div>
<div class="fr third"></div>
</div>
</a>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/49.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray clearfix">
<div class="fl">
<p class="first">捉妖记</p>
<p class="second">萌笑点齐飞的奇幻巨作</p>
</div>
<div class="fr four"></div>
</div>
</a>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/50.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray clearfix">
<div class="fl">
<p class="first">煎饼侠</p>
<p class="second">屌丝男士拯救不开心</p>
</div>
<div class="fr four"></div>
</div>
</a>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/51.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray clearfix">
<div class="fl">
<p class="first">杀破狼2</p>
<p class="second">吴京张晋真功夫肉搏</p>
</div>
<div class="fr four"></div>
</div>
</a>
</li>
<li class="fl scale" style="margin-right:0">
<a href="javascript:;">
<img src="images/52.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray clearfix">
<div class="fl">
<p class="first">巴黎假期</p>
<p class="second">古天乐郭采洁异国相恋</p>
</div>
<div class="fr third"></div>
</div>
</a>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/53.jpg" title="电影">
<div class="vip"></div>
<div class="zhen1"></div>
<div class="gray clearfix">
<div class="fl">
<p class="first">我的少女时代</p>
<p class="second">女版那些年重温少女梦</p>
</div>
<div class="fr third"></div>
</div>
</a>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/54.jpg" title="电影">
<div class="vip"></div>
<div class="zhen1"></div>
<div class="gray clearfix">
<div class="fl">
<p class="first">前任2 : 备胎反击战</p>
<p class="second">风流郑恺恋上备胎软妹</p>
</div>
<div class="fr third"></div>
</div>
</a>
</li>
</ul>
</div>
<div class="fl movie_r">
<div class="movie_b"></div>
<ol>
<li class="clearfix">
<a href="javascript:;">
<div class="fl green">1</div>
<p class="fl">捉妖记</p>
<span class="fr heng"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl green">2</div>
<p class="fl">解救吾先生</p>
<span class="fr up"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl green">3</div>
<p class="fl">我的少女时代</p>
<span class="fr heng"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl">4</div>
<p class="fl">前任2 : 备胎反击战</p>
<span class="fr down"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl">5</div>
<p class="fl">煎饼侠</p>
<span class="fr heng"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl">6</div>
<p class="fl">杀破狼2</p>
<span class="fr heng"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl">7</div>
<p class="fl">港囧</p>
<span class="fr heng"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl">8</div>
<p class="fl">剩者为王</p>
<span class="fr up"></span>
</a>
</li>
<li class="clearfix" style="margin-bottom:0;">
<a href="javascript:;">
<div class="fl">9</div>
<p class="fl">碟中谍5 : 神秘国度</p>
<span class="fr down"></span>
</a>
</li>
</ol>
<ul class="movie_r">
<li class="scale">
<a href="javascript:;">
<img src="images/58.jpg" title="电影">
<div class="vip"></div>
<div class="zhen1"></div>
<div class="gray clearfix">
<div class="fl">
<p class="first">夏洛特烦恼</p>
<p class="second">中年屌丝穿越变歌王</p>
</div>
<div class="fr four"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="v_movie clearfix">
<div class="fl" style="border-bottom:1px solid #e1e1e1; width:580px;">
<div class="fl v_movie_l"></div>
<div class="fl v_movie_r">
<span class="fl"><a href="javascript:;">第二届深圳国际微电影节</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">全国大学生一分钟影像大赛</a></span><em class="fl"></em>
</div>
</div>
<div class="fl" style="border-bottom:1px solid #e1e1e1;padding-bottom:5px; margin-left:20px; width:580px;">
<div class="fl v_movie_l1"></div>
<div class="fl v_movie_r1">
<span class="fl"><a href="javascript:;">《寻龙诀观影前必看》</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">《万万没想到特辑》</a></span><em class="fl"></em>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/60.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray">
<p class="first">中国“奥巴马”也要二胎 ？</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/61.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray">
<p class="first">青年创客心中的中国梦</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/62.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray">
<p class="first">街头上演人狗情未了</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/63.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray">
<p class="first">三打白骨精 : 八戒戏妖精</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/64.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray">
<p class="first">澳门风云3 : 恶搞经典电影</p>
</div>
</a>
</li>
<li class="scale fl" style="margin-right:0;">
<a href="javascript:;">
<img src="images/65.jpg" title="电影">
<div class="zhen1"></div>
<div class="gray">
<p class="first">唐人街探案 : 终极预告</p>
</div>
</a>
</li>
</ul>
</div>
<div class="tv clearfix">
<div class="fl movie_l">
<div class="clearfix movie_h">
<div class="fl header"></div>
<div class="fl movie_c">
<span class="fl">内地</span><em class="fl"></em>
<span class="fl">韩剧</span><em class="fl"></em>
<span class="fl">日剧</span><em class="fl"></em>
<span class="fl">美剧</span><em class="fl"></em>
<span class="fl">自制剧</span><em class="fl"></em>
</div>
</div>
<ul class="clearfix">
<li class="fl scale">
<a href="javascript:;">
<img src="images/66.jpg" title="电影">
<div class="dubo"></div>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="gray">
<p class="first">废材兄弟3</p>
</div>
</a>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/67.jpg" title="电影">
<div class="dubo"></div>
<div class="time1"></div>
<div class="gray">
<p class="first">哦我的鬼神大人</p>
</div>
</a>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/68.jpg" title="电影">
<div class="time1"></div>
<div class="zhen1"></div>
<div class="gray">
<p class="first">秦时明月</p>
</div>
</a>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/69.jpg" title="电影">
<div class="time1"></div>
<div class="zhen1"></div>
<div class="gray">
<p class="first">美丽的秘密</p>
</div>
</a>
</li>
<li class="fl scale" style="margin-right:0">
<a href="javascript:;">
<img src="images/70.jpg" title="电影">
<div class="dubo"></div>
<div class="time1"></div>
<div class="zhen1"></div>
<div class="gray">
<p class="first">替身</p>
</div>
</a>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/71.png" title="电影">
<div class="time1"></div>
<div class="zhen1"></div>
<div class="gray">
<p class="first">长在面包树上的女人</p>
</div>
</a>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/72.jpg" title="电影">
<div class="time1"></div>
<div class="zhen1"></div>
<div class="gray">
<p class="first">爸爸快长大</p>
</div>
</a>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/73.jpg" title="电影">
<div class="time1"></div>
<div class="zhen1"></div>
<div class="gray">
<p class="first">枪侠</p>
</div>
</a>
</li>
<li class="fl scale top">
<a href="javascript:;">
<img src="images/74.jpg" title="电影">
<div class="vip"></div>
<div class="zhen1"></div>
<div class="dubo"></div>
<div class="time1"></div>
<div class="gray">
<p class="first">蜀山战纪第3季</p>
</div>
</a>
</li>
<li class="fl scale top" style="margin-right:0">
<a href="javascript:;">
<img src="images/75.jpg" title="电影">
<div class="vip"></div>
<div class="zhen1"></div>
<div class="time1"></div>
<div class="gray">
<p class="first">灵魂摆渡2</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl movie_r">
<div class="movie_b"></div>
<ol>
<li class="clearfix">
<a href="javascript:;">
<div class="fl green">1</div>
<p class="fl">枪侠</p>
<span class="fr heng"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl">7</div>
<p class="fl">废材兄弟3</p>
<span class="fr heng"></span>
</a>
</li>
<li class="clearfix">
<a href="javascript:;">
<div class="fl">8</div>
<p class="fl">俺娘田小草</p>
<span class="fr heng"></span>
</a>
</li>
</ol>
<ul class="movie_r">
<li class="scale">
<a href="javascript:;">
<img src="images/76.jpg" title="电影">
<div class="gray">
<p class="first">神剧亮了 : 年度魔性爆款...</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="cartoon clearfix">
<div class="fl" style="width:580px;">
<div class="clearfix" style="border-bottom:2px solid #8ac024;padding-bottom:9px;">
<div class="fl cartoon_h"></div>
<div class="fl cartoon_r">
<span class="fl"><a href="javascript:;">真人特区</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">动画电影</a></span><em class="fl"></em>
</div>
</div>
<div class="fl hai scale">
<a href="javascript:;">
<img src="images/77.jpg" title="动漫">
<div class="today"></div>
<div class="dubo"></div>
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 航海王</p>
</div>
</a>
</div>
<ul class="fl">
<li class="scale">
<a href="javascript:;">
<img src="images/78.jpg" title="动画" width="180px"; height="101px";>
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 航海王铠甲勇士捕将</p>
</div>
</a>
</li>
<li class="scale top">
<a href="javascript:;">
<img src="images/82.jpg" title="动画">
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 爆笑虫子合集</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl" style="margin-left:20px; width:380px;">
<div class="kid"></div>
<ul class="clearfix">
<li class="scale fl" style="margin-right:20px;">
<a href="javascript:;">
<img src="images/79.jpg" title="动画" width="180px"; height="101px";>
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 洋洋得意喜羊羊</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/80.jpg" title="动画" width="180px"; height="101px";>
<div class="zhen1"></div>
<div class="dubo"></div>
<div class="gray">
<p class="first"> 小花仙第2季</p>
</div>
</a>
</li>
<li class="scale top fl" style="margin-right:20px;">
<a href="javascript:;">
<img src="images/83.jpg" title="动画" width="180px"; height="101px";>
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 小马宝莉第5季</p>
</div>
</a>
</li>
<li class="scale top fl">
<a href="javascript:;">
<img src="images/84.jpg" title="动画" width="180px"; height="101px";>
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 粉红猪小妹</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl" style="margin-left:20px; width:180px;">
<div class="teach"></div>
<ul>
<li class="scale">
<a href="javascript:;">
<img src="images/81.jpg" title="动画" width="180px"; height="101px";>
<div class="zhen1"></div>
<div class="dubo"></div>
<div class="gray">
<p class="first"> MV美语Rambo Show</p>
</div>
</a>
</li>
<li class="scale top">
<a href="javascript:;">
<img src="images/85.jpg" title="动画" width="180px"; height="101px";>
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 英国有氧健身操</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="pe clearfix">
<div class="fl" style="width:380px; margin-right:20px;">
<div class="clearfix pe_g">
<div class="fl pe_h"></div>
<div class="fl" style="margin-left:34px;margin-top:10px;">
<span class="fl"><a href="javascript:;">足球</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">篮球</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">美网</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">昆仑决</a></span><em class="fl"></em>
</div>
</div>
<ul class="clearfix" style="margin-top:25px;">
<li class="scale fl" style="margin-right:20px;">
<a href="javascript:;">
<img src="images/86.jpg" title="体育">
<div class="gray">
<p class="first"> 吉鲁破门阿森纳2-1曼城</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/87.jpg" title="体育">
<div class="gray">
<p class="first"> 曼萨诺抵上海受球迷热捧</p>
</div>
</a>
</li>
<li class="scale fl top" style="margin-right:20px" ;>
<a href="javascript:;">
<img src="images/88.jpg" title="体育">
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 苏宁接手江苏舜天俱乐部</p>
</div>
</a>
</li>
<li class="scale fl top">
<a href="javascript:;">
<img src="images/89.jpg" title="体育">
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 布拉特不服FIFA判罚上诉</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl" style="width:380px; margin-right:20px;">
<div class="clearfix pe_g">
<div class="fl music"></div>
<div class="fl" style="margin-left:34px;margin-top:10px;">
<span class="fl"><a href="javascript:;">爱奇艺音乐榜</a></span><em class="fl"></em>
</div>
</div>
<ul class="clearfix" style="margin-top:25px;">
<li class="scale fl" style="margin-right:20px;">
<a href="javascript:;">
<img src="images/95.jpg" title="音乐" height="253px"; width="180px">
<div class="gray">
<p class="first">  EXO- Sing For You</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/90.jpg" title="音乐">
<div class="gray">
<p class="first">  Hands To Mysel</p>
</div>
</a>
</li>
<li class="scale fl top">
<a href="javascript:;">
<img src="images/91.jpg" title="音乐">
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 韩庚-逃不掉</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl" style="width:380px;">
<div class="clearfix pe_g">
<div class="fl fas"></div>
<div class="fl" style="margin-left:34px;margin-top:10px;">
<span class="fl"><a href="javascript:;">独家报道</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">SHOW场</a></span>
</div>
</div>
<ul class="clearfix" style="margin-top:25px;">
<li class="fl" style="margin-right:20px;">
<a href="javascript:;">
<div class="dubo"></div>
<img src="images/92.jpg" title="时尚" height="253px" width="180px">
<div class="gray">
<p class="first"> 揭秘时尚杂志高层“宫斗”</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/93.jpg" title="时尚">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 刘雯5大女神特质虏获男神</p>
</div>
</a>
</li>
<li class="scale fl top">
<a href="javascript:;">
<img src="images/94.jpg" title="时尚">
<div class="gray">
<p class="first"> 打造熟女风大地色系眼妆</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="alist clearfix">
<div class="fl top">
<div class="mother clearfix">
<div class="fl mother1"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">一起怀孕吧</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">圣诞创意活动</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/96.jpg" title="母婴">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 好老公必知 超级奶爸养成...</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/97.jpg" title="母婴">
<div class="gray">
<div class="zhen1"></div>
<div class="dubo"></div>
<p class="first"> 龙包主动牵手王子俊</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl top">
<div class="mother clearfix">
<div class="fl life"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">悦活汇</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">美食专区</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">窍门季</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/98.jpg" title="生活">
<div class="gray">
<div class="zhen1"></div>
<div class="dubo"></div>
<p class="first"> 学做可口家常宴客美食</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/99.jpg" title="生活">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 男生都爱的粉嫩清纯恋爱妆</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl top">
<div class="mother clearfix">
<div class="fl heal"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">医疗卫生</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">养生保健</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/100.jpg" title="健康">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 怀孕多久开始呕吐呢？</p>
</div>
</a>
</li>
<li class="scale fl" style="margin-right:0">
<a href="javascript:;">
<img src="images/101.jpg" title="健康">
<div class="gray">
<p class="first"> 10个关于胸部的冷知识</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl top">
<div class="mother clearfix">
<div class="fl keji"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">科技相对论</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">极客说</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/102.jpg" title="科技">
<div class="gray">
<p class="first"> 疑似iPhone7真机视频泄露</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/103.jpg" title="科技">
<div class="gray">
<p class="first"> 世界互联网大会马云演讲</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl top">
<div class="mother clearfix">
<div class="fl car"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">奔驰GLS</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">捷豹纯电动赛车</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/104.jpg" title="汽车">
<div class="gray">
<p class="first"> BMW 3系 VS BMW I8</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/105.jpg" title="汽车">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 长安逸动城市任务总决赛</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl top">
<div class="mother clearfix">
<div class="fl money"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">吴晓波频道</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">创业专区</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/106.jpg" title="财经">
<div class="gray">
<p class="first"> 空姐献吻只为卖苹果</p>
</div>
</a>
</li>
<li class="scale fl" style="margin-right:0">
<a href="javascript:;">
<img src="images/107.jpg" title="财经">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 半年估值18亿老板竟被轰</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl top">
<div class="mother clearfix">
<div class="fl travel"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">翻滚吧地球</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">XFUN吃货俱乐部</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/108.jpg" title="旅游">
<div class="gray">
<div class="zhen1"></div>
<div class="dubo"></div>
<p class="first"> 这酸爽 ! 梦魇梦工厂</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/109.jpg" title="旅游">
<div class="gray">
<p class="first"> 重新发现属于你的魅力香港</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl top">
<div class="mother clearfix">
<div class="fl jilu"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">VIP精选</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">热记录</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/110.jpg" title="纪录片">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 日本记者镜头的抗日战争</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/111.jpg" title="纪录片">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 机器人时代 : 顶尖机器人秀</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl top">
<div class="mother clearfix">
<div class="fl fight"></div>
<div class="fl mother2">
<span class="fl"><a href="javascript:;">军情七处</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">军武次位面</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/112.jpg" title="母婴">
<div class="gray">
<div class="zhen1"></div>
<p class="first"> 俄首证空中支援叙反对派</p>
</div>
</a>
</li>
<li class="scale fl" style="margin-right:0">
<a href="javascript:;">
<img src="images/113.jpg" title="母婴">
<div class="gray">
<p class="first"> 台媒称陆士兵上不起小学</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="langue clearfix">
<div class="fl">
<div class="langue1 clearfix">
<div class="fl langue2"></div>
<div class="fl langue3">
<span class="fl"><a href="javascript:;">欢乐精选</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">雷人囧事</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">笑霸来了</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/120.jpg" title="搞笑">
<div class="dubo"></div>
<div class="gray">
<p class="first"> 糗哭 ! 健身的妹子伤不起</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/121.jpg" title="搞笑">
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 冬天来了胖子只能吃土 ! </p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/122.jpg" title="搞笑">
<div class="gray">
<p class="first"> 惊 ! 日本校长买春1.2万人</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl">
<div class="langue1 clearfix">
<div class="fl video"></div>
<div class="fl langue3">
<span class="fl"><a href="javascript:;">粉丝频道</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">奇嘴八舌</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">饭点爽谈</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">边走边拍</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/123.jpg" title="拍客">
<div class="gray">
<p class="first"> 实拍巨大蟾蜍吞1米长蛇</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/124.jpg" title="拍客">
<div class="gray">
<p class="first"> 妖孽双人舞，身材太劲爆</p>
</div>
</a>
</li>
<li class="scale fl" style="margin-right:0;">
<a href="javascript:;">
<img src="images/125.jpg" title="拍客">
<div class="gray">
<p class="first"> 日本女子啦啦队强悍表演</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="game clearfix">
<div class="fl">
<div class="game1 clearfix">
<div class="fl game2"></div>
<div class="fl game3">
<span class="fl"><a href="javascript:;">我的世界</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">听姐说</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">LyingMan</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">《GoGoRPG》</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/126.jpg" title="游戏">
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 玩家大事件VOL4</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/127.jpg" title="游戏">
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 【血舞Crazy】MC穿越时...</p>
</div>
</a>
</li>
<li class="scale fl">
<a href="javascript:;">
<img src="images/128.jpg" title="游戏">
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 星界边境 EP.16多人生...</p>
</div>
</a>
</li>
</ul>
</div>
<div class="fl">
<div class="game1 clearfix">
<div class="fl pps"></div>
<div class="fl game3">
<span class="fl"><a href="javascript:;">我的世界</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">听姐说</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">LyingMan</a></span><em class="fl"></em>
<span class="fl"><a href="javascript:;">《GoGoRPG》</a></span>
</div>
</div>
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/129.jpg" title="pps奇秀">
<div class="zhibo"></div>
<div class="zhen1"></div>
<div class="gray">
<p class="first"> 旋子、唔唔旋旋就是干</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="end">
<ul class="clearfix">
<li class="scale fl">
<a href="javascript:;">
<img src="images/132.jpg">
<div class="gray">
<a href="javascript:;" class="one">公益频道</a>
<a href="javascript:;">更多></a>
</div>
</a>
<div class="ding"> 爱奇艺公益寻亲平台</div>
</li>
<li class="fl scale">
<a href="javascript:;">
<img src="images/133.jpg" alt="">
<div class="gray">
<a href="javascript:;" class="one">爱频道</a>
<a href="javascript:;">更多></a>
</div>
</a>
<div class="ding"> 奔跑吧小鹿</div>
</li>
<li class="scale fl" style="margin-right:0;">
<a href="javascript:;">
<img src="images/137.jpg">
<div class="gray">
<a href="javascript:;" class="one">爱奇艺商城</a>
<a href="javascript:;">更多></a>
</div>
</a>
</li>
</ul>
</div>
<div class="clearfix ally">
<div class="fl ally1">
<div class="clearfix" style="margin-top:20px;">
<h3 class="fl">合作伙伴</h3>
<a href="javascript:;" class="fl ally2">更多></a>
</div>
<div class="ally3">
<a href="javascript:;">万达电影网</a>
<a href="javascript:;">华谊兄弟</a>
<a href="javascript:;">星美</a>
<a href="javascript:;">光线影业</a>
<a href="javascript:;">电影网</a>
<a href="javascript:;">华策影视</a>
</div>
</div>
<div class="fl ally1" style="border-left:none;">
<div class="clearfix" style="margin-top:20px;">
<h3 class="fl">爱奇艺动态</h3>
<a href="javascript:;" class="fl ally2">更多></a>
</div>
<div class="ally4">
<a href="javascript:;">爱奇艺独家上线剧情选择功能</a>
<a href="javascript:;">爱奇艺《跑男》两期流量破4亿</a>
<a href="javascript:;">爱奇艺与WTA达成独家视频合作</a>
<a href="javascript:;">爱奇艺签约美巡赛独家视频网站</a>
<a href="javascript:;">爱奇艺影业与China 3D战略合作</a>
<a href="javascript:;">爱奇艺青啤新玩法持续高热</a>
</div>
</div>
</div>
<div class="line"></div>
<div class="footer">
<ul class="clearfix">
<li class="fl"><a href="javascript:;">公司介绍</a><span>|</span></li>
<li class="fl"><a href="javascript:;">新闻动态</a><span>|</span></li>
<li class="fl"><a href="javascript:;">联系方式</a><span>|</span></li>
<li class="fl"><a href="javascript:;">招聘英才</a><span>|</span></li>
<li class="fl"><a href="javascript:;">爱奇艺实验室</a><span>|</span></li>
<li class="fl"><a href="javascript:;">开放平台</a><span>|</span></li>
<li class="fl"><a href="javascript:;">应用商店</a><span>|</span></li>
<li class="fl"><a href="javascript:;">爱奇艺论坛</a><span>|</span></li>
<li class="fl"><a href="javascript:;">帮助与反馈</a><span>|</span></li>
<li class="fl"><a href="javascript:;">侵权投诉</a><span>|</span></li>
<li class="fl"><a href="javascript:;">About Us</a><span>|</span></li>
</ul>
<div class="report">
<b>违法和不良信息举报电话 : 400-800-7171</b>
<b style="margin-left:60px">举报邮箱 : jubao365@qiyi.com</b>
</div>
<div class="inter clearfix">
<div class="fl right">
<a href="javascript:;">京网文[2015]0652-282号</a>
<a href="javascript:;">京ICP证110636</a>
<a href="javascript:;">出版物经营许可证</a>
</div>
<div class="fl right">
<a href="javascript:;" class="pic">中国互联网诚信联盟</a>
<a href="javascript:;" class="pic2">经营性网站备案信息</a>
</div>
<div class="fl right">
<a href="javascript:;" class="pic3">互联网违法和不良信息举报中心</a>
<a href="javascript:;">京公网安备 11010802010263号</a>
</div>
<div class="fl right">
<a href="javascript:;">信息网络传播视听节目许可证 0110544号</a>
<a href="javascript:;">增值电信业务经营许可证 B2-20120273</a>
</div>
<div class="fl">
<a href="javascript:;">广播电视节目制作经营许可证（京）字第1938号</a>
<a href="javascript:;">互联网药品信息服务资格证书（京)-经营性-2013-0012</a>
</div>
</div>
<div class="all"><a href="javascript:;">Copyright @ 2015 爱奇艺 All Rights Reserved</a></div>
</div>
<div class="suction clearfix" id="suction">
<div class="fl logo"></div>
<div class="fl nav1" id="nav">导航</div>
<div class="fl text">
<input type="text" class="fl white" id="text" placeholder="爱情保卫战">
<div class="fl sou">搜全网</div>
</div>
<div class="login copy_login">
<div class="baby"></div>
<div class="close"></div>
<div class="account">
<div class="clearfix">
<p class="fl">账 号 ：</p>
<input type="text" placeholder="请输入手机/邮箱" class="fl">
</div>
<div class="clearfix" style="margin-top:24px">
<p class="fl">密 码 ：</p>
<input type="text" placeholder="请输入密码" class="fl">
</div>
</div>
<div class="memory clearfix">
<input type="checkbox" checked="true" class="fl">
<p class="fl">记住我</p>
<a href="javascript:;" class="fl" style="padding-left:85px;">找回密码</a>
<div class="fl" style="padding-left:11px;padding-right:11px;">|</div>
<a href="javascript:;" class="fl">立即注册</a>
</div>
<div class="loginto"><a href="javascript:;">登录</a></div>
<div class="other"></div>
</div>
<div class="enroll copy_en">
<div class="baby"></div>
<div class="close"></div>
<div class="account">
<div class="clearfix">
<p class="fl">手   机 ：</p>
<input type="text" placeholder="请输入手机号码" class="fl">
</div>
<div class="clearfix" style="margin-top:8px">
<p class="fl">密   码 ：</p>
<input type="text" placeholder="8~20位字母、数字或字符，至少包含两种" class="fl">
</div>
<div class="clearfix" style="margin-top:8px">
<p class="fl">验证码 ：</p>
<input type="text" placeholder="请输入右侧字母" class="fl" style="width:107px;height:30px;">
<div class="yzm fl"></div>
<div class="change fl"></div>
</div>
</div>
<div class="clearfix agree">
<input type="text" placeholder="8~20位字母、数字或字符，至少包含两种" class="fl" style="width:268px;height:30px;border:1px solid #ccc;padding-left:7px;">
<input type="checkbox" checked="true" class="fl" style="margin-top:10px; margin-right:10px;">
<p class="fl" style="margin-top:8px;">我同意</p>
<a href="javascript:;" class="fl" style="margin-top:8px;">《用户服务协议》</a>
<a href="javscript:;" class="fr" style="margin-top:8px;">立即登录</a>
</div>
<div class="loginto" style="margin-left:97px;width:278px; margin-top:20px;">
<a href="javascript:;">注册</a>
</div>
</div>
<div class="fl list">
<ul class="menu clearfix">
<li class="fl copy_l"><a href="javascript:;">登录</a></li>
<li class="fl copy_e"><a href="javascript:;">注册</a></li>
<li class="fl"><a href="javascript:;">开通VIP</a></li>
<li class="fl upload" id="upload">
<a href="javascript:;">上传</a>
<div class="upload1" id="Upload1">
<a href="javascript:;" style="color:#000;margin-top:5px;">上传视频</a>
<a href="javascript:;" style="color:#000">制作视频</a>
<a href="javascript:;" style="color:#000">我的空间</a>
<a href="javascript:;" style="color:#000">视频管理</a>
<a href="javascript:;" style="color:#000">流量分析</a>
<a href="javascript:;" style="color:#000">申请分成</a>
<div class="jiao"></div>
</div>
<i></i>
</li>
<li class="fl download">
<a href="javascript:;">下载客户端</a>
</li>
<li class="fl message" id="copy_m">
<a href="javascript:;">消息</a>
<i></i>
<div class="message1" id="copy_m1">
<div class="jiao jiao1"></div>
<span class="active">更新提示</span>
<span>用户推荐</span>
<span style="margin-right:0;">系统通知</span>
<div class="tab ctab">
<div class="cactive">您还没有收到新的更新消息</div>
<div>暂时还没有新的推荐</div>
<div>您还没有登录，<a href="javascript:;" class="loginline copy_l">登录</a>后可以可以查看完整的通知列表</div>
</div>
<a href="javascript:;" class="andmore">查看更多</a>
</div>
</li>
<li class="fl" id="copy_pr">
<a href="javascript:;">播放记录</a>
<div id="copy_pr1" class="message1">
<div class="jiao jiao2"></div>
<div class="pr_text">
<p>暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，<b>查看全部</b></p>
</div>
</div>
<i></i>
</li>
</ul>
</div>
<div class="nav2 clearfix" id="nav2">
<div class="fl run"></div>
<ul class="nav2_one fl">
<li class="fl"><a href="javascript:;">娱乐</a></li>
<li class="fl"><a href="javascript:;">体育</a></li>
<li class="fl"><a href="javascript:;">资讯</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/index.js"></script>
</body>
</html>
🏠 CSS样式代码
代码如下（示例）：
@charset "utf-8";
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
ol,
ul,
dl,
dt,
dd,
a,
i,
b,
em,
strong,
img,
input {
margin: 0;
padding: 0;
}
b,
strong,
i,
em {
font-weight: normal;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
.clearfix:after {
display: block;
content: '';
clear: both;
}
.clearfix {
zoom: 1;
}
input {
border: none;
background: none;
outline: none;
}
tetxarea,
select {
outline: none;
resize: none;
}
body {
font-size: 12px;
color: #666;
font-family: "Hiragino Sans GB", "WenQuanYi Micro Hei", tahoma, sans-serif;
}
.fl {
float: left;
}
.fr {
float: right;
}
img,
input,
select {
vertical-align: top;
}
img {
display: block;
border: none;
}
四、📁 目录结构
├── css
│ ├── base.css
│ └── index.css
├── images
│ ├── 1.png
│ ├── 100.jpg
│ ├── 101.jpg
│ ├── 102.jpg
│ ├── 103.jpg
│ ├── 104.jpg
│ ├── 105.jpg
│ ├── 106.jpg
│ ├── 107.jpg
│ ├── 108.jpg
│ ├── 1080.png
│ ├── 109.jpg
│ ├── 11.jpg
│ ├── 110.jpg
│ ├── 111.jpg
│ ├── 112.jpg
│ ├── 113.jpg
│ ├── 12.jpg
│ ├── 120.jpg
│ ├── 121.jpg
│ ├── 122.jpg
│ ├── 123.jpg
│ ├── 124.jpg
│ ├── 125.jpg
│ ├── 126.jpg
│ ├── 127.jpg
│ ├── 128.jpg
│ ├── 129.jpg
│ ├── 13.jpg
│ ├── 130.jpg
│ ├── 131.jpg
│ ├── 132.jpg
│ ├── 133.jpg
│ ├── 134.jpg
│ ├── 135.jpg
│ ├── 136.jpg
│ ├── 137.jpg
│ ├── 14.jpg
│ ├── 15.jpg
│ ├── 16.jpg
│ ├── 17.jpg
│ ├── 18.jpg
│ ├── 19.jpg
│ ├── 2.png
│ ├── 20.jpg
│ ├── 21.jpg
│ ├── 22.jpg
│ ├── 23.jpg
│ ├── 24.jpg
│ ├── 25.jpg
│ ├── 26.jpg
│ ├── 27.jpg
│ ├── 28.jpg
│ ├── 29.jpg
│ ├── 30.jpg
│ ├── 31.jpg
│ ├── 32.jpg
│ ├── 33.jpg
│ ├── 34.jpg
│ ├── 35.jpg
│ ├── 36.jpg
│ ├── 37.jpg
│ ├── 38.jpg
│ ├── 39.jpg
│ ├── 40.jpg
│ ├── 41.jpg
│ ├── 42.jpg
│ ├── 43.jpg
│ ├── 44.jpg
│ ├── 45.jpg
│ ├── 46.png
│ ├── 47.png
│ ├── 48.png
│ ├── 49.jpg
│ ├── 50.jpg
│ ├── 51.jpg
│ ├── 52.jpg
│ ├── 53.jpg
│ ├── 54.jpg
│ ├── 55.jpg
│ ├── 56.jpg
│ ├── 57.jpg
│ ├── 58.jpg
│ ├── 59.jpg
│ ├── 60.jpg
│ ├── 61.jpg
│ ├── 62.jpg
│ ├── 63.jpg
│ ├── 64.jpg
│ ├── 65.jpg
│ ├── 66.jpg
│ ├── 67.jpg
│ ├── 68.jpg
│ ├── 69.jpg
│ ├── 70.jpg
│ ├── 71.png
│ ├── 72.jpg
│ ├── 73.jpg
│ ├── 74.jpg
│ ├── 75.jpg
│ ├── 76.jpg
│ ├── 77.jpg
│ ├── 777.png
│ ├── 78.jpg
│ ├── 79.jpg
│ ├── 80.jpg
│ ├── 81.jpg
│ ├── 82.jpg
│ ├── 83.jpg
│ ├── 84.jpg
│ ├── 85.jpg
│ ├── 86.jpg
│ ├── 87.jpg
│ ├── 88.jpg
│ ├── 888.png
│ ├── 89.jpg
│ ├── 90.jpg
│ ├── 91.jpg
│ ├── 92.jpg
│ ├── 93.jpg
│ ├── 94.jpg
│ ├── 95.jpg
│ ├── 96.jpg
│ ├── 97.jpg
│ ├── 98.jpg
│ ├── 99.jpg
│ ├── Tv.png
│ ├── bg.png
│ ├── car.png
│ ├── cartoon.png
│ ├── dian.png
│ ├── dog.png
│ ├── down.png
│ ├── dubo.png
│ ├── erke.png
│ ├── fas.png
│ ├── fight.png
│ ├── game.png
│ ├── header
│ │ ├── 1.jpg
│ │ ├── 10.jpg
│ │ ├── 2.jpg
│ │ ├── 3.jpg
│ │ ├── 4.jpg
│ │ ├── 5.jpg
│ │ ├── 6.jpg
│ │ ├── 7.jpg
│ │ ├── 8.jpg
│ │ └── 9.jpg
│ ├── hela.png
│ ├── heng.png
│ ├── img1.gif
│ ├── img10.jpg
│ ├── img2.jpg
│ ├── img3.jpg
│ ├── img4.jpg
│ ├── img5.jpg
│ ├── img6.jpg
│ ├── img7.jpg
│ ├── img8.jpg
│ ├── img9.jpg
│ ├── jilu.png
│ ├── jingcaituijian.png
│ ├── kan.png
│ ├── keji.png
│ ├── kid.png
│ ├── langue.png
│ ├── life.png
│ ├── like.png
│ ├── logo.png
│ ├── love.png
│ ├── meiz.png
│ ├── money.png
│ ├── mother.png
│ ├── movie.png
│ ├── movie_b.png
│ ├── music.png
│ ├── pe.png
│ ├── pf.png
│ ├── play.png
│ ├── play1.png
│ ├── pps.png
│ ├── qq.png
│ ├── queshi.png
│ ├── recreation.png
│ ├── run.png
│ ├── runman.png
│ ├── sfq
│ │ ├── 1.1.jpg
│ │ ├── 1.jpg
│ │ ├── 13.png
│ │ ├── 14.png
│ │ ├── 2.1.jpg
│ │ ├── 2.jpg
│ │ ├── 3.1.jpg
│ │ ├── 3.jpg
│ │ ├── 4.1.jpg
│ │ ├── 4.jpg
│ │ ├── 5.1.jpg
│ │ ├── 5.jpg
│ │ ├── 6.1.jpg
│ │ └── 6.jpg
│ ├── sou.png
│ ├── star.png
│ ├── taomeng.png
│ ├── teach.png
│ ├── time.png
│ ├── today.png
│ ├── travel.png
│ ├── tuokou.png
│ ├── tuzi.png
│ ├── tvb.png
│ ├── up.png
│ ├── v_movie.png
│ ├── variety.png
│ ├── video-safe.png
│ ├── video.png
│ ├── vip.png
│ ├── volin.png
│ ├── xie.png
│ ├── zhibo.png
│ ├── zhizhi.png
│ └── zi.png
├── index.html
└── js
├── index.js
└── jquery-1.7.2.js
五、💡 博主建议
第一，明确学习目标
在进行学习时，无论是通过阅读、参加课程还是参与线下活动，都要设定清晰的目标。思考你想要解决的问题或希望实现的具体目标，这样能够更有针对性地进行学习。
第二，从实战中学习
单纯的理论学习往往难以记忆和应用，因此实践是关键。初学者可以通过模仿和重写已有的代码来加深理解。实战经验不仅能巩固基础，还能快速提升技能。
第三，建立个人知识体系
知识无穷无尽，面对浩瀚的书籍和信息，我们需要理清思路，避免迷失。每一个知识点都有其特定的背景和边界，通过归纳和整理，可以形成自己的知识体系，帮助更好地理解和应用。
第四，将所学应用于实践
学到的知识必须与实际工作和生活结合起来。每天学习的新知识应当与现实情况联系，通过实践来验证和深化理解。热爱学习是值得赞扬的，但能有效应用知识的人才是真正有价值的。
六、🎁 更多作品
如果我的博客对你有所帮助，或者你喜欢我的内容，请别忘了“👍点赞”、“✍️评论”和“❤️收藏”，支持我一下哦！
关注我获取更多源码，这里有丰富的前端插件、炫酷的3D效果、图片展示、文字效果，以及整站模板、大学生毕业HTML模板、期末大作业模板等！在这里，许多前端开发者聚集在一起，共同探讨前端和Node知识，互相学习！
👇🏻👇🏻👇🏻对于上述技术相关的技术问题有不懂的，欢迎随时免费交流学习👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
