目录
欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这么好的知识学习、技术交流的平台,让我们在这里相遇,小伙伴们,来吧,让我们一起开启Web前端网页制作的奇妙之旅!
说起Web前端,大学开启这扇技术之门以来,一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来,才真正开启了这段奇妙的旅行!在一次次需求分析、成品交付和客户服务的过程中,进行了一次又一次的知识应用的实践和验证。学以致用,实践出真知!从最初的Web前端的迷途小书童到如今的技术专家,多年的服务客户和服务大学生的实践经验,早就驾轻就熟!
奇妙之处在于:当你得到客户的认可、公司的赞赏和同事的敬仰,尤其是业余时间为广大的大学生提供各种各样的帮助和指引,学弟学妹们一致好评,认为学姐是他们的榜样的时候,你会发现,知识的应用除了体现自身价值,还能实现自我满足!这种感觉是相当奇妙的!
我在CSDN的奇妙旅行,除了学习其他知识和持续发布优质的网页实例之外,后续时间允许的情况下,我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括:Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询,以及其他有偿或无偿的服务。如有需要,欢迎随时咨询!能满足你们所需,是我的荣幸!
非常感谢大家的关注和点赞,你们的关注和点赞是我持续创作的动力,谢谢!
一、网页概述
本实例应用html+css,div+css布局,代码精简,适用于大学生网页课程作业设计;本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改;支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含5个页面:
三、网页效果
以下是本篇文章正文内容,下面案例仅供参考(节选示例):
四、代码展示
1.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<title>海贼王-乔巴专题</title>
</head>
<body>
<style>
A.applink:hover {
border: 2px dotted #dce6f4;
padding: 2px;
background-color: #ffff00;
color: green;
text-decoration: none;
}
A.applink {
border: 2px dotted #dce6f4;
padding: 2px;
color: #2f5bff;
background: transparent;
text-decoration: none;
}
A.info {
color: #2f5bff;
background: transparent;
text-decoration: none;
}
A.info:hover {
color: green;
background: transparent;
text-decoration: underline;
}
</style>
<!-- /Copyright � 2005. Spidersoft Ltd -->
<!-- banner -->
<div class="banner">
<img src="images/banner.gif" />
</div>
<!-- content -->
<div class="content">
<div class="content_nav">
<a href="index.html" class="now_nav">漫画简介</a>
<a href="pic.html">乔巴简介</a>
<a href="qb.html">乔巴图集</a>
<a href="mh.html">漫画欣赏</a>
<a href="author.html">网站介绍</a>
</div>
<div class="content_qb">
<img src="images/qb.png" />
<p>
《one
piece》(中译《海贼王》/海盗路飞)是尾田荣一郎在《周刊少年JUMP》上连载的漫画。"ONE
PIECE"在故事中为"一个大秘宝"之意。传说中'海贼王'哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏"ONE
PIECE",许多人为了争夺"ONE
PIECE",争相出海,许多海贼开始树立霸权,而形成了"大海贼时代"。十年后,蒙其·D·路飞为了要实现与因救他而断臂的四皇'红发'香克斯的约定而出海,在遥远的路途上找寻着志同道合的伙伴,一起进入"伟大航道",目标:当上"海贼王"。
故事讲述了主人公路飞立志成为海盗王,为了寻找传说中的秘宝ONE
PIECE而展开的凶险无比同时也波澜壮阔的冒险故事。草帽小子路飞带领船员从东海启程经伟大航道到新世界,一路历经各种艰难挫折,不断朝伟大航路的终点站迈进。
</p>
</div>
<div class="content_mh">
<h1><img src="images/mh.gif" /></h1>
<a href="#"><img src="images/1_03.gif" /></a>
<a href="#"><img src="images/2_03.gif" /></a>
<a href="#"><img src="images/3_03.gif" /></a>
<a href="#"><img src="images/4_03.gif" /></a>
<a href="#"><img src="images/1_03.gif" /></a>
</div>
<div class="content_foot">
<p></p>
</div>
</div>
</body>
</html>
...
2.CSS
代码如下(节选示例):
@charset "utf-8";
/* CSS Document */
body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "宋体";
font-size: 14px;
background: url(../images/body.gif) repeat-x;
}
a {
text-decoration: none;
color: #fff;
}
ul,
li {
list-style-type: none;
}
img {
border: 0;
}
.banner,
.content {
width: 1584px;
height: 351px;
margin: auto;
}
.content {
height: 724px;
background: url(../images/content.png) no-repeat;
position: absolute;
top: 325px;
}
.content_nav {
width: 960px;
height: 80px;
margin: auto;
}
.content_nav a {
line-height: 80px;
padding-left: 25px;
padding-right: 50px;
font-weight: bold;
}
.content_nav a:hover,
.now_nav {
color: #429cd1;
}
.content_qb,
.content_mh,
.content_foot,
.content_mh1 {
width: 960px;
margin: auto;
}
.content_qb img {
width: 259px;
height: 271px;
float: left;
margin: 40px 25px 0px 40px;
}
.content_qb p {
width: 600px;
float: left;
text-indent: 2em;
line-height: 24px;
color: #b8b3b3;
margin-top: 60px;
}
.content_mh {
clear: both;
}
.content_mh h1 {
margin: 0px 0px 20px 40px;
padding-top: 60px;
}
.content_mh a,
.content_mh1 a {
display: inline-block;
margin-left: 25px;
}
.content_foot {
margin-top: 55px;
}
.content_foot p {
text-align: center;
height: 24px;
color: #b8b3b3;
font-size: 12px;
}
.content1 {
background: url(../images/content1.png) no-repeat;
}
.content_mh1 a {
margin-top: 63px;
}
.content_mh1 a img {
width: 157px;
height: 108px;
}
...
五、总结
设计一个样式美观又人性化的网页,除了具备扎实的专业知识,还需具备美学和人机工程学等相关知识,优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,要去掉所有的冗余的东西;
2.使用方便
要满足使用者的要求,网页适合使用,显示出其功能美;
3.整体性好
围绕一个统一的目标设计,强调整体的功能性;
4.形象突出
尽量符合网页美的标准,能够使网站的形象得到最大限度的提升,追求雅俗共赏。页面用色协调,布局符合形式美的要求:布局有条理,充分利用美的形式,使网页富有可欣赏性,提高档次。
5.交互式强
发挥网络的优势,想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】;Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等,有兴趣的联系我!
您的支持是我创作的动力!看到这里就【点赞收藏博文】,Thanks!
更多优质博客文章、网页模板点击以下链接查阅:仙女网页设计-CSDN博客。