大三期末网页设计作业 以旅游景点风景主题介绍网站设计与实现 (广东名胜古迹)

最新推荐文章于 2023-07-10 09:32:25 发布
最新推荐文章于 2023-07-10 09:32:25 发布
阅读量365 收藏 5
点赞数 1
分类专栏： web前端期末大作业 文章标签： 风景 前端 css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38514354/article/details/127182139
版权

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

三、🔗网站效果

▶️1.视频演示

E24JP-广东名胜古迹(7页)HTML+CSS

🧩 2.图片演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、💒 网站代码

🧱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 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>
    </ul>
  </div>
</div>
<div class="about_box">
  <div class="wrapin">
    <div class="text">
      <h2>旅游指南</h2>
      <p>广东名胜古迹：北阁佛灯,笔架山,别峰古寺,从熙公祠,韶关马坝人遗址，古城石牌坊,潮州韩文公祠，阳江“南海一号”，南雄珠玑古巷，梅州大埔客家土楼，新会崖山崖门古迹，东莞虎门销烟池遗址，开平碉楼与村落，岭南四大园林，广济门城楼等等。<br>
        广东内部有广府、客家、潮汕等民系，是岭南文化的重要传承地。广东旅游资源丰富，广州、深圳、珠海、汕头、佛山等城市均拥有国家5A级旅游景区多处，其中包括有丹霞山、长隆、华侨城、白云山、罗浮山、雁南飞、广济桥等，是观光旅游的好去处。</p>
      <a href="zhinan.html">查看更多</a> </div>
  </div>
</div>
<div class="wrapin">
  <div class="title">
    <h2>旅游线路</h2>
  </div>
  <ul class="news">
    <li>
      <h2>潮汕+南澳岛深度3日线路 </h2>
      <p>上午睡到自然醒，下午可以选择潮州City walk ，由当地人带领你去体验手拉壶制作，学泡潮汕工夫茶，观摩潮剧演出，去各种工作室简单了解潮汕非遗之作。<br>
        上午漫步龙湖古寨，中午可以跟当地人制作手制粿品与潮式点心，下午汕头老城区走一走，探索潮汕高等学府汕头大学。<br>
       
        全天用别样的方式体验南澳风光，打卡南澳大桥，海螺岩石地，海上渔村，观景长廊，青澳湾，风车厂等景点。 </p>
    </li>
    <li>
      <h2>潮汕老城时光经典3日 </h2>
      <p>首先可以来到潮汕茶馆品功夫茶，观潮剧，体验潮汕慢生活，建议品尝特色美食，老牌牛杂和原味鱼生。然后可以到开元寺感受潮汕人的信仰。<br>
        上午可以感受韩文公祠观石碑坊，探索广济桥的奥秘，去滨江长廊闲逛再去潮州古城感受一下市井气息下午去牌坊街走走，再走进龙湖古寨看一看庭院深深。 </p>
    </li>
  </ul>
</div>
<div class="im" style="background:#eee">
  <div class="wrapin">
    <div class="title">
      <h2>摄影图片</h2>
    </div>
    <ul class="product_box imgs clearfix">
      <li>
        <div class="pic"><img src="images/tu_01.jpg"/></div>
      </li>
      <li>
        <div class="pic"><img src="images/tu_02.jpg"/></div>
      </li>
      <li>
        <div class="pic"><img src="images/tu_03.jpg"/></div>
      </li>
      <li>
        <div class="pic"><img src="images/tu_04.jpg"/></div>
      </li>
      <li>
        <div class="pic"><img src="images/tu_05.jpg"/></div>
      </li>
      <li>
        <div class="pic"><img src="images/tu_06.jpg"/></div>
      </li>
      <li>
        <div class="pic"><img src="images/tu_07.jpg"/></div>
      </li>
      <li>
        <div class="pic"><img src="images/tu_08.jpg"/></div>
      </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;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

html5网页设计
关注
专栏目录
五色花.doc
09-19
五色花.doc
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
响应式鲜花礼品商城网站源码|鲜花商城网站建设
05-22
响应式鲜花商城源码是基于易优cms进行开发的商城系统，商城开发初衷主要要服务员少量货物需要销售的小型商城购物系统 演示地址：https://www.eyoucms.com/buy/special/
使用HTML制作静态网站 中国传统文化 丝绸之路 (学生网页设计作业源码)
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
五色超级创意合集—扁平网页风CH016(1).doc
12-07
五色超级创意合集—扁平网页风CH016(1).doc
HTML+CSS网页设计作业前端实例代码（大三学生网页作业）
12-26
作品介绍： HTML实例网页代码, 本实例适合于...该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
基于JavaWeb的酒店管理系统设计与实现源码+数据库+文档说明（期末大作业）
最新发布
09-24
基于JavaWeb的酒店管理系统设计与实现源码+数据库+文档说明（期末大作业），个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目，评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要...
基于微信小程序ssm的童装商城网站的设计与实现+后台管理系统
10-27
基于微信小程序ssm的童装商城网站的设计与实现+后台管理系统+适用于毕设，可用于毕设参考和练习，也可用于其它。 项目资源适用于大三、大四的同学，可用于毕设参考和练习，也可用于商用。 技术路线 开发语言：Java...
Java+基于ssm的汽车资讯网站活动报名设计与实现
10-27
Java+基于ssm的汽车资讯网站活动报名设计与实现+适用于毕设，可用于毕设参考与练习。 项目资源适用于大三、大四的同学，可用于毕设参考和练习，也可用于商用。 软件开发环境及开发工具： Java——涉及技术： 前端...
基于微信小程序的新零售移动电商系统设计与实验源码+报告文档（高分期末大作业）.zip
05-31
基于微信小程序的新零售移动电商系统设计与实验源码+报告文档（高分期末大作业）.zip个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目，评审分98分。主要针对计算机相关专业的正在做大作业的...
HTML5 Javascript 五彩连珠 源码
03-19
HTML5 Javascript 五彩连珠 源码
thinkphp鲜花水草花卉网站模板+前后端源码
07-08
thinkphp鲜花水草花卉网站模板+前后端源码，本模板自带eyoucms内核，无需再下载eyou系统，原创设计、手工书写DIV+CSS，完美兼容IE7+、Firefox、Chrome、360浏览器等；主流浏览器；结构容易优化；多终端均可正常预览。
php 花店系统，数据库是mysqli，比较简单的代码
06-26
php 花店系统（包含添加到购物车，购物车，提交订单，订单详情等），数据库是mysqli，比较简单的代码
基于php鲜花花卉销售网站
q_1262330535的博客
08-07 1390
本系统是为传统经营的花店开通网上销售渠道而开发的，主要满足传统花店运营模式的需求，将销售渠道扩展到网上。通过简单的管理，提供该最终消费者产品的展示、购物、订单处理等。 在线购物操作简单，节约时间，大大的见擒了商家的工作量，降低成本。商家可以发布鲜花产品，以供客户查看；实现简单的鲜花查询功能；客户能比较方便地订购鲜花产品和管理自己的产品；管理员能比较方便的管理所有的订单。 主要设计内容：本课题是实现一个网上实现花卉销售一个系统。课题的具体研究内容如下： 1.个人登录注册 登录注册：使用网站的人可以通过注册登录
html5鲜花网页代码,JS制作漂亮的鲜花完整代码
weixin_35600835的博客
06-07 4895
摘要：看这朵鲜花多漂亮，一开始感觉是一张图片，审查元素后发现是用js写的，学习一下，我在这里分享给大家。代码：...看这朵鲜花多漂亮，一开始感觉是一张图片，审查元素后发现是用js写的，学习一下，我在这里分享给大家。代码：JS鲜花varb=document.body;varc=document.getElementsByTagName('canvas')[0];vara=c.get...
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 25万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现
HTML网页设计
08-08 4271
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS......
如何使用html制作网页
2301_76469377的博客
07-10 2万+
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。HTML文本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容 ，它的标记语法是以“<”和">"，主要有两种形式的标签，分别是双标签（<标签名字>标签内容<标签名字>）和单标签（<标签名字/>）。<p>HTML称为超文本标记语言，是一种标识性的语言。
web前端 基于html实现花店购物网站源码(HTML+CSS+JavaScript) 企业网站制作
网页设计与制作
12-12 1652
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS
大三学生HTML+CSS网页设计作业教程
资源摘要信息:"HTML+CSS网页设计作业前端实例代码（大三学生网页作业）" 本实例代码是一个为大三学生设计的网页设计作业项目，适合初学者学习HTML和CSS。通过这个项目，学生可以从零开始设计并实现一个个人网站，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

html5网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值