目录
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css，div+css布局，代码简单，适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含9个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>主页</title>
<link rel="stylesheet" href="./css/header_config.css"/>
<link rel="stylesheet" href="css/config.css"/>
<link rel="stylesheet" href="css/main_config.css"/>
<link rel="stylesheet" href="./css/footer_config.css"/>
<!--樱花特效在线引入-->
</head>
<body style="background-image: url(img/bg/bk.png);">
<header class="site_header">
<figure class="centerbg" style="background-image: url(./img/00.jpg);height: 1080px;">
<div class="header_info">
<h1 class="header_info_title">
Hi, Althumi
</h1>
<div class="header_info_content">
<p>
<i class="fa fa-quote-left"></i>
You got to put the past behind you before you can move on.
<i class="fa fa-quote-right"></i>
</p>
<div class="shar_list">
<li id="bg_pre">
<img class="flipx" src="./img/01.jpg" style="transform: rotate(180deg);">
</li>
<li id="qq">
<img class="qq" src="./img/02.jpg">
</li>
<li id="github">
<img class="github" src="./img/03.jpg">
</li>
<li id="bilibili">
<img class="bilibili" src="./img/04.jpg">
</li>
<li id="wangyiyun">
<img class="wangyiyun" src="./img/05.jpg">
</li>
<li id="jianshu">
<img class="jianshu" src="./img/06.jpg">
</li>
<li id="zhihu">
<img class="zhihu" src="./img/01.jpg">
</li>
<li id="csdn">
<img class="csdn" src="./img/02.jpg">
</li>
<li id="bg-next">
<img src="./img/03.jpg">
</li>
</div>
</div>
</div>
</figure>
<div class="headertop-down">
<span><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
</div>
</header>
<div class="main">
<header class="main_header">
<div class="site_top">
<div class="site_branding">
<h1><a href="#" target="_self">たかぎ</a></h1>
</div>
<div class="user_head_photo">
<img src="img/01.jpg" width="30px" height="30px"/>
<div class="user_head_photo_menu">
<div class="user_head_photo_menu_name">
Althumi
</div>
</div>
</div>
<div class="searchbox">
<i class="fa fa-search fa-2x" aria-hidden="true" style="font-size: 26px"></i>
</div>
<div class="top_nav">
<div class="lower">
<nav class="navbar" style="display: block !important;">
<ul>
<li>
<a href="./index.html" target="_self">
<i class="fa fa-fort-awesome"></i>首页
</a>
</li>
<li>
<a href="./file.html" target="_self">
<i class="fa fa-archive faa-shake" aria-hidden="true"></i>归档
</a>
</li>
<li>
<a href="./detailed_list.html" target="_self">
<i class="fa fa-list-ul faa-vertical" aria-hidden="true"></i>清单
</a>
</li>
<li>
<a href="./mood.html" target="_self">
<i class="fa fa-calendar-o faa-tada" aria-hidden="true"></i>心情
</a>
</li>
<li>
<a href="./gallery.html" target="_self">
<i class="fa fa-camera faa-flash" aria-hidden="true"></i> 画廊
</a>
</li>
<li>
<a href="./Message_Board.html" target="_self">
<i class="fa fa-pencil-square-o faa-tada" aria-hidden="true"></i>留言板
</a>
</li>
<li>
<a href="./Friends_account.html" target="_self">
<i class="fa fa-link faa-shake" aria-hidden="true"></i>友人帐
</a>
</li>
<li>
<a href="./reward.html" target="_self">
<i class="fa fa-heart faa-pulse" aria-hidden="true"></i>赞赏
</a>
</li>
<li>
<a href="./about.html" target="_self">
<i class="fa fa-leaf faa-wrench" aria-hidden="true"></i>关于
</a>
</li>
<li>
<a href="#" target="_self">
<i class="fa fa-magic" aria-hidden="true" οnclick="window.alert('未开发，敬请期待')"></i>实验室
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="main_content" style="background-color: rgba(255, 255, 255, 0.8);">
<div class="notice" style="margin-top: 20px;">
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<div class="notice-content">一盏灯，一台电脑，一个人，一个传奇！</div>
</div>
<div class="top_feature">
<h1 class="tf_title" style="font-family: 'Ubuntu', sans-serif;">
<i class="fa fa-anchor" aria-hidden="true"></i>
<span> START:DASH!!</span>
</h1>
<div class="tf_content">
<a href="#" target="_blank">
<div class="img">
<img src="img/02.jpg"/>
</div>
<div class="info">
<h3>
【大作业日志】
</h3>
<p>
入坑前端就在今天这一天！
</p>
</div>
</a>
</div>
<div class="tf_content">
<a href="#" target="_blank">
<div class="img">
<img src="./img/03.jpg" width="256px" height="160px" />
</div>
<div class="info">
<h3>
【ICPC】拿牌最重要！
</h3>
<p>
每天学习算法3小时，一年拿铜，两年拿银
</p>
</div>
</a>
</div>
...
2.CSS
代码如下（节选示例）：
*{
margin: 0;
padding: 0;
}
body {
cursor: url(../img/01.jpg),auto;
font: 300 17px;
text-shadow: 0 0 1px rgb(0 0 0 / 10%);
font-size: 15px;
line-height: 1.5;
}
a{
cursor: url(../img/02.jpg),auto;
background-color: transparent;
text-decoration: none;
}
a:link{
color:black;
}
a:visited{
color:black;
}
a:hover{
color: darkorange;
}
a:active{
color: darkorange;
}
img{
height: auto;
max-width: 100%;
}
h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
cursor: url(../img/03.jpg),auto;
}
:after, :before {
box-sizing: inherit;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
2738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
