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

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

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

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