847. 大学生HTML期末大作业 ―【个人博客响应式自适应网页(5页)】 Web前端网页制作 html5+css3+js

蜡笔小仙女

990人浏览 · 2025-10-14 23:49:57

蜡笔小仙女 · 2025-10-14 23:49:57 发布

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css3+js，响应式自适应网页，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含5个页面：

三、网页效果

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

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>黑色Html5响应式个人博客模板——主题《如影随形》</title>
<meta name="keywords" content="个人博客模板,博客模板,响应式" />
<meta name="description" content="如影随形主题的个人博客模板，神秘、俏皮。" />
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/media.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

</head>
<body>
<div class="ibody">
<header>
<h1>如影随形</h1>
<h2>影子是一个会撒谎的精灵，它在虚空中流浪和等待被发现之间;在存在与不存在之间....</h2>
<div class="logo"><a href="/"></a></div>
<nav id="topnav"><a href="index.html">首页</a><a href="about.html">关于我</a><a href="newlist.html">慢生活</a><a href="share.html">模板分享</a><a href="new.html">模板主题</a></nav>
</header>
<article>
<div class="banner">
<ul class="texts">
<p>The best life is use of willing attitude, a happy-go-lucky life. </p>
<p>最好的生活是用心甘情愿的态度，过随遇而安的生活。</p>
</ul>
</div>
<div class="bloglist">
<h2>
<p><span>推荐</span>文章</p>
</h2>
<div class="blogs">
<h3><a href="/">犯错了怎么办？</a></h3>
<figure><img src="images/01.jpg" ></figure>
<ul>
<p>看到昔日好友发了一篇日志《咎由自取》他说他是一个悲观者，感觉社会抛弃了他，脾气、性格在6年的时间里变化很大，很难适应这个社会。人生其实就是不断犯错的过程，在这个过程中不断的犯错，不断的吸取教训，不断的成长。也许日子里的惊涛骇浪，不过是人生中的水花摇晃，别用显微镜放大你的悲伤。</p>
<a href="/" target="_blank" class="readmore">阅读全文>></a>
</ul>
<p class="autor"><span>作者：杨青</span><span>分类：【<a href="/">日记</a>】</span><span>浏览（<a href="/">459</a>）</span><span>评论（<a href="/">30</a>）</span></p>
<div class="dateview">2014-04-08</div>
</div>
<div class="blogs">
<h3><a href="/">个人博客模板（2014草根寻梦）</a></h3>
<figure><img src="images/02.jpg" ></figure>
<ul>
<p>2014第一版《草根寻梦》个人博客模板简单、优雅、稳重、大气、低调。专为年轻有志向却又低调的草根站长设计。模板采用html5+css3设计，nav导航实现鼠标悬停渐变显示英文标题的效果。banner部分，选择大图作为背景，利用css3中animation属性结合文字图片实现文字从左到右的渐变效果</p>
<a href="/" target="_blank" class="readmore">阅读全文>></a>
</ul>
<p class="autor"><span>作者：杨青</span><span>分类：【<a href="/">个人博客模板</a>】</span><span>浏览（<a href="/">459</a>）</span><span>评论（<a href="/">30</a>）</span></p>
<div class="dateview">2014-02-19</div>
</div>
<div class="blogs">
<h3><a href="/">我的个人博客之——阿里云空间选择</a></h3>
<figure><img src="images/03.png" ></figure>
<ul>
<p>之前服务器放在电信机房，联通用户访问速度很不稳定，经常出现访问速度慢的问题，换到阿里云解决了之前的问题。很多人都问我的博客选得什么空间，一年的费用得多少钱，今天我列个表出来，供大家参考。</p>
<a href="/" target="_blank" class="readmore">阅读全文>></a>
</ul>
<p class="autor"><span>作者：杨青</span><span>分类：【<a href="/">网站建设</a>】</span><span>浏览（<a href="/">459</a>）</span><span>评论（<a href="/">30</a>）</span></p>
<div class="dateview">2014-01-18</div>
</div>
<div class="blogs">
<h3><a href="/">从摄影作品中获取网页颜色搭配技巧</a></h3>
<figure><img src="images/04.jpg" ></figure>
<ul>
<p>作为一个优秀、专业的网页设计师，首先要了解各种颜色的象征，以及不同类型网站常用的色彩搭配。色彩搭配看似复杂,但并不神秘。一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。</p>
<a href="/" target="_blank" class="readmore">阅读全文>></a>
</ul>
<p class="autor"><span>作者：杨青</span><span>分类：【<a href="/">心得笔记</a>】</span><span>浏览（<a href="/">459</a>）</span><span>评论（<a href="/">30</a>）</span></p>
<div class="dateview">2014-01-09</div>
</div>
<div class="blogs">
<h3><a href="/">css3制作的一个魔方</a></h3>
<figure><img src="images/04.png" ></figure>
<ul>
本应用由CSS3代码实现，无图片和flash，请使用Chrome等webkit内核浏览器或Firefox打开。破解攻略和大家分享下：首先，破解魔方，我们就要先了解它的结构，魔方共6色6面，每面又分为中央块（最中间的块6个）、角块（4角的块8个）和边块（4条边中间的块12个）...
</p>
<a href="/" target="_blank" class="readmore">阅读全文>></a>
</ul>
<p class="autor"><span>作者：杨青</span><span>分类：【<a href="/">css3</a>】</span><span>浏览（<a href="/">459</a>）</span><span>评论（<a href="/">30</a>）</span></p>
<div class="dateview">2013-09-05</div>
</div>
</div>
</article>
<aside>
<div class="avatar"><a href="about.html"><span>关于杨青</span></a></div>
<div class="topspaceinfo">
<h1>执子之手，与子偕老</h1>
<p>于千万人之中，我遇见了我所遇见的人....</p>
</div>
<div class="about_c">
<p>网名：DanceSmile | 即步非烟</p>
<p>职业：Web前端设计师、网页设计 </p>
<p>籍贯：xxx市</p>
<p>电话：1360000000</p>
<p>邮箱：xxxxxx@qq.com</p>
</div>

...

2.CSS

代码如下（节选示例）：

@charset "gb2312";
/* 共用css */
* { margin: 0; padding: 0 }
body { font: 12px "宋体", Arial, Helvetica, sans-serif; background: #f5f5f5 }
img { border: 0; display: block }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
a { outline: none; }
a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
.clear { clear: both; }
.blank { height: 5px; overflow: hidden; width: 100%; margin: auto; clear: both }
/* 头部信息 */
.ibody { background: url(../images/bg.png) repeat-y; width: 1000px; margin: auto; box-shadow: -2px -1px 5px #666; }
header { position: relative; background: url(../images/ibodybg.png) top right no-repeat }
header h1 { padding: 15px 0 0 80px; font-size: 22px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; }
header h2 { margin: 20px 80px; color: #8e8d8d }
/* logo */
.logo { background: url(../images/logo.png) no-repeat #000 center; width: 145px; height: 145px; border-radius: 50%; position: absolute; left: -72px; top: 40px; box-shadow: 0px 2px 2px #414141; }
.logo:hover { background: url(../images/home.png) no-repeat #000 center; }
.logo a { width: 100%; height: 100%; display: block }
/* 导航 */
nav { background: rgba(0,0,0,0.8); height: 48px; line-height: 48px; padding-left: 80px; filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #3333333, endColorstr = #3333333);
}/* 兼容IE6 透明 */
nav a { display: inline-block; font-size: 18px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; color: #FFF; padding: 0 20px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
nav a:hover { background: #e41635; }
#topnav_current { background: #e41635 }/* 高亮选中颜色 */
article { width: 73%; float: left; background: url(../images/ibodybg.png) 560px -147px no-repeat; }/* 左侧栏 */
aside { width: 27%; background: url(../images/ibodybg.png) -170px -147px no-repeat #000; float: right; }/* 右侧栏 */
/* 版权信息 */
.copyright { background: #0d0d0d; border-radius: 50%; text-align: center; color: #d8d8d8; padding: 20px; margin: 60px 20px 0 20px; border: #1b1a1a 1px solid; }
.copyright p { line-height: 26px; text-shadow: #000 1px 1px 1px }
.copyright p a { color: #d8d8d8; }

...

3.JS

代码如下（节选示例）：

/*导航当前页高亮*/
var obj=null;
var As=document.getElementById('topnav').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='topnav_current'

/*百度分享广告*/
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http//bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

...

五、总结

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

1.简洁实用

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

2.使用方便

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

3.整体性好

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

4.形象突出

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

5.交互式强

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

六、更多推荐

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

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

仙女网页设计-CSDN博客

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

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

码道开发者社区

码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践

更多推荐

AI 已经能直接改设计稿了:Windows部署Penpot，接入Codex MCP实测

码道开发者社区

【AI 业务流架构师】AI 业务流架构师方法论：Agentic AI 范式转移与业务编排思维

2026 年，Anthropic CEO Dario Amodei 在 Code with Claude 大会上的一个判断广为流传：一个人运营一家十亿美元级公司的概率是 70%–80%。这句话听起来像科幻小说的设定，但它背后是一个正在发生的结构性变化——AI 把"执行"的成本压到了历史低点，同时把"编排"的价值推到了前台。这意味着我们需要一套新的思考框架，来回答两个问题：一个人如何拥有一个公司的产