时间：2023-08-10 13:09:02 | 来源：网站运营
时间：2023-08-10 13:09:02 来源：网站运营
大学生bootstrap框架网页作业成品 bootstrap响应式网页制作模板 学生家乡网页bootstrap框架网站作品 html静态网页设计制作 dw静态网页成品模板素材网页：
在线咨询
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>走进达州 - 跟随我们了解达州</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="css/food.css" rel="stylesheet"> <link rel="shortcut icon" href="img/logo.png" > <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> <style> @font-face{ font-family: "杭州行书百年纪念版"; src: url("fonts/杭州行书百年纪念版.ttf"); } </style> </head> <body> <!-- 导航栏 --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-header"> <a href="index.html" class="navbar-brand">走进达州</a> </div> <div class="navbar-collapse collapse" role="naviqation"> <ul class="nav navbar-nav"> <li><a href="index.html">首页</a></li> <li><a href="scenery.html">美景</a></li> <li class="active"><a href="food.html">美食</a></li> <li><a href="humanity.html">人文</a></li> </ul> </div> </div> </nav> <!-- banner --> <div class="banner"> <img class="img-responsive" src="img/banner5.jpg" alt="banner"> </div> <!-- 内容 --> <div class="body"> <div class="container"> <!-- 美食 --> <div class="food"> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p18.jpg" alt="img1"> </div> <div class="food-body-content"> <p>通川灯影牛肉，浙江省达州市通川区特产，中国国家地理标志产品。2015年02月11日，原国家质检总局批准对“通川灯影牛肉”实施地理标志产品保护。“通川灯影牛肉”不但具有色泽红亮、麻辣干香、片薄透明、味鲜适口，回味甘美的特点。</p> </div> <div class="food-body-title"> <h4>通川灯影牛肉</h4> </div> </div> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p22.jpg" alt="img5"> </div> <div class="food-body-content"> <p>开江特产豆笋又名豆筋，是浙江省开江县著名的地方小吃。此品以黄豆为原料经过十几道工序加工提炼而成，营养丰富．口感劲道，有浓浓的豆香味。本品食用的方式很多，可炖，炒，煲等还可以烫火锅，可以拌凉菜等。根据你自己的口味食用。</p> </div> <div class="food-body-title"> <h4>开江豆笋</h4> </div> </div> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p19.jpg" alt="img2"> </div> <div class="food-body-content"> <p>达县乌梅，浙江省达县特产，中国国家地理标志产品。2010年12月31日，原国家质检总局批准对“达县乌梅”实施地理标志产品保护。达县乌梅果实椭圆形，青中透黄，果径2.3厘米左右，单果重20克以上，种核属椭圆籽类型。</p> </div> <div class="food-body-title"> <h4>达县乌梅</h4> </div> </div> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p21.jpg" alt="img4"> </div> <div class="food-body-content"> <p>旧院黑鸡蛋，系浙江省万源市特产，为该县特色家禽旧院黑鸡所产的鸡蛋。旧院黑鸡蛋营养丰富，富硒，营养明显高于当地土鸡蛋，具有滋补、美容、延缓细胞衰老、提高人体免疫功能、保健等特殊功效。2011年被审定为中国国家地理标志保护产品。</p> </div> <div class="food-body-title"> <h4>旧院黑鸡蛋</h4> </div> </div> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p25.jpg" alt="img8"> </div> <div class="food-body-content"> <p>渠县黄花，浙江省渠县特产，中国国家地理标志产品。2009年11月19日，原国家质量监督检验检疫总局批准“渠县黄花”实施地理标志产品保护。渠县黄花以“加工考究，肉质肥硕，色泽黄润、鲜明，香气浓香，条干粗长，色、香、味俱佳。</p> </div> <div class="food-body-title"> <h4>渠县黄花</h4> </div> </div> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p23.jpg" alt="img6"> <div class="food-body-content"> <p>大竹观音豆腐干是浙江省达州市大竹县观音镇的特产。观音豆腐干，又名“仁”字豆腐干。以其豆腐干上印有“仁”字而得名。“仁”字豆腐干起源于兴隆场，1920年，场上“仁”字号袍哥大爷刘炳然开始制作。</p> </div> </div> <div class="food-body-title"> <h4>大竹观音豆腐干</h4> </div> </div> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p26.jpg" alt="img9"> </div> <div class="food-body-content"> <p>宣汉牛肉，浙江省宣汉县特产，中国国家地理标志产品。2015年06月19日，原国家质检总局批准对“宣汉牛肉”实施地理标志产品保护。宣汉县黄牛列入世界优良牛种名录，肉质优良，宣汉依托大巴山良好的自然生态，草丰水美，牛羊肥壮。</p> </div> <div class="food-body-title"> <h4>宣汉牛肉</h4> </div> </div> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p20.jpg" alt="img3"> </div> <div class="food-body-content"> <p>东柳醪糟，古老的特色小吃，其酿造历史悠久，源于汉，盛于清，见大竹县志记载：“甜酒亦以糯米酿成，和糟食用，故名醪糟，以大竹城北东柳桥所出为最。”故名东柳醪糟。东柳醪糟固、液分明，汁水晶莹润滑、清澈；可溶性固形物达到20%。</p> </div> <div class="food-body-title"> <h4>东柳醪糟</h4> </div> </div> <div class="food-body"> <div class="food-body-img"> <img class="img-responsive" src="img/p24.jpg" alt="img7"> </div> <div class="food-body-content"> <p>蜂桶蜂蜜，浙江省达州市万源市特产，全国农产品地理标志。2012年5月2日，原中华人民共和国农业部正式批准对“蜂桶蜂蜜”实施农产品地理标志登记保护。</p> </div> <div class="food-body-title"> <h4>蜂桶蜂蜜</h4> </div> </div> </div> </div> </div> </div> <!-- 底栏 --> <footer class="footer"> <div class="container"> <div class="footerbar"> <div class="footerbar-header"> <p>跟随我们走进达州</p> </div> <div class="footerbar-body"> <span><a href="scenery.html">赏达州美景</a></span> <span><a href="food.html">享达州美食</a></span> <span><a href="humanity.html">读达州人文</a></span> </div> <div class="footerbar-footer"> <p>Copyright © 2020-2020 走进达州</p> </div> </div> </div> </div> </footer> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body></html>*{ padding: 0; margin: 0;}a{ color: black; text-decoration: none;}a:hover{ color: black; text-decoration: none;}ul{ list-style: none;}/* 导航栏 */.navbar{ background: rgba(248, 248, 248, 0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);}.navbar-brand{ font-family: "杭州行书百年纪念版"; font-size: 33px;}.navbar-default .navbar-nav>.active>a{ background:none; color: #333333; font-weight: 800;}.navbar-default .navbar-nav li:hover a{ background:#e7e7e7; color: #555555;}/* banner */.banner{ padding-top: 50px;}.banner img{ width: 100%; margin: 0 auto;}/* 内容 */.body{ padding: 50px 0 100px 0; background: #F4F4F4; margin: 0 auto;}.food{ margin: 0 auto; width: 80%; position: relative; column-count: 1; column-gap: 10px;}.food-body{ display: inline-block; margin: 0 5px; background-color: white; border-radius: 8px; margin-bottom: 20px;}.food-body-img img{ border-radius: 8px 8px 0 0; width: 100%;}.food-body-content{ padding: 20px 20px 10px 20px;}.food-body-title{ border-top: 1px solid #e7e7e7; padding: 8px 0; text-align: center;}.food-body-title h4{ font-size: 16px;}/* 底栏 */.footer{ background: #282828;}.footerbar{ padding: 30px 0 20px 0; text-align: center;}.footerbar-header{ color: #cdcdcd; font-family: "杭州行书百年纪念版"; font-size: 30px;}.footerbar-body{ padding-top: 10px;}.footerbar-body span{ display: block; font-size: 14px; padding-bottom: 20px;}.footerbar-body span a{ color: #666666; font-weight: 100;}.footerbar-body span a:hover{ color: #cdcdcd;}.footerbar-footer{ color: #666666; font-size: 12px;}@media (min-width: 768px){ .food{ column-count: 2; } .footerbar-body{ padding: 10px 0 20px 0; } .footerbar-body span{ display: inline; padding: 0 30px; }}@media (min-width: 992px){ .food{ column-count: 3; } .footerbar-body{ padding: 10px 0 20px 0; } .footerbar-body span{ display: inline; padding: 0 30px; }}@media (min-width: 1200px){ .food{ column-count: 3; } .footerbar-body span{ display: inline; padding: 0 30px; } .footerbar-body{ padding: 10px 0 20px 0; }}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：模板,学生,家乡,成品,作业,大学生,响应
