678.大学生HTML期末大作业 —【简单的西藏介绍旅游主题网页(3页)】 Web前端网页制作 html5+css3
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用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前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
12
0- 0
已为社区贡献24条内容
所有评论(0)