我的家乡网页设计模板《成都》

优质模板网

已于 2024-12-04 12:09:09 修改

阅读量1.4k

点赞数 13

分类专栏：家乡介绍网页模板文章标签：大作业前端 html html5 css3

于 2024-12-04 12:06:04 首次发布

本文链接：https://blog.csdn.net/a13580529499/article/details/144234889

版权

家乡介绍网页模板专栏收录该内容

4 篇文章

订阅专栏

一、网页介绍

家乡网页设计模板《成都》，模板有11个页面，代码简洁规范，有多种版本可选，非常灵活。可作为成都前端网页模板，我的家乡网页设计作业参考等。

二、网页技术

默认技术：Html+Css、Flex布局、三级页面、Form表单

可添加技术：css过渡、表单验证、带设计报告等。

三、网页优势

专为大学生设计的网页，与别人网页相比有以下优势：

可以选择网页技术。
提供自助查重功能。
代码简洁规范带注释。
自动更新所有文件的时间属性。

四、效果图

五、代码展示

1、html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网站首页</title>
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body>
		<main>
			<!-- 顶部大图 -->
			<div class="topimg">
				<img src="images/banner.jpg" alt="">
				<span class="city1">成</span>
				<span class="city2">都</span>
			</div>
			<!-- 导航菜单 -->
			<header>
				<nav>
					<ul>
						<li><a href="index.html">网站首页</a></li>
						<li><a href="history.html">历史沿革</a></li>
						<li><a href="fengjing.html">风景名胜</a></li>
						<li><a href="meishi.html">地方美食</a></li>
						<li><a href="customs.html">风土人情</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
				</nav>
			</header>

			<!-- 简介 -->
			<div class="jianjie">
				<h1>—————— 成都简介 ——————</h1>
				<div>
					<img src="images/about.jpg" alt="">
					<p>成都，四川省的省会，位于中国西南部，是一座历史悠久、文化底蕴深厚的城市。成都自古以来就有“天府之国”的美誉，是四川盆地的经济、文化中心，也是中国西南地区的重要交通枢纽。</p>
<p>成都的历史可以追溯到公元前311年，是古蜀文明的发源地之一。这座城市见证了多个朝代的兴衰，留下了丰富的历史遗迹和文化遗产。其中，武侯祠、杜甫草堂等著名景点，不仅是游客必游之地，也是研究中国古代历史和文化的宝贵资料。</p>
<p>成都是中国著名的美食之都，以川菜闻名于世。成都的美食文化丰富多彩，火锅、串串香、担担面等特色小吃深受人们喜爱。成都的夜市文化也非常有名，各种小吃摊点遍布街头巷尾，是体验当地生活的好去处。成都的旅游资源同样丰富。</p>
<p>除了历史遗迹和美食，还有许多自然风光和现代娱乐设施。如青城山、都江堰水利工程、成都熊猫基地等，都是游客必游之地。青城山以其幽静的自然环境和深厚的道教文化而闻名，都江堰水利工程则是中国古代水利工程的杰作。成都的交通网络四通八达，拥有便捷的铁路、公路和航空网络，为成都的对外开放提供了有力支持。成都不仅是中国西南地区的重要城市，也是连接中国与世界的重要桥梁。这座城市以其独特的魅力和活力，吸引着世界各地的游客和投资者。</p>
				</div>
			</div>

			<!-- 热门推荐 -->
			<div class="tuji">
				<h1>✨✨✨ 热门景点 ✨✨✨</h1>
				<ul>
					<li>
						<div>
							<div class="img_box">
								<a href="fengjing_detail1.html"><img src="images/fj1.jpg" alt=""></a>
							</div>
							<p>武侯祠，位于成都市武侯区，是中国三国时期蜀汉丞相诸葛亮的纪念祠庙，也是中国为数不多的纪念古代政治家、军事家的祠庙之一。武侯祠不仅是一处历史遗迹，也是成都著名的旅游景点，吸引了众多历史爱好者和游客前来...</p>
						</div>
					</li>
					<li>
						<div>
							<div class="img_box">
								<a href="fengjing_detail2.html"><img src="images/fj2.jpg" alt=""></a>
							</div>
							<p>杜甫草堂，位于成都市青羊区，是中国唐代伟大诗人杜甫流寓成都时的故居，也是中国文学史上著名的文化遗址。草堂不仅承载着杜甫的文学成就，也是成都文化的重要组成部分，吸引了无数文学爱好者和游客前来参观。...</p>
						</div>
					</li>
					<li>
						<div>
							<div class="img_box">
								<a href="fengjing_detail3.html"><img src="images/fj3.jpg" alt=""></a>
							</div>
							<p>青城山，位于成都市都江堰市，是中国道教四大名山之一，以其幽静的自然环境和深厚的道教文化而闻名。青城山不仅是一处风景秀丽的旅游胜地，也是道教信徒朝圣的圣地，每年吸引着众多游客和信徒前来朝拜。青城山分为...</p>
						</div>
					</li>
				</ul>
			</div>

			<footer>
				<p>———— 天府之国，休闲之都。 ————</p>
			</footer>

		</main>
	</body>
</html>

2、css代码

/* 初始样式 */
body {
	margin: 0;
	padding: 0;
	background-color: #ffe2d9;
}
a{
	text-decoration: none;
}
a:hover{
	color: #86b5fe;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
img{
	max-width: 100%;
}

/* 主容器宽度 */
main{
	width: 1200px;
	margin: 0 auto;
	background-color: white;
}

/* 顶部大图 */
.topimg {
	position: relative;
}
.topimg img {
	width: 100%;
	display: block;
}
.topimg .city1 {
	position: absolute;
	left: 85px;
	top: 116px;
	font-size: 145px;
	color: #fff;
	font-family: '三极行楷';
}
.topimg .city2 {
	position: absolute;
	left: 180px;
	top: 248px;
	font-size: 145px;
	color: #fff;
	font-family: '三极行楷';
}

/* 导航菜单 */
nav{
	background-color: #8c3003;
}
nav ul {
	display: flex;
	justify-content: space-around;
}
nav ul li {
	position: relative;
	flex: 1;
	text-align: center;
}
nav ul li a {
	color: white;
	padding: 16px 30px;
	display: block;
	font-size: 18px;
	font-weight: bold;
}

/* 简介 */
.jianjie {
	padding: 45px;
	padding-bottom: 0;
}
h1 {
	text-align: center;
	font-size: 22px;
	color: #474747;
	margin-bottom: 25px;
}
.jianjie > div {
	border: 3px solid black;
	box-shadow: 0px 0px 2px 2px;
	margin: 30px auto 20px;
}
.jianjie img{
	max-width: 100%;
	float: left;
	width: 520px;
	margin-right: 20px;
	margin-bottom: 5px;
}
.jianjie p {
	text-indent: 2em;
	line-height: 25px;
	color: #888;
	padding: 0 12px;
}

/* 图集 */
.tuji {
	padding: 30px;
}
.tuji ul{
	display: flex;
}
.tuji ul li {
	padding: 15px;
	width: 33.33%;
}
.tuji ul li > div {
	box-shadow: 0 0 5px #dedede;
}
.tuji ul li p {
	line-height: 24px;
	color: #656565;
	padding: 12px;
	margin: 0;
}

好了，由于代码太多，所以只展示首页的实现原理，其它页面原理差不多。需要完整代码和图片素材的也可以自行下载。