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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>海贼王主题网站</title>
<link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1649600488898/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/loading.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<header>
<nav>
<a class="logo" href="#">One Piece</a>
<ul class="nav">
<li><a href="">恶魔果实</a></li>
<li><a href="1.html">强者世界</a></li>
<li><a href="2.html">明暗大战</a></li>
<li><a href="3.html">成员介绍</a></li>
<li><a href="4.html">经典战役</a></li>
<li><a href="5.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="fruit">
<h2>恶魔果实</h2>
<ul class="fruit-box">
<li>
<img src="picture/16.jpg" alt="泡泡果实">
<h3>泡泡果实</h3>
<h5>卡莉法 </h5>
</li>
<li>
<img src="picture/21.jpg" alt="烧烧果实">
<h3>烧烧果实</h3>
<h5>艾斯/萨博</h5>
</li>
<li>
<img src="picture/31.jpg" alt="暗暗果实">
<h3>暗暗果实</h3>
<h5>黑胡子</h5>
</li>
<li>
<img src="picture/41.jpg" alt="手术果实">
<h3>手术果实</h3>
<h5>特拉法尔加·罗</h5>
</li>
<li>
<img src="picture/51.jpg" alt="牛牛果实">
<h3>牛牛果实-长颈鹿形态</h3>
<h5>卡库 </h5>
</li>
<li>
<img src="picture/61.jpg" alt="线线果实">
<h3>线线果实</h3>
<h5>多弗朗明哥</h5>
</li>
<li>
<img src="picture/7.jpg" alt="橡胶果实">
<h3>橡胶果实</h3>
<h5>路飞</h5>
</li>
<li>
<img src="picture/8.jpg" alt="四分五裂果实">
<h3>四分五裂果实</h3>
<h5>小丑巴基</h5>
</li>
</ul>
</section>
</main>
</div>
</body>
</html>
2.CSS样式代码 🏠
.loading{
width: 100%;
height: 100%;
background-color: bisque;
}
.dot-box {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.dot {
width: 24px;
height: 24px;
background: #3ac;
border-radius: 100%;
display: inline-block;
animation: slide 1s infinite;
}
.dot:nth-child(1) {
animation-delay: 0.1s;
background: #32cc8c;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
background: #64aacc;
}
.dot:nth-child(3) {
animation-delay: 0.3s;
background: #dfe987;
}
.dot:nth-child(4) {
animation-delay: 0.4s;
background: #972ca5;
}
.dot:nth-child(5) {
animation-delay: 0.5s;
background: #faaacc;
}
@-moz-keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
@-o-keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
@keyframes slide {
0% {
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(2);
}
100% {
transform: scale(1);
}
}
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习🔥!
💂【获取方式】
gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/39122.html
