HTML静态网页成品作业(HTML+CSS+JS)——我的家乡福州介绍网页(3个页面)

崽子爱码

已于 2024-06-19 08:26:21 修改

阅读量733

点赞数 19

分类专栏：静态网页 html网页设计与制作学生HTML个人网页作业作品文章标签： html css javascript

于 2024-06-19 08:23:14 首次发布

本文链接：https://blog.csdn.net/weixin_42283461/article/details/139789088

版权

html网页设计与制作同时被 3 个专栏收录

118 篇文章 21 订阅

订阅专栏

静态网页

115 篇文章 0 订阅

订阅专栏

学生HTML个人网页作业作品

89 篇文章 17 订阅

订阅专栏

🎉不定期分享源码，关注不丢失哦

一、作品介绍

🏷️本套采用HTML+CSS，使用Javacsript代码实现图片轮播，共有3个页面。

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div class="main">
		<div class="top">
			<img src="./images/d1.jpg" alt="" class="on">
			<img src="./images/d2.jpg" alt="">
		</div>
		
		
		<div class="nav">
			<a href="index.html" class="on">首&nbsp;&nbsp;&nbsp;&nbsp;页</a>
			<a href="jingdian.html">特色景点</a>
			<a href="meishi.html">特色美食</a>
		</div>
		<div class="banner">
			<img src="./images/banner.jpg" alt="">
		</div>
		
		<div class="box">
			<div class="box_index">
				<div class="box_i">
					<div class="box_img wh">
						<img src="./images/i1.jpg" alt="" class="on">
						<img src="./images/i2.jpg" alt="">
					</div>
					<div class="box_info">
						<h2>文化底蕴</h2>
						<p>福州历史悠久、渊源流长，建城至今已有2200多年，是国家历史文化名城。早在新石器时期，福州先民就创造了壳丘头文化、昙石山文化。福州民风淳朴，文化昌盛，素有“海滨邹鲁”的美誉。</p>
					</div>
				</div>
				<div class="box_i">
					<div class="box_img yf">
						<img src="./images/i3.jpg" alt="" class="on">
						<img src="./images/i4.jpg" alt="">
					</div>
					<div class="box_info">
						<h2>有福之州</h2>
						<p>福州，有“福”之州。历史记载福州是“因州北有福山”而故名，但以“有福之州”解释更显其内涵。因为福州不仅有山之仙气，水之灵气，还有人之福气。</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="footer">
			福州 欢迎您的到来
		</div>
	</div>
	<script src="./js/js.js"></script>
</body>
</html>