387.大学生HTML期末大作业 —【瀑布流漫画风格个人主页(1页)】 Web前端网页制作 html5+css3+js
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3+js，瀑布流式布局，适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含1个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑夜主权(Night)</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-app-capable" content="yes">
<meta name="apple-mobile-app-status-bar-style" content="black">
<meta name="description" content="一只叫做黑夜的阿宅，想成为家喻户晓的大侠">
<meta name="keywords" content="二次元，宅属性，前端，编程，全栈，绘画，设计">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="cononico">
<meta name="application-name" content="Cononico">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/process.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<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">主页</li>
<li class="nav_ul_li">技能</li>
<li class="nav_ul_li">经历</li>
<li class="nav_ul_li">爱好</li>
<li class="nav_ul_li">联系</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>
...
2.CSS
代码如下（节选示例）：
/* reset */
* {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Microsoft Yahei', '宋体', arial, 'Hiragino Sans GB', Helvetica;
}
label {
cursor: pointer;
}
img {
vertical-align: middle;
}
table {
empty-cells: show;
border-collapse: collapse;
border-spacing: 0;
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var,
optgroup {
font-style: normal;
font-weight: normal;
}
input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
input,
button,
textarea,
select {
*font-size: 100%;
}
a,
img {
border: 0;
}
a,
a:visited,
a:hover {
color: #5e5e5e;
text-decoration: none;
}
.clear {
clear: both;
}
/*main*/
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;
}
...
3.JS
代码如下（节选示例）：
(function() {
var h = window.innerHeight;
var w = window.innerWidth;
var bg = document.getElementsByClassName("box_bg");
if ((w / h) >= (1920 / 1080)) {
for (var i = 0; i < bg.length; i++) {
bg[i].style.width = w + 'px';
bg[i].style.height = w * (1080 / 1920) + 'px';
bg[i].style.top = -(w * (1080 / 1920) - h) / 2 + 'px';
bg[i].style.left = '0';
}
} else {
for (var i = 0; i < bg.length; i++) {
bg[i].style.height = h + 'px';
bg[i].style.width = h * (1920 / 1080) + 'px';
bg[i].style.left = -(h * (1920 / 1080) - w) / 2 + 'px';
bg[i].style.top = '0';
}
}
var box01_index = 0;
var box01_p = document.getElementById('box01_text').children;
function boxOne() {
if (box01_index >= 0 && box01_index <= 2) {
box01_p[box01_index].style.opacity = '1';
box01_index++;
} else {
clearInterval(boxOneTimer);
}
}
var x_arr = new Array();
var y_arr = new Array();
var x = y = m = 0;
for (var i = 0; i < 800; i++) {
if (i >= 400) {
x = m;
y = 200 + Math.sqrt(40000 - Math.pow(x - 200, 2));
m--;
} else {
x = m;
y = 200 - Math.sqrt(40000 - Math.pow(x - 200, 2));
m++;
}
x_arr[i] = x - 60;
y_arr[i] = parseInt(y) - 25;
}
/*
*原型轨迹
*/
var gitMove = document.getElementById('github_a');
var weiboMove = document.getElementById('weibo_a')
var blogMove = document.getElementById('blog_a')
var g_num = 0;
var w_num = 0;
var b_num = 0;
function movegit() {
if (g_num <= 750) {
// gitMove.css({"left":x_arr[g_num] + "px","top":y_arr[g_num]+"px"});
gitMove.style.left = x_arr[g_num] + 'px';
gitMove.style.top = y_arr[g_num] + 'px';
g_num += 3;
} else {
clearInterval(gitTimer);
}
}
function moveweibo() {
if (w_num <= 400) {
// weiboMove.css({"left":x_arr[w_num]+"px","top":y_arr[w_num]});
weiboMove.style.left = x_arr[w_num] + 'px';
weiboMove.style.top = y_arr[w_num] + 'px';
w_num += 3;
} else {
clearInterval(weiTimer);
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、网页简介
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
7
0- 0
已为社区贡献4条内容
所有评论(0)