678. 大学生HTML5期末大作业 ―【简单的西藏介绍旅游主题网页】 Web前端网页制作 html5+css3

仙女网页制作

于 2024-12-10 23:19:37 发布

阅读量744

点赞数 19

CC 4.0 BY-SA版权

分类专栏： Web网页设计实例旅游家乡文章标签：前端 html 课程设计 javascript html5 旅游 css3

本文链接：https://blog.csdn.net/A240307/article/details/144386261

Web网页设计实例同时被 3 个专栏收录

826 篇文章

订阅专栏

旅游

99 篇文章

订阅专栏

家乡

48 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用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>

<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;
}