作者主页: 【主页——获取更多优质源码】
前端期末的大作业是，毕设项目精品实战的案例，总共有1000套 。
编写程序的人员特有的好玩的表达爱意并告知对方的方式是，有关于HTML七夕情人节表白网页制作的内容，且一共有110套 。
极为酷炫的Echarts大屏可视化源码呈现如下：【 echarts大屏用于展示大数据平台可视化，数量为150套 】 。
一款Web前端学习指南，它是免费的，而且具备实用性：这个指南含web前端零基础直至高级的学习视频教程，其中有120G干货被分享出来 。
说到作者，他曾经担任过研发工程师，还做过技术组长，后来又成为了教学总监；在2016年以及2020年的时候，他两次获得了CSDN年度十大博客之星。十年的寒冷冰块，都难以冷却他的热血；许多年过去了，经历了各种变化，人和事物都已经不同了。可是，他对于技术的探索以及追求从来都没有停止过。他坚持进行原创，热衷于分享，最初的心意没有改变，继承前人的事业，开辟未来！
@TOC
一、网站题目
大学生所进行的个人网页制作，是关于个人网页设计的，有着个人网站模板，属于简单静态HTML的个人网页作品 。
二、️网站描述
以DIV CSS布局制作的大学生静态HTML网页设计作品，其页面主体内容区域宽度设定为1200PX，网页整体借助CSS设置了网页背景图片，页面较为精美还呈现出多个排版布局，属于学生网页作业水平制作 。
一套优质的网页设计应该包含 (具体可根据个人要求而定)
屏幕画面被划分成了四大部分，其一是页头部分，其二是菜单导航栏部分，最好具备可下拉的特性，其三是中间内容板块部分，其四是页脚部分。所有的页面之间彼此相互超链接，能够直达三级页面，并且此页面集合由五到十个页面共同构成。页面的样式风格保持统一，布局呈现正常状态，不会出现错乱现象，采用的是Div+Css技术。菜单具备美观且醒目的特点，二级菜单能够正常弹出并且实现跳转。页面中需要拥有JS特效，像是呈现定时切换以及手动切换的图片轮播效果。页面里存在多媒体元素，例如gif动图、视频以及音乐，同时要运用表单技术。页面整体显得清爽、美观且大方，不存在雷同的情况。不但得能够将用户所要求的内容给呈现出来，而且还得满足布局优良，界面好看，配色雅致，表现形式丰富多样等要求 。 三、网站介绍。
在网站布局这块儿，计划采用当下主流的，那种可以兼容各大主流浏览器的，并且显示效果稳定的浮动网页布局结构 。
针对于网站程序这一方面，有着这样的计划，即采用当下最新的网页编程语言，也就是 HTML5 加上 CSS3 再加上 JS 程序语言，去达成网站的功能设计。并且还要保证网站代码能够兼容当前市面上所有的主流浏览器，以此来实现打开之后就能够立刻看到网站的效果。
关于网站素材这一块儿，打算通过收集各大平台较为具有趣味性的图片素材，从中进行细致入微的挑选，筛选出契合网页风格的图片呢，之后 utilize PS 来制作出符合网页尺寸要求的图片。
在网站文件这一方面，网站系统文件所涵盖的种类有，html网页结构的那种文件，css网页样式的那种文件，js网页特效的那种文件，images网页图片的那种文件 。
当涉及网页编辑时，网页作品的代码具备简单的特性，能够运用任意一款HTML编辑软件，像Dreamweaver，又或者HBuilder，亦或是Vscode，还有Sublime，以及Webstorm，甚至Text，包括Notepad++等任意一款html编辑软件来开展运行以及修改编辑等一系列操作。
其中：
包含html文件，其中首页是index.html，二级页面是其他html 。
css文件所涵盖的内容，是全部页面样式，还有文字滚动，以及图片放大等 。
（3）js文件涵盖。js拥有实现动态轮播特效，表单提交，点击事件等情况。存在个别网页之中运用js代码 。
四、网站演示
五、️ 网站代码 HTML结构代码
DOCTYPE html PUBLIC 破折号双斜杠W3C双斜杠DTD XHTML一点零 Transitional双斜杠EN ，。 网页链接，即“http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd” ，是个用于特定功能的标识 。>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" />
<title>我的主页title>
head>
<body>
<div class="nb_body">
<div class="nb_main">
<div class="header">
<div class="homeName">
<div class="myFamilyName"><i>孙杨的大学主页i>div>
<div class="myFamilyInfo">
<marquee behavior="scroll" direction="left" width="100%" scrollamount="2">
欢迎您来到我的小家，随便看看吧！
marquee>
div>
div>
div>
<div class="nb_are nb_nav">
<div class="nav2">
<ul>
<li class="small selected"><a href="index2.html">首页a>li>
<li><a href="mylog.html">我的日志a>li>
<li><a href="aboutMe.html">我的简历a>li>
<li><a href="myPhoto.html">我的相册a>li>
<li><a href="myVideo.html">我的视频a>li>
ul>
div>
div>
<div class="nb_are nb_smt">div>
<div class="nb_are nb_cnt">
<div class="mainLeft">
<div class="mainLeftTop">div>
<div class="mainLeftCenter">
<div class="left-title"><b>个人简介b>div>
<div class="left-photo"><img src="images/wo.jpg" />div>
<div class="left-name"><b>孙杨b>div>
<div class="left-info">
<ul>
<li>姓名：孙杨li>
<li>性别：男li>
<li>生日：1991年12月1日li>
<li>邮箱:<a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="将其改写为：f0，c1，c2，c3，c4，c5，c6，c7，c8，c9。">[email protected]a>
<script data-yjshash='f9e31' type="text/javascript">
/* */ ! function(t, e, r, n, c, a, p) {
try {
t = document.currentScript || function() {
for (t = document.getElementsByTagName('script'), e = t.length; e--;)
if (t[e].getAttribute('data-yjshash')) return t[e]
}();
if (t && (c = t.previousSibling)) {
p = t.parentNode;
if (a = c.getAttribute('data-yjsemail')) {
for (e = '', r = '0x' + a.substr(0, 2) | 0, n = 2; a.length - n; n += 2) e += '%' + ('0' + ('0x' + a.substr(n, 2) ^ r).toString(16)).slice(-2);
p.replaceChild(document.createTextNode(decodeURIComponent(e)), c)
}
p.removeChild(t)
}
} catch (u) {}
}() /* ]]> */
script>
li>
<li>血型：o型li>
<li>爱好：游泳 钓鱼 健身li>
ul>
div>
div>
div>
<div class="mainRight">
<div class="mainRightTop">div>
<div class="mainRightCenter">
<div class="Rtitle"><b>我的大学b>div>
<div class="Rrain">
<p>我的兴趣爱好十分宽泛，喜好出行游玩、聆听乐曲、进行棋类活动、参与各类体育运动 。是一名行事扎实、学习勤勉、怀有进取之心的学生 。p>
<p>念书于高中之际听闻，大学学生会乃是人才汇聚之所，于此处，于与学长、同学的交流当中，能够发觉自身存在的欠缺之处，进而予以修正，以便自身能够更为出色地给班级予以服务，为同学进行服务。我认为学生会之于我而言，亦是一回锤炼自身能力的机缘之举，亦是一方展现自身才华的表演平台。p>
<p>当我刚刚踏入大学之时，我便对自己提出了严格的要求，下定决心要在大学这一阶段的生活历程当中取得一定的成绩，并且要从各个不同的方面去让自己得到发展。p>
<p>我亦是个追求完美之人，我晓得世上不存在十全十美的人，然而我们能够去追求，不停地朝其靠近，每个人或多或少都存有缺点，我将这些缺点视作一个无形的洞，我们都清楚洞是能够填补的，恰似缺点也是能够改正的，这就要求我们如何把这个洞一点一点填上，也就是怎样一点一点完善自身。洞是无形的，如同人不会十全十美，我们或许永远填不满这洞，就像人不会十全十美，同样如学习，学习是没有止境的。因而，我得持续地去填补漏洞情况，持续地展开学习行为，持续地达成自我完善状态。故而，我挑选了我进行追寻探求的事物，追寻探求了我所做出挑选抉择的内容 。——入学生会。p>
<p>若我有这般幸运能够获得到你们的认可，那我会竭尽全力去把上级所分派给我的任务给办好，不会辜负学长们对我的那种期望，就借此事当作全新的起点，为文艺部去贡献出属于自己的一分力量 。p>
<p>虽说自身命运是由自己把控着的，然而有时候付出了却并非一定就会有相应的回报，要是我没能被选上，那也不会因此就灰心丧气，我会下去对经验教训进行总结，去弥补存在的不足之处。p>
div>
div>
div>
<div class="clearfix">div>
div>
<div class="nb_are nb_fot">
<div class="copyRight">
体育系 游泳专业 孙杨 版权所有© 2014
div>
div>
div>
div>
div>
body>
html>
CSS样式代码
@charset "gb2312";
/* CSS Document */
body {
background: #deceb0;
padding: 0px;
margin: 0px;
font-size: 12px
}
ul,
li,
img {
margin: 0px;
padding: 0px;
border: 0px;
list-style: none
}
.clearfix {
clear: both
}
.nb_body {
background: url(../images/topbg_1.jpg) #deceb0 repeat-x left -24px;
height: 270px
}
.nb_main {
width: 1004px;
height: auto;
margin: 0px auto;
position: relative;
}
.header {
width: 1004px;
height: 212px;
position: relative
}
.homeName {
margin: 0px auto;
color: #8a703e;
height: 212px;
background-image: url(../images/headbgn.jpg);
height: 212px;
}
.myFamilyName {
width: 460px;
height: 60px;
line-height: 60px;
color: #8a703e;
font-size: 28px;
position: absolute;
left: 500px;
top: 52px;
font-weight: bold;
}
.myFamilyName i {
font-style: normal;
}
.myFamilyInfo {
width: 280px;
height: 30px;
line-height: 30px;
position: absolute;
right: 0px;
top: 92px;
font-size: 14px;
}
.nb_nav {
background: url(../images/nav_bg.jpg) no-repeat center top;
height: 32px;
}
.nb_nav .nav2 {
margin-left: 391px;
height: 32px;
line-height: 32px;
}
}
.myPhotoS a:hover {
text-decoration: underline
}
.myPhotoS-list {
width: 660px;
margin: 50px auto;
}
.myPhotoS-list ul {
width: 660px
}
.myPhotoS-list ul li {
width: 220px;
text-align: center;
float: left
}
.myPhotoS-list img {
width: 200px;
min-height: 150px;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
background-clip: border-box
}
.myPhotoS-show {
width: 660px;
margin: 20px auto
}
.myPhotoS-show .img {
width: 660px;
overflow: hidden;
text-align: center
}
.img img {
width: 660px
}
.myPhotoS-show .pages {
width: 150px;
margin: 20px auto
}
六、 如何让学习不再盲目
许许多多刚踏入编程领域的新手小白虽学习了基础语法，然而却不清楚该语法用途怎样，不晓得要怎样去加深印象，亦不明白该如何提升自身，在这种时候每天自行去刷一些题目就显得极为重要（百炼成神），能够前往牛客网上的编程初学者入门训练。该专题处于编程入门等级，适宜刚学完语法的小白来练习，题目涵盖编程基础语法、基本结构等等，每一道题都带有练习模式以及考试模式，既能够还原考试模式去进行模拟，又能够借助练习模式来开展练习 。
