洛阳旅游网页设计模板 web期末大作业

优质模板网

已于 2024-01-08 21:56:51 修改

阅读量614

点赞数 10

分类专栏： html+css网页文章标签：旅游前端课程设计大作业

于 2024-01-08 21:53:10 首次发布

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

版权

html+css网页专栏收录该内容

2 篇文章 2 订阅

订阅专栏

一、模板介绍

这是洛阳景点介绍html+css网页模板，页面简单好看，代码规范易改，没有使用js。模板共有5个页面，包括首页、景点介绍、美食介绍、民风民俗、联系我们页面。图片素材唯美壮丽，突出洛阳城市的魅力。不管是旅游网页期末作业，还是自己学习网页制作，都非常值得参考！

二、运用技术

使用了flex布局、多媒体视频、超链接、列表、表单、css效果等基本的网页制作技术。纯html+css网页，也有带js轮播图的版本，可私信我。

三、模板效果图

篇幅有限，只展示一些。

四、源代码

HTML：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>美食介绍</title>
		<link rel="stylesheet" href="./css/style.css">

	</head>

	<body>
		<header>
			<div class="header">
				<div class="container">
					<div class="ban">
						<img src="./images/logo.jpg" alt="">
					</div>
					<span class="wuhan">古都之韵，文化之城。</span>
				</div>
			</div>
		
			<div class="nav">
				<ul>
					<li>
						<a href="./index.html">
							首页
						</a>
					</li>
					<li>
						<a href="./jingdian.html">
							景点介绍
						</a>
				
					</li>
					<li>
						<a href="./meishi.html">
							美食介绍
						</a>
				
					</li>
					<li>
						<a href="./xisu.html">
							民风民俗
						</a>
				
					</li>
					<li>
						<a href="./lianxi.html">
							联系我们
						</a>
					</li>
				</ul>
			</div>
		</header>
		
		<!-- banner部分 -->
		<div class="banner">
			<img src="./images/banner.jpg" alt="">
		</div>
		
		<div class="container">
			<div class="mainss">
				<ul>
					<li>
						<div class="left">
							<img src="./images/ms1.jpg" alt="">
						</div>
						<div class="right" style="position: relative;">
							<h4>洛阳水席</h4>
							<p>
								洛阳水席，又称“水饭”，是洛阳地区的传统美食。整套菜肴以汤水为主，分为前菜、主菜和后菜。前菜中通常包括海参、鱿鱼、肉丝等，鲜美可口。主菜则以鱼片、肉丝、豆腐等为主，汤汁醇厚，口感丰富。最后是后菜，包括一些汤点和小吃，如牡丹花饺子、小笼包等，既可做主食，也可做点心。整个席面不仅菜肴丰富，而且口感滑嫩，十分美味。

							</p>
							<div class="hhh">
							</div>
						</div>
					</li>
					<li>
						<div class="left">
							<img src="./images/ms2.jpg" alt="">
						</div>
						<div class="right">
							<h4>油旋儿</h4>
							<p>
								油旋儿，是洛阳的一种传统美食，有着悠久的历史。这种小吃的名字中带有一个“旋”字，寓意着它是以面粉为主要原料，一种螺旋状的薄饼。
								
								油旋儿的制作过程十分讲究，首先将面粉和清水、酵母等材料混合，反复搓揉成面团。接着，将面团分成小块，每块都擀成薄薄的面皮。在面皮上涂抹一层油脂，再卷成螺旋形状，最后放在炉子中进行烘烤。
								
								油旋儿呈现出金黄色的外观。外皮酥脆。在吃的时候，可以蘸上一些醋或者辣椒油，让人感觉更加开胃可口。
							</p>
						</div>
					</li>
					<li>
						<div class="left">
							<img src="./images/ms3.jpg" alt="">
						</div>
						<div class="right">
							<h4>特色水煎包</h4>
							<p>
								洛阳的特色水煎包是一种经典的小吃，以其酥脆的底壳和鲜美的馅料而闻名。这道美食是以精面粉为皮，再加入适量的水和酵母，经过发酵后擀成薄薄的面皮，里面包裹着各种馅料，最后在平底锅中用油煎制而成。
								
								水煎包的外表金黄酥脆，底部酥脆，上部柔软，香气扑鼻。吃起来口感十分美味，馅料鲜美可口，咸香可口，让人回味无穷。这种小吃常常在早餐或下午茶时享用，也是洛阳人民的经典美食之一。
							</p>
						</div>
					</li>
					<li>
						<div class="left">
							<img src="./images/ms4.jpg" alt="">
						</div>
						<div class="right">
							<h4>老烩面</h4>
							<p>
								洛阳老烩面是一种传统的面食小吃，以其独特的烹饪工艺和口感受到了广大洛阳人民的喜爱。这道美食是以宽面条为主要原料，通过烩制而成。
								
								老烩面的面条宽厚，富有弹性，口感滑嫩，十分美味。这道菜还加入了一些特制的调料，如花椒、八角、香叶、桂皮等，以及多种肉类和蔬菜，一起炖煮，让这道菜的味道更加浓郁。
								
								洛阳老烩面是一道美味可口的面食小吃，它的独特风味和口感让人们无法抗拒，常常被作为招待宾客的佳肴之一。
							</p>
						</div>
					</li>




				</ul>
			</div>
		</div>
		
		<footer>
			洛阳，热情好客，欢迎您来。
		</footer>
		
	</body>

</html>

CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #000000;
}

li {
  list-style: none;
}

.container {
	width: 1200px;
	background-color: #ffffff;
	margin: 0 auto;
	overflow: hidden;
}

.content {
  width: 1190px;
  margin: 0 auto;
}

/* 美食页面 */
.mainss {
  width: 1200px;
  height: 1060px;
  margin: 0 auto;
  margin-top: 30px;
}

.mainss ul li {
  width: 1200px;
  height: 330px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
}

.kkk {
  height: 900px;
}

.mainss ul li .left {
  float: left;
  width: 500px;
  height: 100%;
  font-size: 16px;
}

.mainss ul li .left img {
  width: 100%;
  height: 100%;
}

.mainss ul li .right {
  padding-top: 5px;
  padding-left: 50px;
  padding-right: 20px;
  width: 650px;
  float: left;
  height: 100%;
  text-align: justify;
  background-color: #fff;
}

.mainss ul li .right h4 {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin: 10px 0;
  margin-bottom: 20px;
  font-weight: 500;
}

.hhh {
  width: 300px;
  height: 180px;
  position: absolute;
  left: 215px;
  bottom: -23px;
}

.mainss ul li .right p {
  font-size: 20px;
  line-height: 20px;
  line-height: 36px;
}

.iii {
  height: 1500px;
}

网页代码基本就是这样，需要全部网页代码打包的也可以私我。

优质模板网

关注

10
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
洛阳旅游网页设计模板 web期末大作业

这是洛阳景点介绍html+css网页模板，页面简单好看，代码规范易改，没有使用js。模板共有5个页面，包括首页、景点介绍、美食介绍、民风民俗、联系我们页面。图片素材唯美壮丽，突出洛阳城市的魅力。不管是旅游网页期末作业，还是自己学习网页制作，都非常值得参考！
复制链接

扫一扫