512. 我的家乡广西旅游主题网页大学生期末大作业 Web前端网页制作 html5+css3

仙女网页制作

已于 2024-11-15 21:26:19 修改

阅读量1.6k

点赞数 21

CC 4.0 BY-SA版权

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

于 2024-10-01 22:29:34 首次发布

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

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

826 篇文章

订阅专栏

旅游

99 篇文章

订阅专栏

家乡

48 篇文章

订阅专栏

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

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

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

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

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

一、网页概述

本实例应用html5+css3：导航菜单、视频、留言表单等。适用于大学生网页课程作业设计；本网页支持如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/style.css">
</head>

<body>
<div class="wrapper">
<div class="banner">
<img src="images/banner.jpg" > </div>
<div class="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jingdian.html">景点介绍</a></li>
<li><a href="meishi.html">特色美食</a></li>
<li><a href="luxian.html">路线及酒店</a></li>
<li><a href="message.html">给我留言</a></li>
</ul>
</div>
<hr>
<div class="content">

<div class="main-a">
<h2>———　广西旅游简介　———</h2>
<h3><img src="images/tu5.png" style="margin:20px;" align="right"><br>
　　桂林，是首批国家历史文化名城，世界旅游组织推荐中国最佳旅游城市之一，拥有世界自然遗产桂林山水，桂林接待过国外元首与政要近200位。唐代诗人杜甫以“五岭皆炎热，宜人独桂林”赞誉桂林的气候。桂林三冬少雪，四季常花，美景依旧，所以是个一年四季均可游玩的目的地。<br>
　　桂林呢景点众多而且分散，很多第一次来桂林游玩的人不知道应该怎么玩，溶洞就有好几个，漓江又分很多段，寨子、山、梯田。。。
<br>
　　到了桂林，漓江（观20元的背景）、兴坪古镇乘坐游船、少数民族村和文化博物馆、神龙谷景区、十里画廊、遇龙河竹筏，訾洲象鼻山，这几个景点是必须到的，假如时间多一点，龙脊梯田和长发村也是必选项。
<br><br>
</h3>
</div>
<center><video id="media" width="900" controls>
<source src="video/shipin.mp4">
</video></center>

</div>
<hr>
<div class="foot">
<h3>欢迎来到广西旅游</h3>

</div>

</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; outline: none;}
body { font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text- align:left;}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #fff;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
A:hover {TEXT-DECORATION: underline;color: #ffffff;}
ul,li{list-style-type:none;}
.clearit{clear:both;}

.wrapper{width:1200px;
margin:0 auto;
       padding:0 10px;
       border:solid #666 1px;}

.nav{width:1200px;
height:36px;
   background:#779aae;}

.nav ul{margin-left:400px;}

.nav li{width:150px;
text-align:center;
       line-height:36px;
       float:left;
       font-weight:bold;}

.nav li a:hover{color:#000;}

.content{width:1200px;
margin-top:20px;}

.main{width:1180px;
margin:0 auto;}

.main img{width:250px;
padding:10px;
       margin-left:14px;
       border:solid #666 1px;}

.main-a{width:1180px;
margin:20px auto;
       background:#e9f4fa;}

.main-a h2{text-align:center;
padding-top:20px;
       font-family: "微软雅黑";}

.main-a h3{font-size:12px;
       font-weight:normal;
       line-height:30px;
       padding:30px;}

.foot{width:1200px;
background:#779aae;}

.foot h3{text-align:center;
color:#FFF;
       line-height:40px;}

.main-b{width:1200px;
margin:20px auto;
       background:#e9f4fa;}

.main-b h2{text-align:center;
padding:20px 0;
       font-family: "微软雅黑";}

.main-b h5{font-size:12px;
font-weight:normal;
       line-height:50px;
       margin:0 50px;}

.tip{width:350px;
text-align:center;
   float:left;
   margin:20px 24px;
   border:solid #CCC 1px;
   background:#FFF;}

.tip img{width:350px;}

.tip h3{font-size:14px;
line-height:30px;}

.tip h4{font-size:12px;
line-height:30px;
       font-weight:normal;}

.main-c{width:1200px;}

.main-c img{width:250px;
padding:10px;
       margin-left:18px;
       border:solid #666 1px;
           margin-top:20px;}

.main-c h3{font-size:14px;
text-align:center;
       line-height:30px;
       background:#a0c6db;
       letter-spacing:2px;
       color:#FFF;}

.main-d{background:#e9f4fa;}

.message {width:550px;
margin:0 auto;
padding:30px 0;}

...