HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
一、网页介绍📖
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>
<head>
<meta charset="utf-8">
<title>火影忍者</title>
<link rel="stylesheet" type="text/css" href="./basic.css"/>
</head>
<body>
<div id="header">
<ul>
<li><a href="###1">木叶茶室</a></li>
<li><a href="###2">木叶日报</a></li>
<li><a href="###3">木叶漫画</a></li>
<li><a href="###4">火影图集</a></li>
<li><a href="###5">木叶音像</a></li>
<li><a href="###6">火影动画</a></li>
<li><a href="###7">火影cos</a></li>
<li><a href="###8">火影周边</a></li>
<li><a href="###9">火影论坛</a></li>
</ul>
</div>
<div id="sidebar">
<h1>论坛投票or热帖</h1>
<ul>
<li><a href="###">· [美图] 鸣人结婚啦</a></li>
<li><a href="###">· [分享] 卡卡西求婚记</a></li>
<li><a href="###">· [恶搞] 这张图 谁告诉我这</a></li>
<li><a href="###">· [转帖] 忍者们の童年&少年</a></li>
<li><a href="###">· [转帖] 测试：火影中谁是你</a></li>
</ul>
<form method="post">
<dl>
<dt>1.为你喜爱的晓成员投下神圣的一票 (单选) </dt>
<dd><label for="love1"><input type="radio" name="love" id="love1"> 俗套的老大-零</label></dd>
<dd><label for="love2"><input type="radio" name="love" id="love2"> 玉面正太的蝎-玉女</label></dd>
<dd><label for="love3"><input type="radio" name="love" id="love3"> 爆裂天使迪达拉-青龙</label></dd>
<dd><label for="love4"><input type="radio" name="love" id="love4"> 同人女最爱的鼬-朱雀</label></dd>
<dd><label for="love5"><input type="radio" name="love" id="love5"> 邪教自虐男飞段-三台</label></dd>
<dd><label for="love6"><input type="radio" name="love" id="love6"> 水忍猛男鬼鲛-南斗</label></dd>
<dd><label for="love7"><input type="radio" name="love" id="love7"> 五心上将角都-北斗</label></dd>
<dd class="submit">
<input type="submit" value="提交">
<input type="reset" value="重写">
<input type="button" value="查看">
</dt>
</dl>
</form>
</div>
<div id="news">
<h1>最新更新</h1>
<div id="newsbg">背景</div>
<dl class="newspic box1">
<dt><img src="./images/news_1.jpg" alt="《火影》第364话情报:暗藏的宇志波一人~迷之阿飞"></dt>
<dd>《火影》第364话情报:暗藏的宇志波一人~迷之阿飞</dd>
</dl>
<dl class="newspic box2">
<dt><img src="./images/news_2.jpg" alt="火影华丽同人系列(晓一)"></dt>
<dd>火影华丽同人系列(晓一)</dd>
</dl>
<div id="newslist">
<ul>
<li><em>[07-28]</em><a href="###"> ·《火影忍者》第364话：最终目的</a></li>
<li><em>[07-27]</em><a href="###"> ·《火影》第364话情报:暗藏的宇志波一人~</a></li>
<li><em>[07-25]</em><a href="###"> · 火影华丽同人系列(晓一)</a></li>
<li><em>[07-29]</em><a href="###"> ·《火影》第363话分析:老大背后的老大</a></li>
<li><em>[07-21]</em><a href="###"> ·《火影忍者》第363话：佐助之死</a></li>
<li><em>[07-28]</em><a href="###"> · 火影同人:宁井同人</a></li>
<li><em>[07-20]</em><a href="###"> ·《火影》第363话情报:迪达拉死讯震惊晓达</a></li>
<li><em>[07-24]</em><a href="###"> · 火影同人:燃烧灰烬</a></li>
<li><em>[07-26]</em><a href="###"> · 火影同人:迪达拉同志的xxEnding(文艺版)</a></li>
<li><em>[07-23]</em><a href="###"> · 火影同人:东邪西毒(蝎视角)</a></li>
<li><em>[07-18]</em><a href="###"> ·《火影》第362话分析:战斗的抉择</a></li>
<li><em>[07-17]</em><a href="###"> ·《火影忍者》单行本第24卷</a></li>
<li><em>[07-22]</em><a href="###"> · 鹿丸的理想生活</a></li>
<li><em>[07-14]</em><a href="###"> ·《火影忍者》第362话：终极艺术</a></li>
<li><em>[07-19]</em><a href="###"> · E3 2007《火影忍者》次世代高清截图放出</a></li>
</ul>
</div>
<div id="newscall">
[动画]火影第213话 [漫画]火影忍者第335回：恐怖的秘密
</div>
</div>
<div id="pics">
<h1>火影图集</h1>
<dl>
<dt><img src="./images/pics_1.jpg" alt="火影COSPLAY·回忆中の白"></dt>
<dd><a href="###1">火影COSPLAY·回忆中の白</a></dd>
</dl>
<dl>
<dt><img src="./images/pics_2.jpg" alt="《火影》另类个性图集"></dt>
<dd><a href="###2">《火影》另类个性图集</a></dd>
</dl>
<dl>
<dt><img src="./images/pics_3.jpg" alt="《火影》同人爱恋畅想鹿"></dt>
<dd><a href="###3">《火影》同人爱恋畅想鹿</a></dd>
</dl>
<dl>
<dt><img src="./images/pics_4.jpg" alt="火影同人秀之佐助"></dt>
<dd><a href="###4">火影同人秀之佐助</a></dd>
</dl>
<div id="picslist">
<ul>
<li><em>[07-29]</em><a href="###1">· 火影华丽同人系列(晓一)</a> </li>
<li><em>[07-09]</em><a href="###2">·《火影》另类个性图集</a> </li>
<li><em>[06-16]</em><a href="###3">·《火影》同人爱恋畅想之鹿井篇 </a> </li>
<li><em>[06-03]</em><a href="###4">· 火影同人秀之佐助 </a> </li>
</ul>
<ul>
<li><em>[06-03]</em><a href="###5">· 洛克李同人画集</a> </li>
<li><em>[07-29]</em><a href="###6">· 精美同人图赏汇</a> </li>
<li><em>[07-09]</em><a href="###7">· 笔下“鼬”生辉</a> </li>
<li><em>[06-16]</em><a href="###8">· 精选同人佐助图 </a></li>
</ul>
</div>
</div>
<div class="con cartoon">
<h1>火影漫画</h1>
<ul>
<li><a href="###1">·《火影忍者》第364话：最终目的</a> </li>
<li><a href="###2">·《火影忍者》第363话：佐助之死</a> </li>
<li><a href="###3">·《火影忍者》单行本第24卷</a> </li>
<li><a href="###4">·《火影忍者》第362话：终极艺术</a> </li>
<li><a href="###5">·《火影忍者》第361话：弱点</a> </li>
<li><a href="###6">·《火影忍者》第360话：迦楼罗</a> </li>
<li><a href="###7">·《火影忍者》单行本第23卷</a> </li>
<li><a href="###8">·《火影忍者》第359话：眼睛</a> </li>
<li><a href="###9">·《火影忍者》第358话：穷追猛打</a> </li>
<li><a href="###10">·《火影忍者》第357话:迪达斯VS佐助</a> </li>
<li><a href="###11">·《火影忍者》单行本第22卷</a> </li>
<li><a href="###12">·《火影忍者》第356话：激战…!</a> </li>
<li><a href="###13">·《火影忍者》第355话：去向</a> </li>
<li><a href="###14">·《火影忍者》第354话：开始行动的</a> </li>
<li><a href="###15">·《火影忍者》第353话：“晓”集合</a> </li>
</ul>
</div>
<div class="con daily">
<h1>木叶日报</h1>
<ul>
<li><a href="###1">·《火影忍者》第364话：最终目的</a> </li>
<li><a href="###2">·《火影忍者》第363话：佐助之死</a> </li>
<li><a href="###3">·《火影忍者》单行本第24卷</a> </li>
<li><a href="###4">·《火影忍者》第362话：终极艺术</a> </li>
<li><a href="###5">·《火影忍者》第361话：弱点</a> </li>
<li><a href="###6">·《火影忍者》第360话：迦楼罗</a> </li>
<li><a href="###7">·《火影忍者》单行本第23卷</a> </li>
<li><a href="###8">·《火影忍者》第359话：眼睛</a> </li>
<li><a href="###9">·《火影忍者》第358话：穷追猛打</a> </li>
<li><a href="###10">·《火影忍者》第357话:迪达斯VS佐助</a> </li>
<li><a href="###11">·《火影忍者》单行本第22卷</a> </li>
<li><a href="###12">·《火影忍者》第356话：激战…!</a> </li>
<li><a href="###13">·《火影忍者》第355话：去向</a> </li>
<li><a href="###14">·《火影忍者》第354话：开始行动的</a> </li>
<li><a href="###15">·《火影忍者》第353话：“晓”集合</a> </li>
</ul>
</div>
<div class="con tearoom">
<h1>木叶茶馆</h1>
<ul>
<li><a href="###1">·《火影忍者》第364话：最终目的</a> </li>
<li><a href="###2">·《火影忍者》第363话：佐助之死</a> </li>
<li><a href="###3">·《火影忍者》单行本第24卷</a> </li>
<li><a href="###4">·《火影忍者》第362话：终极艺术</a> </li>
<li><a href="###5">·《火影忍者》第361话：弱点</a> </li>
<li><a href="###6">·《火影忍者》第360话：迦楼罗</a> </li>
<li><a href="###7">·《火影忍者》单行本第23卷</a> </li>
<li><a href="###8">·《火影忍者》第359话：眼睛</a> </li>
<li><a href="###9">·《火影忍者》第358话：穷追猛打</a> </li>
<li><a href="###10">·《火影忍者》第357话:迪达斯VS佐助</a> </li>
<li><a href="###11">·《火影忍者》单行本第22卷</a> </li>
<li><a href="###12">·《火影忍者》第356话：激战…!</a> </li>
<li><a href="###13">·《火影忍者》第355话：去向</a> </li>
<li><a href="###14">·《火影忍者》第354话：开始行动的</a> </li>
<li><a href="###15">·《火影忍者》第353话：“晓”集合</a> </li>
</ul>
</div>
<div id="footer">
© 小叮当有希望专题--火影忍者
</div>
</body>
</html>
2.CSS样式代码 🏠
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
width: 760px;
margin: 0 auto;
background: url(./images/bg.gif);
position: relative;
}
ul{
list-style: none;
}
#header{
width: 760px;
height: 303px;
background: url(images/header.jpg) no-repeat;
}
#header ul{
padding: 272px 0 0 32px;
}
#header ul li{
float: left;
width: 77px;
height: 18px;
}
#header ul li a{
width: 77px;
height: 19px;
display: block;
text-indent: -9999px;
}
#sidebar{
width: 203px;
height: 420px;
background: url(images/sidebar_down.jpg) no-repeat bottom;
float: left;
}
#sidebar h1{
font-size: 100%;
text-indent: -9999px;
width: 203px;
height: 54px;
background: url(images/sidebar_header.jpg) no-repeat;
}
#sidebar ul{
background: url(images/sidebar_bg.jpg);
padding: 10px 0;
}
#sidebar ul li{
padding-left: 15px;
height: 20px;
}
#sidebar ul li a{
color: #333;
text-decoration: none;
}
#sidebar ul li a:hover{
color: #f00;
}
#sidebar dl{
background: url(images/sidebar_bg.jpg);
height: 235px;
}
#sidebar dl dt{
border-top: 1px solid #666;
width: 80%;
margin: 0 auto;
padding: 10px 0;
}
#sidebar dl dd{
width: 80%;
margin: 0 auto;
height: 20px;
}
#sidebar dl dd label{
display: block;
cursor: pointer;
}
#sidebar dl dd.submit{
padding-top: 5px;
}
#sidebar dl dd.submit input{
cursor: pointer;
}
#news{
width: 557px;
height: 420px;
background: url(images/news_down.jpg) no-repeat bottom;
float: right;
position: relative;
}
#news h1{
font-size: 100%;
text-indent: -9999px;
width: 557px;
height: 80px;
background: url(images/news_header.jpg) no-repeat;
}
#news #newsbg{
width: 557px;
height: 327px;
background: url(./images/news_bg.jpg);
text-indent: -9999px;
}
#news dl.newspic{
width: 143px;
height: 138px;
position: absolute;
}
#news dl.newspic dt{
height: 108px;
background: #eed8a7;
border: 1px solid #a3720b;
}
#news dl.newspic dt img{
display: block;
padding: 4px 0 0 3px;
}
#news dl.newspic dd{
padding: 5px 0;
text-align: center;
}
#news dl.box1{
top: 85px;
left: 40px;
}
#news dl.box2{
top:235px;
left: 40px;
}
#news #newslist{
width: 331px;
height: 309px;
background: url(./images/news_listbg.jpg) no-repeat;
position: absolute;
top: 58px;
left: 200px;
}
#news #newslist ul{
width: 90%;
margin: 0 auto;
line-height: 160%;
padding-top: 8px;
}
#news #newslist ul li a{
text-decoration: none;
color: #725006;
}
#news #newslist ul li a:hover{
color: red;
}
#news #newslist ul li em{
font-style: normal;
float: right;
}
#news #newscall{
width: 510px;
height: 34px;
background: url(./images/news_call.jpg) no-repeat;
position: absolute;
top: 375px;
left: 30px;
color: #725006;
line-height: 34px;
text-align: center;
}
#pics{
width: 760px;
height: 256px;
background: url(./images/pics_bg.jpg) no-repeat;
clear: both;
}
#pics h1{
width: 80px;
height: 256px;
background: url(./images/pics_header.jpg) no-repeat;
font-size: 100%;
text-indent: -9999px;
float: left;
}
#pics dl{
width: 143px;
height: 138px;
float: left;
padding: 15px 0 0 15px;
}
#pics dl dt{
height: 108px;
background: #eed8a7;
border: 1px solid #a3720b;
}
#pics dl dt img{
display: block;
padding: 4px 0 0 3px;
}
#pics dl dd{
padding: 5px 0;
text-align: center;
color: #725006;
}
#pics dl dd a{
text-decoration: none;
color: #725006;
}
#pics dl dd a:hover{
color: red;
}
#pics #picslist{
width: 655px;
height: 91px;
background: url(./images/pics_more.jpg) no-repeat;
float: left;
}
#pics #picslist ul{
width: 50%;
float: left;
line-height: 150%;
padding-top: 10px;
}
#pics #picslist ul li{
padding-left: 15px;
}
#pics #picslist ul li a{
text-decoration: none;
color: #725006;
}
#pics #picslist ul li em{
font-style: normal;
float: right;
padding-right: 20px;
}
#pics #picslist ul li a:hover{
color: red;
}
div.con {
width:253px;
height:373px;
float:left;
}
div.con h1 {
font-size:100%;
text-indent:-9999px;
height:71px;
width:253px;
}
div.con ul {
background:url(../images/cartoon_bg.jpg);
height:288px;
padding-top:2px;
}
div.con ul li {
padding-left:20px;
height:19px;
line-height:19px;
}
div.con ul li a {
color:#725006;
text-decoration:none;
}
div.con ul li a:hover {
color:#f00;
}
div.cartoon {
background:url(./images/cartoon_down.jpg) no-repeat bottom;
}
div.cartoon h1 {
background:url(./images/cartoon_header.jpg) no-repeat;
}
div.cartoon ul {
background:url(./images/tearoom_bg.jpg);
}
div.daily {
background:url(./images/cartoon_down.jpg) no-repeat bottom;
}
div.daily h1 {
background:url(./images/daily_header.jpg) no-repeat;
}
div.daily ul {
background:url(./images/tearoom_bg.jpg);
}
div.tearoom {
width:254px;
background:url(./images/tearoom_down.jpg) no-repeat bottom;
}
div.tearoom h1 {
width:254px;
background:url(./images/tearoom_header.jpg) no-repeat;
}
div.tearoom ul {
background:url(./images/tearoom_bg.jpg);
}
#footer{
width: 760px;
height: 66px;
line-height: 66px;
color: #333;
text-align: center;
background: url(./images/footer.jpg);
clear: both;
}
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习🔥
本文含有隐藏内容，请 开通VIP 后查看