845. 大学生HTML期末大作业 ―【中国风个人博客主页(1页)】 Web前端网页制作 html5+css3+js - 指南

一、网页概述

二、网页文件

三、网页效果

四、代码展示

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生献出各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能达成自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css3+js，div+css布局，代码简单；本网页支持如Dreamweaver、HBuilder、Text 、Vscode等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含1个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>花气袭人是酒香</title>
<meta name="Keywords" content="" >
<meta name="Description" content="" >
<link href="css/index.css" rel="stylesheet">

</head>
<body>
<header>
<h1><a href="/">花气袭人是酒香</a></h1>
停不住的舞步和唱不完的情歌，当玫瑰花瓣飘飞的那一刻，风会带走所有的想念.......</p>就是<p>这夏天里流动的风情，
</header>
<div class="navswf">
<object id="customMenu" data="images/nav.swf" width="528" height="70" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="always"><param name="allownetworking" value="all"><param name="allowFullScreen" value="true"><param name="wmode" value="transparent"><param name="menu" value="false"><param name="scale" value="noScale"><param name="salign" value="1">
</object>
<div id="nav">
<ul>
<li><a href="/" >网站首页</a></li>
<li><a href="/news/" target="_blank" title="慢生活">慢生活</a></li>
<li><a href="/jstt/" target="_blank" title="技术探讨">技术探讨</a></li>
<li><a href="/download/" target="_blank" title="个人网站模板">网站模板</a></li>
<li><a href="/newstalk/" target="_blank" title="碎言碎语">碎言碎语</a></li>
<li><a href="/e/tool/gbook/?bid=1" target="_blank" title="留言版">留言版</a></li>
</ul>
<script src="js/silder.js"></script>
</div>
</div>
<div class="blank"></div>
<article>
<div class="content">
<div class="bloglist">

<ul>
<h2><a title="Web之路，经历了心酸之后" href="/" target="_blank">Web之路，经历了心酸之后</a></h2>
<p>清理电脑里的时候，看到以前专业课的作业。看修改日期最早的一个压缩包还是06年的，7年的时间就这样过去了，这3年的学习成果就是这电脑里面的7个压缩包。</p>
那个你一天骂他八遍却不许别人骂一遍的地方”当听到不少学弟学妹在抱怨学校差的时候，至今我也没后悔过，因为我经历了我认为最苦的那一段时期。</p>就是<p>“什么是母校？母校就
<figure><img src="images/02.jpg"></figure>
<p class="dateview"><span>2025-05-11</span><span>作者：杨青</span><span>分类：<a href="/" target="_blank">心得笔记</a></span><span>阅读(229)</span><span>评论(124)</span></p>
</ul>


<ul>
<h2><a title="Web之路，经历了心酸之后" href="/" target="_blank">Web之路，经历了心酸之后</a></h2>
<p>清理电脑里的时候，看到以前专业课的作业。看修改日期最早的一个压缩包还是06年的，7年的时间就这样过去了，这3年的学习成果就是这电脑里面的7个压缩包。</p>
<p>“什么是母校？母校就是那个你一天骂他八遍却不许别人骂一遍的地方”当听到不少学弟学妹在抱怨学校差的时候，至今我也没后悔过，源于我经历了我认为最苦的那一段时期。</p>
<figure><img src="images/03.jpg"></figure>
<p class="dateview"><span>2025-05-11</span><span>作者：杨青</span><span>分类：<a href="/" target="_blank">心得笔记</a></span><span>阅读(229)</span><span>评论(124)</span></p>
</ul>

</div>
</div>
<aside class="navsidebar">
<h2><p>个人档案</p></h2>
<div class="vcard">
<p class="fn">姓名：杨青</p>
<p class="nickname">网名：DanceSmile | 即步非烟</p>
<p class="url">主页：<a href="http//www.yangqq.com" target="_blank">www.yangqq.com</a></p>
<p class="address">现居：天津市—滨海新区</p>
<p class="role">职业：网站设计、网站制作</p>
</div>
<h2><p>博客分类</p></h2>
<ul class="news">
<li><a href="/">慢生活(3)</a></li>
<li><a href="/">程序人生(25)</a></li>
<li><a href="/">经典美文(39)</a></li>
</ul>
<h2><p>近期文章</p></h2>
<ul class="news">
<li><a href="/">女孩都有浪漫的小情怀</a></li>
<li><a href="/">也许下个路口就会遇见希望</a></li>
<li><a href="/">6月毕业季，祝福送给你</a></li>
<li><a href="/">生活常有缺席的-可搞笑从来不缺席</a></li>
<li><a href="/">为了一个不存在的梦，执念了那么多年</a></li>
<li><a href="/">妹妹，明天你就要嫁人啦</a></li>
</ul>
<h2><p>文章归档</p></h2>
<ul class="news">
<li><a href="/">2008 年三月</a></li>
<li><a href="/">2008 年四月</a></li>
<li><a href="/">2008 年六月</a></li>
</ul>
<h2><p>友情链接</p></h2>
<ul class="news">
<li><a href="http//www.yangqq.com">杨青个人博客</a></li>
</ul>
</aside>
</article>
<div id="copright">Design by <a href="http//www.yangqq.com" target="_blank">DanceSmile</a></div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "gb2312";
/* CSS Document */
body,ul,div,img,h5,h4,h3,h2,h1,p,span,table,figure,i,li{ margin:0; padding:0}
a:link, a:visited {text-decoration: none; }
a{-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
img{ border:0}
body{font-size:12px;background:#E8DFD8 url(../images/top.jpg) 50% top scroll no-repeat;color:#5d5d5d; }
.blank{ height:5px; overflow:hidden; width:100%; margin:auto; clear:both}
article{width:1030px;margin:0 auto; overflow:auto;background:url(../images/sidebg.png) 630px bottom no-repeat }
header{ padding:40px 0; width:1000px; margin:auto; }
header h1{ font-size:22px; text-shadow:#fff 1px 1px 1px; }
header h1 a{color:#000;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
header h1 a:hover{ padding-left:20px}
header p{margin:17px 0 0 0;text-shadow:#000 1px 1px 1px;color:#fff}
.navswf{ position:relative; width:1000px; margin:auto}
#nav{
width: 873px;
line-height: 40px;
height: 40px;
margin: auto;
position: absolute;
left: 62px;
top: 30px;
}/* nav圆角背景 rgba 透明度0.2 */
#nav ul{ list-style:none; margin:auto; width:1030px}
#nav ul li{ float:left; width:80px; text-align:center;text-shadow:#333 1px 1px 1px}
#nav ul li a{ display:block; color:#FFF; }/* 背景颜色过渡效果 */
#nav ul li a:hover{ color: #FFF; font-weight:bold;}
#nav ul li a#nav_current {color: #FFF; font-weight:bold; border-radius:50px 0} /* nav高亮表明背景颜色 */
.content{ width:745px; float:left; }/* left form */
/* bloglist index */
.bloglist{ width:99%; margin:20px 5px 20px 5px;clear:both; overflow:hidden; }
.bloglist h2{ background: url(../images/blogbgs.png) no-repeat right; line-height:29px; height:29px; font-size:14px; color:#3b3b3b; padding:10px 0 10px 20px;}
.bloglist h2 a{color: #333; display:block;}
.bloglist h2 a:hover{cursor:pointer; text-shadow:#fff 1px 1px 1px;padding-left:20px}
.bloglist ul{ line-height:24px; padding:10px; margin-bottom:10px; background:rgba(255,255,255,0.5); border-radius:10px}
.bloglist ul p{ text-indent:2em}
.bloglist figure{ text-align:center}
.dateview{ border:#ccc 1px dashed; line-height:24px; height:24px; color:#666; margin:0 10px}
.dateview a{color:#838383;}
.dateview a:hover{ color:#333;}
.dateview span{ margin:0 10px}
/* Side Right */
aside{ width:276px; float:right; overflow:hidden; }
.vcard{ margin:10px 0; padding:10px} /* 个人简介 google vcard */
.vcard p{ line-height:25px}
.vcard p a{ color:#099;text-decoration:underline}
aside h2{ border-bottom:#FFF 1px solid; width:100%;overflow:hidden; font-size:14px; margin:10px 0; font-family:"微软雅黑"}
aside h2 p{ background:#333; width:180px; height:25px; margin:15px 0 0 10px; line-height:25px; height:25px; color:#fff; text-align:center; box-shadow: #999 4px 5px 1px;}
.news{ padding:10px; list-style:none;}
.news li{ overflow: hidden;white-space: nowrap;text-overflow: ellipsis; background:url(../images/list.gif) left no-repeat; padding-left:20px}
.news li a{ color: #666;display:block;line-height:22px; height:22px}
.news li a:hover{color:#000; padding-left:20px; }
/* footer */
#copright{ line-height:40px; height:40px; text-align:center; width:100%;color:#fff; font-family:'Arizonia', cursive; font-size:20px; text-shadow:#000 1px 1px 1px}
#copright a{color:#fff}

...

3.JS

代码如下（节选示例）：

var obj=null;
var As=document.getElementById('nav').getElementsByTagName('a');
obj = As[0];
for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)
obj=As[i];}
obj.id='nav_current'

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:

大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有兴趣的添加以下微信交流

发表于 2025-11-15 08:13 jzssuanfa 阅读(22) 评论(0) 收藏举报

刷新页面返回顶部