web期末网站设计大作业 HTML+CSS+JS仿爱奇艺官网影视网站
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
-
- 1.HTML代码
- 2.CSS代码
- 三、个人总结
- 四、精彩推荐
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果
二、代码展示
1.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:;">开通VIPa>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>
<ul class="nav_three 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>
<ul class="nav_four 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>
<ul class="nav_five 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>
<ul class="nav_six 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>
<ul class="nav_seven fl">
<li class="fl"><a href="javascript:;">PPS游戏a>li>
<li class="fl"><a href="javascript:;">PPS奇秀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>