目录
一、网页简介
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html5+css3，div+css布局，代码精简，适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含5个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div class="head">
<div class="ban"><img src="images/ban.jpg" width="1000" height="500" border="0"></div>
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="zhuti.html">主体建筑</a></li>
<li><a href="wenwu.html">文物遗存</a></li>
<li><a href="lisji.html">历史文化</a></li>
<li><a href="lvyou.html">旅游指南</a></li>
</ul>
</div>
<div class="xia">
<h2>少林寺</h2>
<div class="zi">
<img src="images/t.jpg" width="268" height="310" align="right" style=" margin-left:20px;">
<Br>
<p>少林寺，位于河南省郑州市登封市嵩山五乳峰下，因坐落于嵩山腹地少室山茂密丛林之中，故名“少林寺”。是中国佛教禅宗祖庭和中国功夫的发源地之一，世界文化遗产、全国重点文物保护单位、国家AAAAA级旅游景区。</p>
<p>少林寺始建于北魏太和十九年（495年），是孝文帝为了安置他所敬仰的印度高僧跋陀尊者，在与都城洛阳相望的嵩山少室山北麓敕建而成。少林寺常住院占地面积约57600平方米，现任方丈是曹洞正宗第47世、第33代嗣祖沙门释永信。 少林寺是世界著名的佛教寺院，是汉传佛教的禅宗祖庭，在中国佛教史上占有重要地位，被誉为“天下第一名刹”。因其历代少林武僧潜心研创和不断发展的少林功夫而名扬天下，素有“天下功夫出少林，少林功夫甲天下”之说。</p>
<p>2010年8月，包括少林寺常住院、初祖庵、塔林在内的天地之中历史建筑群被联合国科教文组织列为世界文化遗产。</p>
<p></p>
</div><div class="clearit"></div>
<h2>布局结构</h2>
<div class="zi">
<img src="images/t1.jpg" align="right" style=" margin-left:20px;">
<Br>
<p>少林寺常住院建筑在河南登封少溪河北岸，从山门到千佛殿，共七进院落，总面积约57600平方米。主要包括常住院、塔林和初祖庵等。常住院的建筑沿中轴线自南向北依次是山门、天王殿、大雄宝殿、藏经阁（法堂）、方丈院、立雪亭、千佛殿。另外，寺西有塔林，北有初祖庵、达摩洞、甘露台，西南有二祖庵，东北有广慧庵。</p>
<p>寺周还有同光禅师塔、法如禅师塔和法华禅师塔等古塔10余座。</p>
</div><div class="clearit"></div>
</div>
<div class="foot">少林寺</div>
</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
body, html, div, blockquote, img, label, p, h1, h2, h3, ul,
li, form, a
{margin: 0; padding: 0; border: 0; outline: none;}
body { font-family: "微软雅黑";font-size: 14px;color: #000;line-height: 20px;text-align:left;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
ul,li{list-style-type:none;}
.clearit{clear:both;}
.head {width:1000px; margin:0 auto; }
.ban {width:1000px; height:500px;}
.nav { width:1000px; height:50px; background:#20140e }
.nav ul li {width:200px; float:left; text-align:center; line-height:50px;}
.nav ul li a { color:#FFF; font-size:16px; width:200px;height:50px; display:block }
.nav ul li A:hover { background: #4f3423;}
.xia h2 { width:1000px; height:35px; border-bottom:1px solid #333; line-height:35px; margin-top:30px;}
.zi { margin-top:20px;}
.zi p { line-height:30px; text-indent:2em;}
.foot { width:1000px; height:60px; background:#20140e;text-align:center; line-height:60px; font-size:16px; margin-top:25px; color:#FFF }
.tu img { margin-top:20px; margin-left:20px;}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
