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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="style/common.css">
</head>
<body>
<!-- 最大容器 -->
<div class="wapper">
<a href="" name="top"></a>
<!-- 头部 -->
<div class="header">
<div class="head">
<!-- logo -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt=""></a>
<img src="images/logo2.png" alt="">
</div>
<!-- 导航栏 -->
<div class="nav">
<ul>
<li>
<a class="dropbtn" href="index.html">优粤门户</a>
<!-- 下拉菜单 -->
<div class="dropdown-content">
<div class="txtimg">
<a href="video.html">优视频</a>
<img src="images/home_icon01.png" alt="">
</div>
<div class="txtimg">
<a href="activity.html">粤文化</a>
<img src="images/home_icon02.png" alt="">
</div>
<div class="txtimg">
<a href="cg.html">有机会</a>
<img src="images/home_icon03.png" alt="">
</div>
</div>
</li>
<li>
<a class="dropbtn" href="index.html">有啊社区</a>
<!-- 下拉菜单 -->
<div class="dropdown-content">
<div class="txtimg">
<a href="news.html">优新闻</a>
<img src="images/home_icon02.png" alt="">
</div>
<div class="txtimg">
<a href="detail.html">优社区</a>
<img src="images/home_icon01.png" alt="">
</div>
<div class="txtimg">
<a href="filmcritics.html">影评人</a>
<img src="images/home_icon03.png" alt="">
</div>
</div>
</li>
<li>
<a class="dropbtn" href="login.html">登录</a>
</li>
<li>
<a class="dropbtn" href="register.html">注册</a>
</li>
</ul>
<!-- 搜索按钮 -->
<div class="search">
<input type="image" name="img_btn" src="images/home_search01.png" />
<!-- 搜索按钮下拉菜单 -->
<div class="searchout">
<div class="search-dropdown">
<div class="inputbtn">
<input type="search" name="search">
<input type="button" name="btn" value="GO" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧 -->
<ul class="ul2">
<li>
<a href="detail.html"><img src="images/home_bottom03.png" alt=""></a>
<div class="right">
<h3>环太平洋<span>468人评论过</span></h3>
<p><span>#环太平洋##环太平洋#</span>对建筑物倒塌、核弹攻击城市、外星人入侵...<a href="">[详细]</a></p>
<div class="vary">
<img src="images/home_icon14.png" alt="">
<p>欧美电影</p>
</div>
</div>
</li>
<li>
<a href="detail.html"><img src="images/home_bottom04.png" alt=""></a>
<div class="right">
<h3>速度与激情6<span>783人评论过</span></h3>
<p> 杰森-斯坦森【<span>#速J#</span>】斯坦森饰演第六部大反派欧文-肖...<a href="">[详细]</a></p>
<div class="vary">
<img src="images/home_icon14.png" alt="">
<p>热映推荐</p>
</div>
</div>
</li>
<li>
<a href="detail.html"><img src="images/home_bottom05.png" alt=""></a>
<div class="right">
<h3>青春派<span>468人评论过</span></h3>
<p>《青春派》预告片“零差评”逆增长<a href="">[详细]</a></p>
<div class="vary">
<img src="images/home_icon14.png" alt="">
<p>电影预告</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="txt"> Copyright © 2013 URFILM 版权所有</div>
</div>
<!-- 返回顶部 -->
<div class="returntop">
<a href="#top"><img src="images/home_returntop.png" alt=""></a>
</div>
</div>
<script src="js/banner.js"></script>
</body>
</html>
2.CSS代码
/* 主页CSS */
/* 内容主体 */
.content_out{
width: 100%;
background-color: #f4f4f4;
border-bottom: 1px solid #e1e0e0;
}
.content_out .content{
width: 68%;
margin: 0 auto;
padding-top: 2.6rem;
}
/* 优视频 */
.content .video{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.video .title{
width: 49.7%;
height: 8.15rem;
background-color: #ff9000;
display: flex;
}
.title .tit{
color: white;
margin: auto;
display: flex;
}
.title .tit .u{
font-size: 4.57rem;
line-height: 4.57rem;
}
.title .tit h2{
font-size: 2.2rem;
font-weight: normal;
}
.title .tit p{
font-size: 1rem;
}
.video>a{
display: block;
width: 16.2%;
height: 8.15rem;
margin-bottom: .3rem;
}
.video>a.double{
width: 32.99%;
position: relative;
}
.video>a>img{
width: 100%;
height: 100%;
}
.double .more{
width: 100%;
height: 2.1rem;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
visibility: hidden;
background-color: rgb(255, 144, 0, .8);
}
.double:hover .more{
visibility: visible;
}
.double .more img{
display: block;
width: 1.3rem;
height: 1.3rem;
margin: 0 .5rem;
}
.double .more p{
font-size: .8rem;
color: white;
}
.video .tiao{
width: 100%;
height: .6rem;
background-color: white;
margin-top: .5rem;
margin-bottom: 1.4rem;
}
.video .tiao .per{
width: 38.5%;
height: 100%;
background-color: #ff9000;
}
/* 优粤沙龙 */
.salon{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 1.3rem;
}
.salon .title{
width: 32.4%;
height: 8.3rem;
display: flex;
background-color: #54d1f5;
}
.salon>a{
display: block;
width: 39.3%;
height: 8.3rem;
}
.salon>a img{
width: 100%;
height: 100%;
}
.sa
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
