HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
❤ 【作者主页——🔥获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 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代码
代码如下（示例）：以下仅展示部分代码供参考~
<div id="index_focus">
<span class="tu">
<a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
<a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
<a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
<a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
<a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
</span>
</div>
<div class="index_jrtj">
<div class="content">
<p class="titlestyle1"><strong class="yahei">今日推荐</strong><span>Recommended</span><b><a href="#">七夕中国</a>|<a href="#">林俊杰</a>|<a href="#">音乐节</a>|<a href="#">S.H.E</a>|<a href="#">蔡健雅</a>|<a href="#">任贤齐</a></b></p>
<div id="carousel_container">
<div id="carousel_inners">
<ul id="carousel_ul" class="clearfix artist_l">
<li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a><span class="but_gp"></span></li>
<li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a><span class="but_gp"></span></li>
<li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a><span class="but_gp"></span></li>
<li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a><span class="but_gp"></span></li>
<li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a><span class="but_gp"></span></li>
<li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a><span class="but_gp"></span></li>
<li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a><span class="but_gp"></span></li>
<li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a><span class="but_gp"></span></li>
</ul>
</div>
</div>
</div>
<div id="left_scroll">11</div>
<div id="right_scroll">22</div>
</div>
<div class="hot_tours">
<p><img src="images/back01.gif" width="1008" height="11" /></p>
<div class="content">
<div class="left_focus floatl">
<p class="titlestyle1"><strong class="yahei">热门巡演</strong><span>Hot tours</span></p>
<div id="slide1" class="slide-panel">
<div>
<img src="images/simg_02.jpg" width="231" height="319" style="display:block;"/>
<img src="images/simg_02.jpg" width="231" height="319" />
<img src="images/simg_02.jpg" width="231" height="319" />
</div>
</div>
<div id="trigger1" class="slide-trigger"><!-- 自动创建 triggers --></div>
<script type="text/javascript">
$(function(){
$("#trigger1").switchable("#slide1 > div > img", { effect: "fade", speed:.5,circular:true }).autoplay();
});
</script>
</div>
<div class="tours_imgshow floatl">
<div class="left floatl">
<ul class="artist_l">
<li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" /></a><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场 馆： 万事达中心</p></a></li>
<li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" /></a><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场 馆： 万事达中心</p></a></li>
<li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" /></a><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场 馆： 万事达中心</p></a></li>
</ul>
</div>
<div class="right floatl">
<ul class="artist_l">
<li><img src="images/simg_04.jpg" width="210" height="182" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场 馆： 万事达中心</p></a></li>
<li><img src="images/simg_04.jpg" width="210" height="182" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场 馆： 万事达中心</p></a></li>
</ul>
</div>
</div>
<div class="tours_rfocus floatl">
<div id="carousel">
<div id="buttons">
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="slides">
<ul>
<li><img src="images/pp_zlj.png" width="307" height="299" /></li>
<li><img src="images/pp_zlj.png" width="307" height="299" /></li>
<li><img src="images/pp_zlj.png" width="307" height="299" /></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="index_1f">
<p class="cl_title"><span><a href="#">进入话剧歌剧频道</a></span><strong><a href="#">首都剧场</a><a href="#">孟京辉</a><a href="#">开心麻花</a><a href="#">赖声川</a><a href="#">繁星戏剧村</a></strong></p>
<div class="index_lcbox">
<div class="f1_left">
<div class="left_ad">
<ul class="artist_l">
<li><img src="images/simg_05.jpg" width="296" height="300" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时 间：2013.07.01</p><p>场 馆： 万事达中心</p></a></li>
</ul>
</div>
<ul class="left_news">
<li><a href="#">中国国家话剧院话剧《活着》</a></li>
<li><a href="#">田沁鑫青春爱情三部曲 《夜店之天生绝配》</a></li>
<li><a href="#">25周年戏剧季《最后14堂星期二的课》</a></li>
<li><a href="#">第一届两岸三地青年戏剧节 话剧《最后晚餐》</a></li>
</ul>
<div class="sm_ad">
<a href="#"><img src="images/simg_06.jpg" width="296" height="96" /></a>
</div>
</div>
2.CSS代码
#index_focus {height: 451px; position: relative;overflow: hidden;margin-right: auto;margin-left: auto; background:#515151; z-index:100;}
#index_focus .tu {text-align: center;display: block;margin-right: auto;margin-left: auto;}
#index_focus #hao .xu {display: inline;float: left;height: 15px;width: 15px;line-height: 15px;color: #FFFFFF;font-size: 12px;font-weight: bolder;cursor:pointer;background:#666;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px; border-left-width: 0px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;text-align:center; font-family:Arial;margin:0 2px;}
#index_focus #hao {position: absolute;right: 10px;height: 15px;width: 330px;z-index: 3;bottom: 0px;}
#index_focus #hao a:hover{ text-decoration:none;}
#index_focus .txt {display: block;position: absolute;top: 423px;height: 53px;width: 385px;right: 50px;z-index:3;}
#index_focus .tu .lianjie {display: block;height: 530px; overflow:hidden;}
#index_focus .tu { text-align:center;}
#index_focus .tu p{ float:left; margin-left:50%; display:inline;}
#index_focus .tu img{ position:relative; left:-50%;}
.nav_post{ position:relative; width:1002px; margin:0 auto;}
.nav_menu{ position:absolute; left:0; top:40px; width:202px; border:2px solid #e20d82; z-index:999; height:444px; background:url(../images/leftmenu.gif) repeat-y #FFF;}
#site_nav .nav_menu dl{ line-height:22px; margin-left:7px; word-break:break-all;}
#site_nav .nav_menu dl a{ color:#626262; margin:0 5px;}
#site_nav .nav_menu dl dt{ font-size:14px; font-weight:bold;}
#site_nav .nav_menu dl dt a{ color:#3c3c3c;}
#site_nav .nav_menu dl a:hover{ color:#e20d82; text-decoration:underline;}
#site_nav .nav_menu .ych{ background:url(../images/menu_ico.gif) no-repeat 0 0; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .hj{ background:url(../images/menu_ico.gif) no-repeat 0 -55px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .yyh{ background:url(../images/menu_ico.gif) no-repeat 0 -135px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .ty{ background:url(../images/menu_ico.gif) no-repeat 0 -202px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .qyzt{ background:url(../images/menu_ico.gif) no-repeat 0 -279px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .etqz{ background:url(../images/menu_ico.gif) no-repeat 0 -355px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu dl dd{ margin-left:25px; white-space:nowrap}
#site_nav .nav_menu dl dd a{ display:block; min-width:30px; float:left;}
.index_jrtj{ width:1000px; margin:0 auto; background:url(../images/back_01.gif) repeat; height:383px; padding-bottom:5px; margin-top:11px; padding-right:6px; position:relative;}
.index_jrtj .content{ width:1000px; background:#FFF; border:1px solid #e2e2e2; height:383px;}
.titlestyle1{ margin-top:17px; margin-left:22px;}
.titlestyle1 strong{ font-size:20px; font-weight:100;}
.titlestyle1 span{ background:#e20d82; color:#FFF; padding:6px 3px; margin-left:6px; font-family:Arial;}
.titlestyle1 b{ font-weight:100; margin-left:10px; color:#dadada;}
.titlestyle1 b a{ color:#666666; margin:0 3px;}
.index_jrtj ul { margin-top:20px; }
.index_jrtj ul li{ float:left; position:relative; width:224px; margin:0 7px; display:inline; overflow:hidden; height:302px; }
.index_jrtj ul li img{ width:206px; height:285px; padding:7px; border:1px solid #e2e2e2;}
.but_gp{ position:absolute; width:59px; height:65px; right:-2px; bottom:0; background:url(../images/but_gp.png) no-repeat left top; display:block;}
.but_gp a{ display:block; width:59px; height:65px;}
#carousel_container{OVERFLOW: hidden; ZOOM: 1; POSITION: relative; width:938px; height:327px; overflow:hidden; margin-left:35px;}
#carousel_inner{ OVERFLOW: hidden; WIDTH: 990px; overflow: hidden; position:absolute;left:25px; top:5px;}
#left_scroll{position: absolute;left:10px;top:180px;width:24px;height:32px; cursor:pointer; z-index:999; background:url(../images/icon.gif) -80px -39px no-repeat; text-indent:-9999px;}
#right_scroll{position: absolute;top:180px;right:10px; width:23px; height:32px;cursor: pointer;cursor: hand; background:url(../images/icon.gif) -9px -39px no-repeat; text-indent:-9999px;}
#carousel_ul{width:9999px; height:95px; position:relative;}
.hot_tours{ width:1008px; margin:0 auto; height:408px; background:#e7e7e7;}
.hot_tours .content{ background:#ffffff; border:1px solid #e2e2e2; height:395px; width:1000px;}
.hot_tours .left_focus{ width:255px; height:395px; border-right:1px dashed #d0d0d0; position:relative;}
.hot_tours #slide1{ margin-left:13px; margin-top:16px;}
.hot_tours .slide-trigger{ position:absolute; right:20px; bottom:20px; }
.hot_tours .slide-trigger a{ background:#8f9493; padding:2px 5px; margin:0 1px; color:#ffffff;}
.hot_tours .slide-trigger .current{ background:#e6208e;}
.index_jrtj .but_gp{ right:-1px; bottom:0px;}
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬