关于旅游景点主题的HTML网页设计——广东名胜古迹(7页)HTML+CSS

原创

IT司马青衫

发布于 2022-08-15 09:44:42

1.8K0

发布于 2022-08-15 09:44:42

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

💝 【作者主页——🔥获取更多优质源码】

💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

<hr>

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

<hr>

三、网站介绍📖

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）html文件包含：其中index.html是首页、其他html为二级页面；

（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。

网站设计方面：计划实现简洁大气的网页设计效果。

网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

<hr>

五、网站代码制作部分 📕

（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

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"> <a href="#" class="logo"><img src="images/logo.png"/></a> </div>
<header>
  <div class="wrapin">
    <ul class="nav clearfix">
      <li><a href="index.html">首页</a></li>
      <li><a href="jingdian.html">景点</a></li>
      <li><a href="zhinan.html">指南</a></li>
      <li><a href="luxian.html">路线</a></li>
      <li><a href="zixun.html">咨询</a></li>
	  <li><a href="tupian.html">图片</a></li>
    </ul>
  </div>
</header>
<div class="banner_box"> <img src="images/banner1.jpg"> </div>

<div class="wrapin"> 
  
  <!--内容-->
  <div class="con">
    <div class="title">
      <h2>景点</h2>
    </div>
    <ul class="product_box product clearfix">
      <li> <a href="info.html" class="box">
        <div class="pic"><img src="images/img_01.jpg"/></div>
        <p>笔架山</p>
        </a> </li>
      <li> <a href="info.html" class="box">
        <div class="pic"><img src="images/img_02.jpg"/></div>
        <p>北阁佛灯</p>
        </a> </li>
      <li> <a href="info.html" class="box">
        <div class="pic"><img src="images/img_03.jpg"/></div>
        <p>济门城楼</p>
        </a> </li>
      <li> <a href="info.html" class="box">
        <div class="pic"><img src="images/img_04.jpg"/></div>
        <p>葫芦山摩崖石刻</p>
        </a> </li>
      <li> <a href="info.html" class="box">
        <div class="pic"><img src="images/img_05.jpg"/></div>
        <p>潮州韩文公祠</p>
        </a> </li>
      <li> <a href="info.html" class="box">
        <div class="pic"><img src="images/img_06.jpg"/></div>
        <p>南雄珠玑古巷</p>
        </a> </li>
     
    </ul>
  </div>
</div>

<!--底部-->

<footer>
  <p>广东名胜古迹</p>
</footer>
</body>
</html>

CSS样式代码🏡

/*通用类*/
* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0 auto;
	font-size: 14px;
	background: #fff;
	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 {
	background:#66CCCC; 
	line-height: 60px;
}
.nav {
	text-align: center;
}
.nav li {
	text-align: center;
	display: inline-block;
	width: 120px;
}
.nav li:hover {
	background:#669999;
}
.nav li a {
	color: #fff;
	font-weight: bold;
	font-size:18px;
	display:block
}
.banner {
	display: block;
}
.banner img {
	width: 100%;
	display: block;
}
.banner_box {
	width: 100%;
	height: 496px;
	overflow: hidden;
	object-fit: cover;
	position: relative;
}

.title {
	text-align: center;
	padding: 30px 0;
}
.title h2 {
	font-size: 24px;
	color: #66CCCC;
}
.product_box {
	margin: 0 -15px;
}
.product_box li {
	float: left;
	width:33.3%;
	padding: 15px;
	box-sizing: border-box;
}
.product_box li .box {
	display: block;
	height: 360px;
	position: relative;
}
.product_box li .pic {
	width: 100%;
	height: 360px;
	overflow: hidden;
}
.product_box li .pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.im{ padding-bottom:60px}
.imgs li { width:25%}
.imgs li  .pic{ height:200px}
.product_box li .box p {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	line-height: 40px;
	background: rgba(44,173,196,.6);
	color: #fff;
	text-align: center;
}
.product_box li:hover .pic img {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);  /*兼容-webkit-引擎浏览器*/
	-moz-transform: scale(1.1);
}
.product_box li:hover .box p {
	background: rgba(44,173,196,1);
}
.about_box {
	margin:50px 0;
	padding: 60px 0;
	background:#66CCCC;
	color: #fff;
	text-align: center;
}
.about_box .text {
	line-height: 26px;
	font-size: 16px;
}
.about_box .text h2 {
	font-size: 20px;
}
.about_box .text p {
	margin: 20px 0;
}
.about_box .text a {
	display: inline-block;
	width: 120px;
	height: 42px;
	line-height: 42px;

	background-color:#FF9966;
	color: #fff;
	border-radius: 20px;
	font-size: 14px;
	-webkit-box-shadow: 1px 3px 14px rgba(0,0,0,0.2);
	box-shadow: 1px 3px 14px rgba(0,0,0,0.2);
}
.news {
	margin: 20px 0;
	padding-bottom: 50px;
}
.news li {
	font-size: 16px;
	line-height: 40px;
	border-bottom:#ccc solid 1px;
	margin:10px 0;
	padding:5px 10px
}
.news li a {
	color: #666;
}
.news li:hover a {
	color: #333;
}
footer {
	padding: 20px 0;
	background: #66CCCC;
	font-size: 16px;
	text-align: center;
	color: #fff;
}
.about {
	padding-bottom: 50px;
}
.about .text {
	font-size: 16px;
	color: #666;
	line-height: 32px;
}
.about .text p {
	margin: 20px 0;
}
.about .text p img {
	display: block;
	margin: 0 auto;
}
.product {
	margin-bottom: 50px;
}
.product .pic {
	width: 500px;
	margin: 0 auto;
	display: block;
}
.product .pic img {
	width: 100%;
}
.liebiao {
	margin: 30px auto;
	display: block;
	width: 180px;
	line-height: 40px;
	border-radius: 5px;
	color: #fff;
	background: #ff84b1;
	text-align: center;
}
form {
	width: 460px;
	margin: 0 auto;
	display: block;
	padding: 15px;
}
form p {
	margin: 10px 0;
	font-size: 16px;
	color: #333;
}
form .phone {
	width: 100%;
	height: 36px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid #ccc;
}
form textarea {
	width: 100%;
	height: 100px;
}
form .but {
	background:#FF6633;
	color: #fff;
	margin: 20px auto;
	border:none;
	display: block;
	width: 180px;
	line-height: 40px;
	border-radius: 5px;
}

<hr>

六、遇到问题及如何解决🔍

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

<hr>

七、实训总结😊

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。