849. 大学生HTML期末大作业 ―【橙色的个人博客网页首页(1页)】 Web前端网页制作 html5+css3+js
目录
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css+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="杨青个人博客网站,杨青网站，杨青博客,个人博客,原创博客,个人博客网站,独立个人博客模板下载,个人网站博客设计,html5 个人博客网站" >
<meta name="Description" content="个人原创博客，提供本站博客div+css源码分享，喜欢的朋友可以直接下载。如果需要整站asp代码，请到留言版留下你的邮箱..." >
<link href="css/index.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
<link href='http//fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1><a href="/">陌上花开淡香随</a></h1>
<p>如果没有为陌上悄然伫立并为陌上风情所陶醉的人，那么花开也寂寞,风情也苍白...</p>
</header>
<!--nav begin-->
<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="/newstalk/" target="_blank" title="碎言碎语">碎言碎语</a></li>
<li><a href="/e/tool/gbook/?bid=1" target="_blank" title="留言版">留言版</a></li>
</ul
></div>
</div>
<!--nav end-->
<div class="blank"></div>
<article>
<div class="picshow">
<div class="ac01"><img src="images/ac01.jpg">
<p class="ac01_text"><a href="/">Nature</a></p>
</div>
<div class="ac02"><img src="images/ac02.jpg">
<p class="ac02_text"><a href="/">Fashion</a></p>
</div>
<div class="ac03"><img src="images/ac03.jpg">
<p class="ac03_text"><a href="/">Sport</a></p>
</div>
</div>
<aside>
<object id="dditem_0.4427833401132375" data="images/time.swf" width="178" height="205" 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="flashVars" value="uin=476847113&loginUin=476847113"><param name="salign" value="1"></object>
<h2>博客分类</h2>
<ul>
<li><a href="/">慢生活(3)</a></li>
<li><a href="/">程序人生(25)</a></li>
<li><a href="/">经典美文(39)</a></li>
</ul>
<!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare share">
<a class="bds_tsina"></a>
<a class="bds_qzone"></a>
<a class="bds_tqq"></a>
<a class="bds_renren"></a>
<span class="bds_more"></span>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=6574585" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http//bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button END -->
</aside>
</article>
<div class="blank"></div>
<div id="copright">Design by DanceSmile</div>
<script src="js/silder.js"></script>
</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; }
img{ border:0}
body{font-size:12px;background:#E66552 url(../images/90304_top.jpg) 50% -60px scroll no-repeat; }
.blank{ height:5px; overflow:hidden; width:100%; margin:auto; clear:both}
header{ padding:50px 0 30px 0; width:1000px; margin:auto; }
header h1{ font-size:22px; font-weight:normal;text-shadow:#000 1px 1px 1px;}
header h1 a{color:#fff}
header h1 a:hover{ text-decoration:underline}
header p{margin:17px 0 0 0;text-shadow:#000 1px 1px 1px;color:#fff}
.navswf{ position:relative; width:1000px; margin:auto;}
#nav{
width: 100%;
line-height: 40px;
height: 40px;
margin: auto;
position: absolute;
left: 0px;
top: 15px;
}/* nav圆角背景 */
#nav ul{ list-style:none; margin:auto; width:1030px}
#nav ul li{ float:left; width:90px; text-align:center;text-shadow:#333 1px 1px 1px}
#nav ul li a{ display:block; color:#FFF; cursor:pointer; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}/* 背景颜色过渡效果 */
#nav ul li a:hover{ background:#EAD204; color: #FFF; font-weight:bold; border-radius:40px 0}
#nav ul li a#nav_current {font-weight:bold;background:#EAD204; border-radius:40px 0}
/* bloglist index */
article{width:1000px; margin:auto; overflow:hidden; }
/*content*/
.picshow{width:760px; float:left;}
.picshow img{-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;opacity:0.8; width:220px;}
.picshow img:hover{opacity:1;}
.ac01,.ac02,.ac03{ position:relative; float:left}
.ac01{z-index:1}
.ac02{z-index:0}
.ac01_text a,.ac02_text a,.ac03_text a{ color:#FFF}
.ac01_text{ position: absolute; line-height: 84px; width: 200px; height: 85px; left: 160px; top: 0px; background: #5DC0CC; text-align: center; font-family: 'Titillium Web', sans-serif;font-size: 30px }
.ac02 img{ margin:100px 0 0 20px;}
.ac02_text{position: absolute;line-height: 84px;width: 200px;height: 85px;right: 150px;top: 573px;background: #DD0076;text-align: center;font-family: 'Titillium Web', sans-serif;font-size: 30px}
.ac03 img{ margin:0 0 0 20px;}
.ac03_text{ background:#DBD700;position: absolute;text-align: center;font-family: 'Titillium Web', sans-serif;font-size: 30px;width: 200px;height: 85px;line-height: 85px;left:100px; top:240px}
aside{ float:right; width:220px; overflow: hidden;}
aside h2{ font-size:14px; margin:10px 0;color:#fff; }
.share{ margin:10px 0; }
aside ul{ padding:10px 0; list-style:none}
aside ul li{ line-height:22px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
aside ul li a{ color: #fff; text-shadow:#000 1px 1px 1px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
aside ul li a:hover{ padding-left:15px }
/* footer */
#copright{line-height:50px; height:50px; text-align:center; width:100%;color:#fff;text-shadow:#000 1px 1px 1px;}
...
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前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有兴趣的添加以下微信交流👇🏻👇🏻👇🏻
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
13
0- 0
已为社区贡献2条内容
所有评论(0)