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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电影售票系统-首页</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css/jquery.js"></script>
<script language="javascript" type="text/javascript" src="css/yao.js"></script></head>
<body>
<div class="header"><div class="top_img"><div class="logo"><a href="#"><img src="images/logo.gif" width="300" height="80" /></a></div><div class="rx"><img src="images/topad.gif" width="500" height="100" /></div><div class="top_nav"><p><a href="#"> 快速订票系统入口</a> </p><p><a href="#"> 最新优惠活动中心</a></p></div><div class="clear"></div></div><div class="menu"><ul><li id="a1"><a href="index.html">首 页</a></li><li id="a2"> <a href="websj.html">热门影片</a></li><li id="a3"><a href="case.html">正在热映</a></li><li id="a4"><a href="product.html">即将上映</a></li><li id="a5"><a href="list.html">经典回味</a></li><li id="a6"><a href="tuiguang.html">全球首映</a></li><li id="a7"><a href="#">热门活动</a></li><li id="a8"><a href="sub.html">优惠专区</a></li><li id="a9"><a href="contact.html">放映时刻表</a></li></ul></div>
</div>
<div class="banner"><div id="YFocus"><div id="YImage"><p id="YPhotos"> <a href="#" title="11"><img src="images/b5.jpg" alt="11" /></a> <a href="#" title="11"><img src="images/b1.jpg" alt="111" /></a> <a href="#" title="11"><img src="images/b3.jpg" alt="22" /></a> <a href="#" title="1"><img src="images/b4.jpg" alt="22" /></a> </p></div><p id="YSamples"> <a href="#1" class="current" title="2"><img src="images/bx5.jpg" alt="22" /></a> <a href="#1" title="2"><img src="images/bx1.jpg" alt="2" /></a> <a href="#1" title="2"><img src="images/bx3.jpg" alt="2" /></a> <a href="#1" title="2"><img src="images/bx4.jpg" alt="2" /></a> </p></div><script language="javascript" type="text/javascript">
<!--YAO.YTabs({tabs: YAO.getEl('YSamples').getElementsByTagName('img'),contents: YAO.getEl('YPhotos').getElementsByTagName('img'),auto: true,scroll: true,scrollId: 'YPhotos'});
//-->
</script>
</div>
<div class="contenter"><div class="left"><div class="left_1"><h2><span><a href="#">更多热映大片</a></span>全球抢先看 >></h2><div class="left_1_con"><div class="left_1_l"><div class="scrolldoorFrame"><ul class="scrollUl"><li class="sd01" id="m01"><a href="#"><dl class="hd_list"><dt><img src="images/hd01.jpg" width="81" height="35" /></dt><dd>【青春期3】</dd><dd>7月13日上映>></dd></dl></a></li><li class="sd02" id="m02"><a href="#"><dl style="border-bottom:0px #fff solid;"><dt><img src="images/fa3.gif" width="56" height="45" /></dt><dd style=" padding-top:10px;"><select name=""><option selected="selected">请选择场次</option><option>166(2号厅)</option><option>168(3号厅)</option><option>188(4号厅)</option></select></dd><div class="clear"></div></dl><dl><dt><img src="images/fa4.gif" width="56" height="45" /></dt><dd style=" padding-top:10px;"><input name="" type="button" class="dgbg" value="立即订购" /></dd><div class="clear"></div></dl><div class="wxpd"><a href="#"><img src="images/104.jpg" /></a></div></div></div><div class="right_5 top10px"><h2>热门影片榜 </h2><div class="inner02"><ul class="server_list"><li><a href="#"><span>19888</span>白雪公主与猎人</a></li><li><a href="#"><span>18667</span>三个火枪手</a></li><li><a href="#"><span>17558</span>王者之剑</a></li><li><a href="#"><span>17452</span>南极大冒险</a></li><li><a href="#"><span>9955</span>肖申克的救赎</a></li><li><a href="#"><span>9858</span>无法触碰</a></li><li><a href="#"><span>7522</span>忠犬八公的故事</a></li><li><a href="#"><span>5200</span>惊悚快感</a></li><li><a href="#"><span>2777</span>气场大比拼</a></li></ul></div></div><div class="right_4 top10px"><h2><span><a href="#"> 更多影片 </a></span>今日上映推荐 </h2><div class="inner022"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="135" align="center" width="140"><a href="#"><img src="images/index_r_03_seo.gif" width="120" height="100" /></a></td><td><a href="#">超凡蜘蛛侠</a><p>主演:成龙、谢霆锋</p></td></tr><tr><td height="135" align="center" width="140"><a href="#"><img src="images/index_r_03_seo2.gif" width="120" height="100" /></a></td><td><a href="#">复仇者联盟</a><p>主演:周星驰、梁朝伟</p></td></tr><tr><td height="135" align="center" width="140"><a href="#"><img src="images/index_r_03_seo3.gif" width="120" height="100" /></a></td><td><a href="#">枕边凶灵</a><p>主演:安德鲁·加菲尔德</p></td></tr><tr><td height="135" align="center" width="140"><a href="#"><img src="images/index_r_03_seo4.gif" width="120" height="100" /></a></td><td><a href="#">疯魔美女2</a><p>主演:张静初·李冰冰</p></td></tr></table></div></div></div><div class="clear"></div><div class="bottom top10px"><h2>订票帮助中心 >></h2><div class="bottom_con"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"><a href="#"><img src="images/20091130101638768.jpg" width="128" height="35" /></a></th><th scope="col"><a href="#"><img src="images/20091130101739119.jpg" width="128" height="35" /></a></th><th scope="col"><a href="#"><img src="images/20091130101911881.jpg" width="128" height="35" /></a></th><th scope="col"><a href="#"><img src="images/20091130102100902.jpg" width="128" height="35" /></a></th><th scope="col"><a href="#"><img src="images/20091130102356804.jpg" width="128" height="35" /></a></th></tr><tr><td><a href="#">如何快速购票</a></td><td><a href="#">购票说明介绍</a></td><td><a href="#">影片信息查询</a></td><td><a href="#">领悟科技公司</a></td><td><a href="#">公司新闻资讯</a></td></tr><tr><td><a href="#">找到欣赏影片</a></td><td><a href="#">支付相关说明</a></td><td><a href="#">联系我们</a></td><td><a href="#">电影订票系统</a></td><td><a href="#">河南影片营销策划</a></td></tr><tr><td><a href="#">今日快速订票说明</a></td><td><a href="#">优惠活动最新折扣</a></td><td><a href="#">电影购票系统说明</a></td><td><a href="#">领悟科技公司介绍</a></td><td><a href="#">领悟精致生活俱乐部</a></td></tr></table></div></div><div class="clear"></div>
</div>
<div class="footer"><div class="footer_nav">领悟科技旗下：电影售票系统 <a href="#">热门影片</a> | <a href="#">正在热映</a> | <a href="#">即将上映</a> | <a href="#">经典回味</a> | <a href="#">全球首映</a> | <a href="#">热门活动</a> | <a href="#">优惠专区</a> | <a href="#">放映时刻表</a> | <a href="#">公司新闻</a> | <a
</body>
</html>2.CSS代码
@charset "utf-8";
/* CSS Document */
.contenter{ width:972px; margin:0 auto;}
.left{ width:730px; float:left; overflow:hidden;}
.right{ width:230px; float:right;overflow:hidden;}
.left_1{ border:1px solid #ccc; height:352px; overflow:hidden;}
.left_1 h2{ background:#eeeeee; height:32px; margin:1px; font-size:14px; line-height:32px; text-indent:10px; color:#942F3F;}
.left_1 h2 span{ float:right; padding-right:10px; font-weight:normal;}
.left_1_con{ padding:10px;}
.left_1_l{ width:450px; float:left; height:300px; }
.left_1_r{ width:230px; float:right;height:300px;}
.left_1_r h3{ height:24px; line-height:24px; font-size:12px; }
.left_1_r dl{ height:65px; margin-bottom:8px;}
.left_1_r dl dt{ width:82px; height:67px; float:left; margin-right:5px;}
.left_1_r dl dt img{ border:1px solid #ccc;}
.left_1_r dl dd{ line-height:16px;}
.left_1_r dl dd strong{ color:#942F3F;}
.left_1_r ul li{ height:28px; line-height:28px; font-family:"宋体";}
.left_1_r ul li a{height:28px; line-height:28px; background:url(../images/ico.gif) no-repeat left center; padding-left:25px;}
.left_1_r ul li a span{ float:right;}
.left_1_r p{ text-align:right; height:22px; line-height:22px;}
.left_2,.left_3,.left_4,.left_5{ height:215px; overflow:hidden;}
.left_2 h2{ background:url(../images/title05.jpg) no-repeat; height:36px; line-height:28px; font-size:12px; color:#fff; text-indent:25px;}
.left_3 h2{ background:url(../images/title06.jpg) no-repeat; height:36px; line-height:28px; font-size:12px; color:#fff; text-indent:25px;}
.left_4 h2{ background:url(../images/title07.jpg) no-repeat; height:36px; line-height:28px; font-size:12px; color:#fff; text-indent:25px;}
.left_5 h2{ background:url(../images/title07.jpg) no-repeat; height:36px; line-height:28px; font-size:12px; color:#fff; text-indent:25px;}
.left_2 h2 a,.left_3 h2 a,.left_4 h2 a,.left_5 h2 a{ color:#fff; text-decoration:underline;}
.left_4 h2 a:hover,.left_5 h2 a:hover{ color:#fff; text-decoration:none;}
.left_2 h2 span,.left_3 h2 span,.left_4 h2 span,.left_5 h2 span{ font-weight:normal;}
.inner{ padding:10px;}
.anli_list{ float:left; width:157px; margin:5px 10px 0px 10px;_margin:0px 7px; overflow:hidden;}
.anli_list dt{ background:url(../images/probg.gif) no-repeat; height:100px; overflow:hidden; width:150px; padding:2px 5px 14px 2px; _padding:2px 4px 14px 2px; }
.anli_list dd { line-height:30px; text-align:center; overflow:hidden;}
.anli_list dd a{ line-height:30px; text-align:center; font-weight:bold;}
.left_5{ background:url(../images/alibg.gif) repeat-x left bottom;}
.anli_list dd p{ line-height:24px; text-align:left; padding-left:3px;}.left_6{ border:1px solid #ccc; overflow:hidden; width:728px;}
.left_6 h2{ background:#eeeeee; height:32px; margin:1px; font-size:12px; line-height:32px; text-indent:10px;}
.left_6 h2 span{ float:right; padding-right:10px; font-weight:normal;}
.left_6_con{ padding:10px 0px 0px 10px;}
.left_6_con strong{color:#942F3F;}
.fx_list{ width:230px; height:67px; float:left; margin-right:9px; margin-bottom:20px; _margin-bottom:10px; overflow:hidden;}
.fx_list dt{ width:65px; height:65px; float:left; margin-right:10px;}
.fx_list dt img{ border:1px solid #ccc;}
.right_1{height:349px; overflow:hidden; width:230px; background:url(../images/last.gif) no-repeat left bottom; padding-bottom:3px;}
.right_1 h2{ background:url(../images/title01.jpg) no-repeat; height:34px; line-height:34px; font-size:12px; text-indent:10px; color:#fff;}
.right_1 h2 span{ float:right; font-weight:normal; padding-right:10px;}
.inner02{ border-left:1px solid #ccc;border-right:1px solid #ccc; padding:2px 0;_padding:2px 0 0 0; }
.inner022{ border-left:1px solid #ccc;border-right:1px solid #ccc; padding:2px 2px 0 0; }
.inner022 a{ line-height:30px; text-decoration:none; font-size:12px; font-weight:bold;}
.inner022 p{ line-height:30px;}
.right_1 dl{ height:45px; border-bottom:1px solid #ccc; padding:1px 30px 1px 0px; overflow:hidden;}
.right_1 dl dt{ height:45px; width:56px; float:left;}
.right_1 dl dd{}
.right_1 dl dd select { width:100px; height:22px; line-height:22px; }
.dgbg{ width:100px; height:26px; border:none; background:url(../images/dgbg.jpg) no-repeat center center; color:#fff; font-size:14px; cursor:pointer;}
.dgbg02{ width:100px; height:26px; border:none; float:right; background:url(../images/dgbg.jpg) no-repeat center center; color:#fff; font-size:14px; cursor:pointer;}
.wxpd{height:104px; width:208px; padding:10px 10px;}.right_2{ border:1px solid #ccc; padding:5px 3px 0px;}
.right_2 h2{ height:25px; line-height:25px; border-bottom:1px dotted #ccc; font-size:12px; text-indent:16px; margin-bottom:5px;}
.right_3 {background:url(../images/last.gif) no-repeat left bottom; padding-bottom:3px; }
.right_4{background:url(../images/last.gif) no-repeat left bottom; padding-bottom:3px; }
.right_3 h2{ background:url(../images/title02.jpg) no-repeat; height:34px; line-height:34px;font-size:12px; text-indent:10px; color:#fff;}
.right_4 h2{ background:url(../images/title01.jpg) no-repeat; height:34px; line-height:34px;font-size:12px; text-indent:10px; color:#fff;}
.right_3 h2 span,.right_4 h2 span,.right_5 h2 span{ float:right; font-weight:normal; padding-right:10px;}.ym_list{ height:87px; padding:10px 0;}
.ym_list dt{ height:68px; padding:2px 11px;}
.ym_list dd{ height:15px; line-height:15px; text-align:center;}.right_5{ }
.right_5 h2{background:url(../images/title04.jpg) no-repeat; height:34px; line-height:34px;font-size:12px; text-indent:10px; color:#000; }
.right_5 .inner02{border-bottom:1px solid #ccc; padding:10px; overflow:hidden;}.server_list{}
.server_list li{ background:url(../images/icon.png) no-repeat left center; height:30px; line-height:30px; _height:31px; _line-height:31px; text-indent:20px;}
.server_list li a span{ float:right;}
.server{ clear:both; border:1px solid #ccc; overflow:hidden; }
.server h2{ background:#eeeeee; height:32px; margin:1px; font-size:12px; line-height:32px; text-indent:10px;}
.bottom{ clear:both; border:1px solid #ccc; overflow:hidden; }
.bottom h2{ background:#eeeeee; height:32px; margin:1px; font-size:12px; line-height:32px; text-indent:10px;}.bottom_con{ padding:10px;}
.bottom_con table th{ padding:3px 0px; text-align:center;}
.bottom_con table td{ height:25px; line-height:25px; text-align:center;}/*滑动门*/
.cls{clear:both;}
.hidden{display:none;}
.scrolldoorFrame{width:450px; height:300px; position:relative; overflow:hidden;z-index:100; }
.scrollUl{width:450px;overflow:hidden;height:103px; position:absolute; top:193px; left:0px; _left:-4px; z-index:80;}
.scrollUl li{float:left; width:112px; text-align:center; height:106px; background:url(../images/hd.gif) no-repeat; }
.scrollUl li a{display:block;height:86px;padding-top:20px;}
.sd01 a{ display:block;cursor:pointer; height:86px; width:112px;color:#666; background:url(../images/hdbg.gif) no-repeat; padding-top:20px; color:#fff; }
.sd02 a{display:block;cursor:pointer; height:106px; width:112px;}.hd_list{ width:87px; margin: 0 auto;}
.hd_list dt{ background:#fff;}
.hd_list dt img{ border:1px solid #ccc; padding:2px;}
.hd_list dd{ line-height:20px; height:20px;}三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
