目录
欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css：div+css布局，导航菜单、音频等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含4个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" />
<title>泰坦尼克号 Titanic (1997)</title>
</head>
<body>
<embed src="music/music.mp3" width="0" height="0"></embed>
<div class="con">
<div class="head">
<div class="logo">
<h1>泰坦尼克号 Titanic (1997)</h1>
</div>
<div class="nav">
<ul>
<li><a href="index.htm">首 页</a></li>
<li><a href="page1.htm">角色介绍</a></li>
<li><a href="page2.htm">幕后花絮</a></li>
<li><a href="page3.htm">影片评价</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="lunbo"><a href="#"><img src="images/d1.jpg" width="1024"/></a></div>
<div class="clear"></div>
<div class="main">
<p> </p>
<h2>泰坦尼克号简介</h2>
<p>《泰坦尼克号》是美国二十世纪福斯电影公司、派拉蒙影业公司出品爱情片，由詹姆斯·卡梅隆执导，莱昂纳多·迪卡普里奥、凯特·温斯莱特领衔主演。<br>
影片以1912年泰坦尼克号邮轮在其处女启航时触礁冰山而沉没的事件为背景，讲述了处于不同阶层的两个人穷画家杰克和贵族女露丝抛弃世俗的偏见坠入爱河，最终杰克把生命的机会让给了露丝的感人故事。<br />
该片于1997年12月19日在美国上映，1998年4月3日在中国在内地上映，2012年4月10日以3D版在中国内地重映。
2017年12月，《泰坦尼克号》入选美国国会图书馆保护片目名单。</p>
<p> </p>
<h2>剧情介绍</h2>
<div></div>
<div> 1912年4月10日，号称 "世界工业史上的奇迹"的豪华客轮泰坦尼克号开始了自己的处女航，从英国的南安普顿出发驶往美国纽约。富家少女罗丝（凯特•温丝莱特）与母亲及未婚夫卡尔坐上了头等舱；另一边，放荡不羁的少年画家杰克（莱昂纳多·迪卡普里奥）也在码头的一场赌博中赢得了下等舱的船票。 <br />
罗丝厌倦了上流社会虚伪的生活，不愿嫁给卡尔，打算投海自尽，被杰克救起。很快，美丽活泼的罗丝与英俊开朗的杰克相爱，杰克带罗丝参加下等舱的舞会、为她画像，二人的感情逐渐升温。<br />
1912年4月14日，星期天晚上，一个风平浪静的夜晚。泰坦尼克号撞上了冰山，"永不沉没的"泰坦尼克号面临沉船的命运，罗丝和杰克刚萌芽的爱情也将经历生死的考验。</div>
<p> </p>
<p></p>
<p></p>
<p></p>
<h2>电影片段</h2>
<div class="main_list">
<ul>
<li><a href="#"><img src="images/q1.jpg" /></a></li>
<li><a href="#"><img src="images/q2.jpg" /></a></li>
<li><a href="#"><img src="images/q3.jpg" /></a></li>
<li><a href="#"><img src="images/q4.jpg" /></a></li>
<li><a href="#"><img src="images/q5.jpg" /></a></li>
<li><a href="#"><img src="images/q6.jpg" /></a></li>
<li><a href="#"><img src="images/q7.jpg" /></a></li>
<li><a href="#"><img src="images/q8.jpg" /></a></li>
<li><a href="#"><img src="images/q9.jpg" /></a></li>
<li><a href="#"><img src="images/q10.jpg" /></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="foot">
<p>版权所有：泰坦尼克号 Titanic (1997)</p>
<p>All Rights Reserved</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
/*----------------------common-------------------------*/
*{
margin:0;
padding:100;
font-family:Microsoft YaHei;
}
.clear{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}
img{ border:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style-type:none;}
.ofh{overflow:hidden;}
.center{ text-align:center;}
.em{ text-indent:2em;}
.p5{ padding:5px;}
.pl50{ padding-left:50px;}
body{
background-attachment: fixed;
background-color: #000;
background-image: url(../images/bj.jpg);
background-repeat: no-repeat;
background-position: center top;
}
/*----------------------con-------------------------*/
.con{ width:960px; padding:20px; height:auto; margin:10px auto; background:#fff; background-color:rgba(255,255,255,0.8);-moz-border-radius:10px;border-radius:10px;}
/*----------------head-----------------*/
.head{ width:960px; height:auto; margin:auto;}
.logo{ width:550px; height:60px;}
.logo h1{ font-size:36px; line-height:60px; color:#300; font-family:黑体;}
.nav{
width: 960px;
height: 40px;
margin: 5px auto;
background-color: #000;
-moz-border-radius: 5px;
border-radius: 5px;
}
.nav ul{ padding-left:10px;}
.nav li{ float:left; padding:5px 20px; }
.nav li a{ font-size:20px; line-height:30px; color:#fff;}
.nav li a:hover{ color:#fff; text-decoration:none;}
.nav li:hover{ background-color:#f97255}
.nav li:hover a{ color:#fff;}
.lunbo{ width:960px; height:350px; margin:5px auto; overflow:hidden;-moz-border-radius:5px;border-radius:5px;}
/*----------------main-----------------*/
.main{
width:960px;
height:auto;
margin:10px auto;
font-size:14px;
line-height:24px;
color:#555;
}
.main h2{font-size:18px; line-height:46px; color:#333;}
.main p{font-size:14px; line-height:24px; color:#555; text-indent:2em;}
.main_list{ width:960px; height:auto; }
.main_list li{ width:150px;height:100px; float:left; margin:3px; border:2px solid #fff;}
.main_list li:hover{border:2px solid #ffca2c;}
.main_list li img{ width:150px; height:100px; }
/*----------------foot-----------------*/
.foot{ width:960px; height:50px; margin:10px auto; padding-top:10px; border-top:3px solid #600; text-align:center; font-size:14px; line-height:24px; color:#666;}
.foot{
font-size: 14px;
line-height: 24px;
color: #CCC;
}
.con .main p img {
float: right;
}
.con .main ul li {
float: left;
list-style-type: none;
padding-left: 10px;
}
.con .main span {
width: 300px;
height: 200px;
display: block;
float: left;
padding-left: 10px;
padding-right: 5px;
line-height: 30px;
}
.con .main ul li {
float: left;
height: auto;
width: 137px;
padding-left: 20px;
}
.con .main ul li p {
font-size: 12px;
color: #000;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
