目录
一、网页概述
本实例应用html5+css3，div+css布局，代码简单,带实验报告书。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含3个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>西藏</title>
</head>
<body>
<div class="wrapin">
<!--头部-->
<div class="banner"> <img src="images/banner_01.jpg"/> </div>
<header>
<ul class="nav clearfix">
<li><a href="index.html">首页</a></li>
<li><a href="lishi.html">名称来历</a></li>
<li><a href="fengjing.html">风景图片</a></li>
</ul>
</header>
<!--内容-->
<div class="con">
<div class="top clearfix">
<div class="text">
<h2>西藏 </h2>
<P>西藏自治区（藏文：བོད་རང་སྐྱོང་ལྗོངས།，藏语拼音：Poi Ranggyong Jong，威利：Bod rang skyong ljongs），古称“蕃”，简称“藏”，首府拉萨，是中国五个少数民族自治区之一。
<br>
位于中国青藏高原西南部，地处北纬26°50′至36°53′，东经78°25′至99°06′之间。北邻新疆维吾尔自治区，东连四川省，东北紧靠青海省，东南连接云南省，南与缅甸、印度、不丹、尼泊尔等国家毗邻，西与克什米尔地区接壤，陆地国界线4000多公里，南北最宽900多公里，东西最长达2000多公里，是中国西南边陲的重要门户，无出海口。
<br>
全区面积120.223万平方公里，约占全国总面积的1/8，在全国各省、市、自治区中仅次于新疆。平均海拔在4000米以上，素有“世界屋脊”之称。2012年末全区常住人口总数为308万人， 辖4个地级市、3个地区，4个市辖区、72个县。
<br>
藏族人民是中华民族大家庭中的重要一员。西藏唐宋时期称为“吐蕃”，元明时期称为“乌斯藏”，清代称为“唐古特”、“图伯特”等。清朝康熙年间起称“西藏”至今。
<br>
2019年12月23日，西藏已基本消除绝对贫困，全域实现整体脱贫。
</P>
</div>
<div class="pic"> <img src="images/img_03.jpg"/> </div>
</div>
</div>
<!--底部-->
<footer>
<p>西藏</p>
</footer>
</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
/*通用类*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
font-size: 14px;
background: #fff4e8;
color: #333;
position: relative;
}
img {
border: none;
}
a {
cursor: pointer;
color: #333;
text-decoration: none;
outline: none;
}
ul {
list-style-type: none;
}
em {
font-style: normal;
}
.lt {
float: left;
}
.rt {
float: right;
}
div.clear {
font: 0px Arial;
line-height: 0;
height: 0;
overflow: hidden;
clear: both;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/*wrapin 主体容器宽度*/
.wrapin {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
header {
height: 50px;
background: #0289e5;
}
.nav li {
line-height: 50px;
float: left;
width: 20%;
text-align: center;
font-size: 16px;
}
.nav li a {
color: #fff;
}
.banner {
display: block;
}
.banner img {
width: 100%;
display: block;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
标签：css3,Web,none,网页,height,西藏,font,margin From： https://blog.csdn.net/2401_90084105/article/details/145125501