html美食网页设计 hbuilder自适应网页设计作业南京美食bootstrap响应式网页设计成品

最新推荐文章于 2024-06-29 11:58:27 发布

猿猿网页设计(yywyss365)

最新推荐文章于 2024-06-29 11:58:27 发布

阅读量358

点赞数 4

分类专栏：餐饮美食网页设计 bootstrap 文章标签： html 美食前端

本文链接：https://blog.csdn.net/u011955860/article/details/139245527

版权

餐饮美食网页设计同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

猿猿网页设计专注于大学生网页设计开发，常见HTML网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!大学生网页设计模板可以用dw、hbuilder vscode、sublime等网页设计软件进行修改和查看并可以修改图片文字等。

网页设计运行效果图

网站首页html代码


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>南京美食</title>
 <link rel="stylesheet"  href="css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
  <script src="js/lunbo.js"></script>
</head>
<body>
<header>
	<div class="container">
	    <div class="row" >
	    	<div class="nav">
	    		<ul>
	                 <a href="food.html">
          <li class=" col-xs-2 col-sm-2 col-md-2" >美食介绍</li>
          </a> <a href="index.html">
          <li class=" col-xs-2 col-sm-2 col-md-2 " >美食历史</li>
          </a> <a href="fj.html">
          <li class=" col-xs-2 col-sm-2 col-md-2 " >美食知识</li>
          </a> <a href="y.html">
         
          <li class=" col-xs-2 col-sm-2 col-md-2" >制作方法</li>
          </a> <a href="login.html">
          <li class=" col-xs-2 col-sm-2 col-md-2" >登录</li>
          </a>
	           	</ul>
	        </div>
	    </div>
	</div>
</header>
<!-- <img src="images/banner.jpg" class="img"> -->
<div id="demo" class="carousel slide" data-ride="carousel"></div>
 
          <!-- 指示符 -->
          <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
           
          </ul>
 <img src="images/big.jpg" class="img">

    
<div class="container">
	<div class="row" >
		
		<div><h2>了解历史，做精明的美食家</h2>
		<ul class="list">
			<li class=" col-xs-6 col-sm-4 col-md-4 " >
				<img src="images/yuhuacha.jpg" class="imgs">
				<h3>南京雨花茶</h3>
			</li>
			<li class=" col-xs-6 col-sm-4 col-md-4 " >
				<img src="images/cxdyx.jpg" class="imgs">
				<h3>赤豆小元宵</h3>
			</li>
			<li class=" col-xs-6 col-sm-4 col-md-4 " >
				<img src="images/ghtmo.jpg" class="imgs">
				<h3>桂花糖米藕</h3>
			</li>
			
		</ul>

		<div style="clear:both"></div>
		<div class="container row"></div>
			<br><br>
		<div><h2>唯有美食不可辜负</h2></div>
		<div class="col-xs-12 col-sm-6 col-md-6">
			<img src="images/nanjing.jpg" class="img">
		</div>
		
		<div class="col-xs-12 col-sm-6 col-md-6 text">　　南京是一个历史悠久的城市，南京的饮食以金陵菜著名，金陵菜是苏菜的四大代表菜之一。金陵菜起源于先秦，战国末期屈原在《楚辞》记载有当时的金陵菜肴，清朝时就已久负盛名，到了民国时金陵菜享有极高声誉，有“京苏大菜”之称。南京小吃，在全国各地都非常有名。
		</div>
		<div style="clear:both"></div>
		<div class="col-xs-12 col-sm-6 col-md-6">
			<h3>美食新闻</h3>
			<hr>
			<ul class="new">
				<li>南京举办风景名胜区美食大赛<span>202-04-07</span></li>
				<li>南京美食入围全国top10<span>2023-04-07</span></li>
				<li>舌尖上的美食怎能少的了南京美食？<span>2023-04-07</span></li>
				<li>旅游人数再创新高<span>2023-04-07</span></li>
				<li>栖霞山风景区景点<span>2023-04-07</span></li>
				<li>盐水鸭 桂花鸭 叫法投票<span>2023-04-07</span></li>
			</ul>
		</div>
		<div class="col-xs-12 col-sm-6 col-md-6">
			<img src="images/nanjingzhutong.jpg" class="img">
		</div>
		<div style="clear:both"></div>
	</div>
		</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script src="js/popper.min.js"></script>   
<footer>南京美食</footer>
</body>
</html>

猿猿网页设计(yywyss365)

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
html美食网页设计 hbuilder自适应网页设计作业南京美食bootstrap响应式网页设计成品

猿猿网页设计专注于大学生网页设计开发，常见HTML网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
复制链接

扫一扫