web前端网站描述✍️旅游景点介绍及布局方面解析

时间：2023年07月19日

旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，

【作者主页-获取更多优质源码】

【Web前端期末作业-优质项目完成项目实战案例（1000套）】

文章目录

1. 网站标题

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

2. 网站说明✍️

旅游景点介绍，是旅游景区简介、行政区划、地理环境、自然环境、教育、体育、旅游景点、城市荣誉等。网站重点关注当地风土人情，通过游客留言增加游客的互动体验。同时，地方旅游网站各网页均采用统一的设计风格，强化城市整体统一面貌的宣传效果。最重要的是要让旅游网站风格独特，能够吸引浏览者的注意力。

三、网站介绍

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

网站程序：拟采用最新的网页编程语言HTML5+CSS3+JS编程语言来完成网站的功能设计。并保证网站代码兼容目前市面上所有主流浏览器广州网页设计，这样网站打开后就能立即看到。

网站素材方面：计划从各个平台收集好看的图片素材，精心挑选适合网页风格的图片，然后用PS制作出适合网页大小的图片。

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

网页编辑：网页作品代码简单，可以使用任何HTML编辑软件（如：、、、、、、Text、++等任意html编辑软件来运行、修改、编辑等）。

在：

广州网页设计_广州网页设计制作_广州网页设计师学校

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

（2）css文件包括：所有css页面样式、文字滚动、图片缩放等；

（3）js文件包括：实现动态轮播效果、点击事件等的js（个别网页使用js代码）。

4、网站效果

网站设计制作的重点是网页整体设计的布局以及网页整体内容的主题选择。

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

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

五、网站代码制作部分

(1)网站首页的布局决定了各个版块的内容，采用DIV+CSS布局。另外，首页用到的知识主要有图片插入、图片动态切换、导航栏、使用CSS固定字体、文字大小、文字颜色、背景颜色等。

（2）页面采用DIV+CSS布局广州网页设计，用到的知识主要包括图片插入、导航栏、CSS固定字体、文字大小、文字颜色、背景颜色。

(3)页面的表单部分采用DIV+CSS布局。用到的知识主要包括表单表单、输入文本框和输入提交按钮的使用，完成表单信息采集。使用CSS设置输入提交按钮的文本大小和颜色。

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

6、遇到的问题及解决方法

在培训过程中，我遇到了很多困难，比如如何收集适合网页的图片素材，如何让网页的配色看起来更加自然舒适，如何使用PS裁剪合适大小的图片，如何制作表格时设计表格等等，最后，通过网上搜索和请教别人的建议，很好地解决了。

七、培训总结

通过这次网页设计和制作培训，我能够灵活运用所学的知识和技能制作简单的网页，掌握个人网站建设的技巧和基本网站建设的流程。用、、、等制作网页更加方便。在培训过程中，我努力充分利用老师所讲授的知识来巩固所学的知识。为了做出更好的效果，我还参考了其他资料，学习了更多的网页处理技巧。在制作网页的过程中遇到了很多问题，都是通过查找资料或者询问同学来解决的。通过这次综合培训，我收获很多，学以致用。在实践的过程中，我可以学会巩固知识，加深记忆。网页制作是一门实践性很强的学科，值得我以后进一步学习。在这次培训中，我也认识到自己的技能太少，以至于很多想法没有实现。在以后的学习过程中，我会对网页制作有更深入的了解，做出更成熟的网页。

注意：部分素材来源于网络，如有侵权，请及时联系作者处理

阿勒泰优质虚拟主机供应商

web前端网站描述✍️旅游景点介绍及布局方面解析

热门标签

阅读排行

咨询在线客服

web前端网站描述✍️旅游景点介绍及布局方面解析

相关阅读

热门标签

阅读排行

地区切换

【成都】下级地区

【成都】同级地区

【成都】上级地区

咨询在线客服