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:;">开通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>
<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></a>
</li>
<li class="fl">
<a href="javascript:;" class="scale"><img src="images/img5.jpg" title="吴莫愁"><div class="part">吴莫愁分享特殊辨识技巧</div></a>
</li>
<li class="fl noleft">
<a href="javascript:;" class="scale"><img src="images/img9.jpg" title="时髦"><div class="part">超时髦奶奶惹选手惊叫</div></a>
</li>
<li class="fl">
<a href="javascript:;" class="scale"><img src="images/img7.jpg" title="奥巴马"><div class="part">奥巴马挑战荒野求生完整版</div></a>
</li>
<li class="fl noleft">
<a href="javascript:;" class="scale"><img src="images/img6.jpg" title="杀马特"><div class="part">白举纲变“杀马特”快男互撕</div></a>
</li>
<li class="fl">
<a href="javascript:;" class="scale"><img src="images/img8.jpg" title="李易峰"><div class="part">中信箐英卡连接有趣的世界</div></a>
</li>
</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>
<ul class="nav2_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="nav2_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="nav2_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="nav2_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>
</div>
</div>
</div>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/index.js"></script>
</body>
</html>
2.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;
}
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
![我的博客系统[Servlet]](https://img-blog.csdnimg.cn/0edbacb9ebd14d35a2b2257ae9159a3d.png)
