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代码结构 🧱
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑夜主权(Night)</title>
<script type="text/javascript">
//设定rem值
document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 20 + 'px';
</script>
</head>
<body>
<header class="head">
<div class="head_logo_div">
<img class="logo_img" src="images/upload/head.jpg"></a>
</div>
<div class="head_nav_div">
<nav class="head_nav">
<ul id="nav_ul">
<li class="nav_li_on nav_ul_li">Home</li>
<li class="nav_ul_li">Skill</li>
<li class="nav_ul_li">Experience</li>
<li class="nav_ul_li">Hobby</li>
<li class="nav_ul_li">Contact</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</header>
<ul class="float_btn" id="float_btn">
<li class="btn_on"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="wrapBox" id="wrapBox">
<div class="box">
<img class="box_bg" src="images/upload/pic_1.jpg">
<div class="box01_content">
<div class="head_div">
<div class="cycle_item">
<a href="https://yoomeili.cn" class="github_a" id="github_a" target="_blank">
<span class="github_icon"></span>
<span class="github_text"><p class="item_name">GitHub</p></span>
</a>
<a href="http://blog.yoomeili.cn" class="weibo_a" id="weibo_a" target="_blank">
<span class="weibo_icon"></span>
<span class="weibo_text"><p class="item_name">微博</p> </span>
</a>
<a href="http://blog.yoomeili.cn" class="blog_a" id="blog_a" target="_blank">
<span class="blog_icon"></span>
<span class="blog_text"><p class="item_name"> 博客</p></span>
</a>
<div class="green_cycle">
<img class="green_cycle_img" src="images/icon/green_cycle.svg">
<div class="yellow_cycle">
<img class="yellow_cycle_img" src="images/icon/yellow_cycle.svg">
<div class="blue_cycle">
<img class="blue_cycle_img" src="images/icon/blue_cycle.svg">
<div class="head_img_div">
<img class="head_img" src="images/upload/head.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
<h1 class="title">黑夜</h1>
<h2 class="title_h2">千里之行，始于足下</h2>
<div id="box01_text">
<p class="box01_p">不久前还只是一个失业农民工.</p>
<p class="box01_p">现在还只是一只喜欢动漫和文学的学生党.</p>
<p class="box01_p">不久以后将是又一个人生迷茫的旅行者.</p>
</div>
</div>
<div class="arrow_div">
<img class="arrow_img" src="images/icon/arrowhead.png">
</div>
</div>
<div class="box">
<img class="box_bg" src="images/upload/pic_2.jpg">
<div class="box02_content box_content">
<div id='bar_container' class="bar_container">
<div class='bar mint' data-percent='70' data-skill='HTML5+CSS3'></div>
<div class='bar red' data-percent='50' data-skill='JavaScript'></div>
<div class='bar lila' data-percent='50' data-skill='前端工程化'></div>
<div class='bar orange' data-percent='50' data-skill='Node.js'></div>
<div class='bar gray' data-percent='30' data-skill='Java || C++'></div>
<div class="bar blue" data-percent='50' data-skill='PS&AE&PR&AI'></div>
<div class="bar green" data-percent='60' data-skill='绘画'></div>
</div>
<div id="box02_text">
<h1>About Skill</h1>
<div class="overline"></div>
<p>2012,第一次接触是C/C++,在拥挤的实验室</p>
<p>2013,三月份在寝室迷上了网络游戏</p>
<p>九月份开始学习到Java</p>
<p>2014,年初的时候摸了摸Android，觉得稀奇有趣</p>
<p>剩下的月份我在看JavaWeb</p>
<p>2015,接触到WordPress,兴趣开始转到前端和脚本语言</p>
<p>上半年插科打诨</p>
<p>下半年开始学习H5,CSS3,JS</p>
<p>现在正在学习前端工程化技术</p>
<p>喜欢UI,交互设计,觉得UED是我坚持精确1个像素的动力</p>
<p>而未来...</p>
<p>想成为一名全栈工程师</p>
</div>
<div class="clear"></div>
</div>
<div class="arrow_div">
<img class="arrow_img" src="images/icon/arrowhead.png">
</div>
</div>
<div class="box">
<img class="box_bg" src="images/upload/pic_3.jpg">
<div class="box_content box03_content">
<ul id="timeUl" class="timeUl">
<li>
<div>
<h1>2012-Now</h1>
<p>淄博职业学院</p>
<p>专业：机械制造与自动化</p>
<p>在风气不佳的考试战场中险些挂科(poi~)</p>
<p>最喜欢的科目是LOL
<p>
<p>现在正在愁于毕业设计</p>
</div>
</li>
<li>
<div>
<h1>2015.7-2015.8</h1>
<p>青花瓷酒店</p>
<p>服务员</p>
<p>没学到什么东西</p>
<p>前途多艰</p>
</div>
</li>
<li>
<div>
<h1>2016.3-2016.4</h1>
<p>小菜馆</p>
<p>传菜生</p>
<p>前途多艰</p>
</div>
</li>
<li>
<div>
<h1>Future</h1>
<p>...</p>
</div>
</li>
</ul>
<div class="left_div" id="left_div">
<img class="left_arrow" src="images/icon/arrowleft.png">
</div>
<div class="right_div" id="right_div">
<img class="right_arrow" src="images/icon/arrowright.png">
</div>
</div>
<div class="arrow_div">
<img class="arrow_img" src="images/icon/arrowhead.png">
</div>
</div>
<div class="box">
<img class="box_bg" src="images/upload/pic_4.jpg">
<div class="box_content box04_content">
<h1 class="box04_title">Something Of Hobby</h1>
<ul class="hobby_content">
<li class="hobby_01">
<div class="hobby_img_div">
<div class="spinner spinner_01"></div>
<div class="hobby_img">
<img src="images/upload/kapok.jpg">
</div>
<div class="hobby_img_info">
<h1>绘画</h1>
<h2>手绘&CG</h2>
</div>
</div>
<div class="hobby_text_div">
<div class="hobby_img_info_mob">
<h1>绘画/<a>手绘&CG</a></h1>
</div>
<p class="about_p">
对于绘画的热爱一部分来自于对ACG的热爱,小学时就开始拿着笔头被要烂的铅笔瞎画, 可惜父母和我都没发现这是个值得培养的爱好,以至于现在发展为一个手残.
</p>
<p>
比较擅长铅笔手绘动漫人物,SAI动漫人物的绘制(我是手残，上色渣渣).喜欢的画师是樋上至.
</a>
</p>
</div>
</li>
<li class="hobby_02">
<div class="hobby_img_div">
<div class="spinner spinner_02"></div>
<div class="hobby_img">
<img src="images/upload/acg.png">
</div>
<div class="hobby_img_info">
<h1>ACG</h1>
<h2>动漫&视频&lol</h2>
</div>
</div>
<div class="hobby_text_div">
<div class="hobby_img_info_mob">
<h1>ACG/<a>动漫&视频&lol</a></h1>
</div>
<p class="about_p">
入宅作《犬夜叉》,看完《Angle Beats!》深陷泥潭,最喜欢K社的作品(包括Galgame), 崇拜麻枝准,喜欢的歌手是ClariS.是个典型的萝莉控重度患者.
</p>
<p>
动漫对我而言是和文学一样的文化,最具感染力的抒情方式,将来希望自己工作在二次元的领域.
</p>
</div>
</li>
<li class="hobby_03">
<div class="hobby_img_div">
<div class="spinner spinner_03"></div>
<div class="hobby_img">
<img src="images/upload/reading.jpg">
</div>
<div class="hobby_img_info">
<h1>文学</h1>
<h2>历史&写作</h2>
</div>
</div>
<div class="hobby_text_div">
<div class="hobby_img_info_mob">
<h1>文学/<a>历史&写作</a></h1>
</div>
<p class="about_p">
和大多数人一样曾经也在可当上捧着一本小说看,以前喜欢小四韩寒马尔克斯村上春树,现在的兴趣 转移到历史上去了,屌丝只有多读书才能提高自己的内涵.
</p>
<p>
此外也会写点东西,就是毅力不够，仍需磨砺.
</p>
</div>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="arrow_div">
<img class="arrow_img" src="images/icon/arrowhead.png">
</div>
</div>
<foot id="foot" class="foot">
<h1 class="foot_title">Contact With Me</h1>
<div class="foot_info_main">
<ul>
<li class="github_items">
<a href="http://blog.yoomeili.cn" target="_blank">GitHub</a>
</li>
<li class="google_items">
<a href="http://blog.yoomeili.cn" target="_blank">Google+</a>
</li>
<li class="twitter_items">
<a href="http://blog.yoomeili.cn" target="_blank">Twitter</a>
</li>
<li class="facebook_items">
<a href="http://blog.yoomeili.cn" target="_blank">FaceBook</a>
</li>
<li class="weibo_items">
<a href="http://blog.yoomeili.cn" target="_blank">微博</a>
</li>
<li class="zhihu_items">
<a href="http://blog.yoomeili.cn" target="_blank">知乎</a>
</li>
<li class="blog_items">
<a href="http://blog.yoomeili.cn" target="_blank">博客</a>
</li>
<li class="email_items">
<a href="mailto:min@coolecho.net" target="_blank">邮箱</a>
</li>
<div class="clear"></div>
</ul>
<div class="qrcode_div">
<span class="weixin">
<a class="weixin_icon"></a>
<img class="weixin_img" src="images/upload/weixin_qr.png">
</span>
<span class="dingding">
<a class="dingding_icon"></a>
<img class="dingding_img" src="images/upload/dingding_qr.png">
</span>
<span class="qq">
<a class="qq_icon"></a>
<img class="qq_img" src="images/upload/qq_qr.jpg">
</span>
</div>
</div>
<div class="foot_power">
<h3>©2016 Pwoerd
<a href="http://yoomeili.cn" title="Night" target="_blank"> Night's</a>
<a href="https://blog.yoomeili.cn" title="IceEnd">黑夜主权</a>
<a href="http://www.miitbeian.gov.cn/" title="beian" target="_blank">浙ICP备14039906号-1</a>
</h3>
</div>
</foot>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
2.CSS样式代码 🏠
body {
background-color: #ffffff;
width: 100%;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
background-color: #f3f7fa;
height: 70px;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
-khtml-opacity: 0.9;
}
.logo_img {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid #ffffff;
margin-bottom: 15px;
}
.head_logo_div,
.head_nav_div {
width: 50%;
float: left;
}
.head_logo_div {
line-height: 70px;
text-align: center;
}
.head_nav_div {
line-height: 70px;
}
.head_nav {
margin: 0 auto;
}
.head_nav ul li {
float: left;
margin-right: 55px;
cursor: pointer;
font-size: 16px;
}
.head_nav ul li a {
font-size: 16px;
color: #333333;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transform: all 0.2s;
}
.head_nav ul li a:hover {
color: #4b91c9;
}
.wrapBox {
top: 0;
position: fixed;
width: 100%;
height: 100%;
}
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
