静态网页设计——多彩贵州（HTML+CSS+JavaScript）(dw、sublime Text、webstorm、HBuilder X)

news2024/9/20 20:39:15

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：https://www.bilibili.com/video/BV1cK411v7R2/?vd_source=5f425e0074a7f92921f53ab87712357b

源码：https://space.bilibili.com/565112134

使用技术：HTML+CSS+JS（静态网页设计）
主要内容：关于贵州的一些事物。

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。
在这里插入图片描述

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，或者点击下方的按钮可以手动切换图片。
在这里插入图片描述
代码：

<div class="header">
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt=""></a>
			</div>
			<div class="nav">
				<ul>
					<li>
						<a href="index.html">网站首页</a>|
					</li>
					<li>
						<a href="html/jd.html">著名景点</a>|
					</li>
					<li>
						<a href="html/meishi.html">贵州美食</a>|
                    </li>
					<li>
						<a href="html/tc.html">贵州特产</a>|
					</li>
					<li>
						<a href="html/gonglue.html">民俗文化</a>
                    </li>
				</ul>
			</div>
		</div>
		<div class="banner">
			<img id="imgs" src="images/home_banner.jpg" alt="">
		</div>
		<!--开始-->
		<div class="main shop">
			<div class="left">
				<div class="LT">
					贵州著名景点
				</div>
				<div class="shopList">
					<a href="html/sceneinfo.html" title="">
						<img src="images/i-1.jpeg" alt="">
						<p>
							青岩古镇
						</p>
					</a>
				</div>
				<div class="shopList">
					<a href="html/sceneinfo.html" title="">
						<img src="images/bldj.jpg">
						<p>
							百里杜鹃
						</p>
					</a>
				</div>
				<ul>
					<li>
						<a href="html/sceneinfo.html" title="">
							梵净山
						</a>
					</li>
					<li>
						<a href="html/sceneinfo.html" title="">
							千寨苗
						</a>
					</li>
					<li>
						<a href="html/sceneinfo.html" title="">
							荔波小七孔
						</a>
					</li>
					<li>
						<a href="html/sceneinfo.html" title="">
							黔灵山公
						</a>
					</li>
					<li>
						<a href="html/sceneinfo.html" title="">
							红枫湖
						</a>
					</li>
					<li>
						<a href="html/sceneinfo.html" title="">
							天河潭
						</a>
					</li>
				</ul>
			</div>

2、著名景点

该页面使用html+css设计结构和样式，将图片img标签设计成排列整齐的卡片，有些还是卡片超链接，鼠标放上去卡片或者卡片上的文字会变色。
在这里插入图片描述

代码：

<div class="t">
热门景点介绍
</div>
<p class="txt">
位于贵阳市南郊，距市区约29公里。它是贵州四大古镇之一，一座建于600年前的军事古镇。古镇内设计精巧、工艺精湛的明清古建筑交错密布，寺庙、楼阁画栋雕梁、飞角重檐相间。悠悠古韵，被誉为中国最具魅力小镇之一。小镇，名青岩，位于贵阳花溪南12公里处，城门上大书“定广门”三个字。城门左右两边有逶迤城墙，上筑敌楼、垛口、炮台。全部用方块巨石筑就，一派青灰苍黑。</p>
<div class="gl">
<a href="#" class="gl1 allPic">景点概览</a>
</div>