大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 轻食讯-美食网1个页面
本项目基于Bootstrap框架实现，包含导航栏、轮播图、grid布局、折叠框、评论区、弹窗等组件。
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90216716
2，点击上方下载
目录1
项目视频
html+css+js网页设计 美食 轻食讯-美食网1个页面
页面展示
页面1
代码展示
<body>
<!--Bootstrap 导航栏-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<!-- Brand -->
<div class="container">
<a class="navbar-brand" href="JavaScript:void(0)">轻实训-美食网</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#carousel">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#latestProduct">最新产品</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sweetyCake">美味蛋糕</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#newArrival">新品上市</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#customerReviews">客户点评</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactUs">联系我们</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Bootstrap 轮播图（Carousel）组件-->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- 轮播图指示器 -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- 轮播图内容 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/carousel1.png" />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>水果</p>
</div>
</div>
<div class="carousel-item">
<img src="images/carousel2.png" />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>面包</p>
</div>
</div>
<div class="carousel-item">
<img src="images/carousel3.png" />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>西点</p>
</div>
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<div class="search">
<div class="row">
<!--Bootstrap 网格系统-->
<div class="col-xs-12 col-sm-4">
<!-- 引用（Blockquote） -->
<blockquote class="blockquote">
世间唯有美食不可辜负
<small class="blockquote-footer">美食网</small>
</blockquote>
</div>
<div class="col-xs-12 col-sm-4 search-input">
<!--Bootstrap 字体搜索图标 -->
<span class="fa fa-search"></span>
<input
type="text"
class="form-control"
placeholder="请输入您要搜索的关键词"
/>
<h3>关键词：生日蛋糕、咖啡、天然酵母面包</h3>
</div>
<div class="col-xs-12 col-sm-4">
<!--Bootstrap 字体电话图标-->
<div class="search-tel">
<span class="fa fa-phone"></span>联系电话：027-12345678
</div>
</div>
</div>
</div>
<div class="row" id="latestProduct">
<div class="product">
<h2 class="title"><span>最新产品</span></h2>
<div class="row">
<div class="col-6 col-sm-2">
<!--Bootstrap 缩略图-->
<div class="img-thumbnail">
<img src="images/cake1.jpg" />
<div class="product-title">古早味绿豆糕</div>
</div>
</div>
<div class="col-6 col-sm-2">
<div class="img-thumbnail">
<img src="images/cake2.jpg" />
<div class="product-title">古早味绿豆糕</div>
</div>
</div>
<div class="col-6 col-sm-2">
<div class="img-thumbnail">
<img src="images/cake3.jpg" />
<div class="product-title">古早味绿豆糕</div>
</div>
</div>
<div class="col-6 col-sm-2">
<div class="img-thumbnail">
<img src="images/cake4.jpg" />
<div class="product-title">古早味绿豆糕</div>
</div>
</div>
<div class="col-6 col-sm-2">
<div class="img-thumbnail">
<img src="images/cake5.jpg" />
<div class="product-title">古早味绿豆糕</div>
</div>
</div>
<div class="col-6 col-sm-2">
<div class="img-thumbnail">
<img src="images/cake6.jpg" />
<div class="product-title">古早味绿豆糕</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="sweetyCake">
<div class="product">
<h2 class="title"><span>美味蛋糕</span></h2>
<div class="row">
<!-- 导航栏在大屏下左右2:10分布，小于sm后则都独占一行 -->
<!-- 导航菜单 -->
<div class="col-sm-2">
<div
class="nav flex-column nav-pills"
id="v-pills-tab"
role="tablist"
aria-orientation="vertical"
>
<a
class="nav-link active"
id="v-pills-home-tab"
data-toggle="pill"
href="#v-pills-home"
role="tab"
aria-controls="v-pills-home"
aria-selected="true"
>生日蛋糕</a
>
<a
class="nav-link"
id="v-pills-profile-tab"
data-toggle="pill"
href="#v-pills-profile"
role="tab"
aria-controls="v-pills-profile"
aria-selected="false"
>节令产品</a
>
<a
class="nav-link"
id="v-pills-messages-tab"
data-toggle="pill"
href="#v-pills-messages"
role="tab"
aria-controls="v-pills-messages"
aria-selected="false"
>就会点心</a
>
<a
class="nav-link"
id="v-pills-settings-tab"
data-toggle="pill"
href="#v-pills-settings"
role="tab"
aria-controls="v-pills-settings"
aria-selected="false"
>特色面包</a
>
</div>
</div>
<!-- 导航内容 -->
<div class="col-sm-10">
<div class="tab-content" id="v-pills-tabContent">
<div
class="tab-pane fade show active"
id="v-pills-home"
role="tabpanel"
aria-labelledby="v-pills-home-tab"
>
<div class="row">
<!-- 大屏下列宽为3(四列)，小于sm后列宽为6(两列) -->
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic13.jpg" />
<div class="tab-title">生日蛋糕</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic14.jpg" />
<div class="tab-title">生日蛋糕</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic5.jpg" />
<div class="tab-title">生日蛋糕</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic6.jpg" />
<div class="tab-title">生日蛋糕</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic12.jpg" />
<div class="tab-title">生日蛋糕</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic8.jpg" />
<div class="tab-title">生日蛋糕</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic9.jpg" />
<div class="tab-title">生日蛋糕</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic10.jpg" />
<div class="tab-title">生日蛋糕</div>
</div>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="v-pills-profile"
role="tabpanel"
aria-labelledby="v-pills-profile-tab"
>
<div class="row">
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic11.jpg" />
<div class="tab-title">节令产品</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic12.jpg" />
<div class="tab-title">节令产品</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic13.jpg" />
<div class="tab-title">节令产品</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic14.jpg" />
<div class="tab-title">节令产品</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic15.jpg" />
<div class="tab-title">节令产品</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic3.jpg" />
<div class="tab-title">节令产品</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic5.jpg" />
<div class="tab-title">节令产品</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic10.jpg" />
<div class="tab-title">节令产品</div>
</div>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="v-pills-messages"
role="tabpanel"
aria-labelledby="v-pills-messages-tab"
>
<div class="row">
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic12.jpg" />
<div class="tab-title">就会点心</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic11.jpg" />
<div class="tab-title">就会点心</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic6.jpg" />
<div class="tab-title">就会点心</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic8.jpg" />
<div class="tab-title">就会点心</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic9.jpg" />
<div class="tab-title">就会点心</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic2.jpg" />
<div class="tab-title">就会点心</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic10.jpg" />
<div class="tab-title">就会点心</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic8.jpg" />
<div class="tab-title">就会点心</div>
</div>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="v-pills-settings"
role="tabpanel"
aria-labelledby="v-pills-settings-tab"
>
<div class="row">
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic15.jpg" />
<div class="tab-title">特色面包</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic14.jpg" />
<div class="tab-title">特色面包</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic5.jpg" />
<div class="tab-title">特色面包</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic8.jpg" />
<div class="tab-title">特色面包</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic7.jpg" />
<div class="tab-title">特色面包</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic6.jpg" />
<div class="tab-title">特色面包</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic2.jpg" />
<div class="tab-title">特色面包</div>
</div>
</div>
<div class="col-6 col-sm-3">
<div class="img-thumbnail">
<img src="images/pic14.jpg" />
<div class="tab-title">特色面包</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="newArrival">
<div class="new-product">
<!--Bootstrap 列表组-->
<div class="list-group">
<div class="list-group-item active">
<h4 class="list-group-item-heading">新品上市</h4>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="list-group-item">
<h4 class="list-group-item-heading">风味多样</h4>
<p class="list-group-item-text">
地域广阔的中华民族，由于各地气候、物产、风俗习惯的差异，自古以来，中华饮食上就形成了许多各不相同的菜系。<br />
就地方划分而言，有巴蜀、淮扬、齐鲁、粤闽四大菜系之分。
</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">四季有别</h4>
<p class="list-group-item-text">
一年四季，按季节而调配饮食，是中国烹饪的主要特征。<br />
中国一直遵循按季节调味、配菜，冬则味醇浓厚，夏则清淡凉爽。冬多炖焖煨，夏多凉拌冷冻。各种菜蔬更是四时更替，适时而食。
</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">注重情趣</h4>
<p class="list-group-item-text">
中国烹饪自古以来就注重品味情趣，不仅对饭菜点心的色、香、味、形、器和质量、营养有严格的要求，而且在菜肴的命名、品味的方式、时间的选择、进餐时的节奏、娱乐的穿插等都有一定雅致的要求，立意新颖，风趣盎然。
</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 row margin-top-40">
<!--Bootstrap 缩略图-->
<div class="col-xs-12 col-md-6">
<img src="images/pic5.jpg" class="img-thumbnail" />
</div>
<div class="col-xs-12 col-md-6">
<img src="images/pic2.jpg" class="img-thumbnail" />
</div>
<div class="col-xs-12 col-md-6">
<img src="images/pic3.jpg" class="img-thumbnail" />
</div>
<div class="col-xs-12 col-md-6">
<img src="images/pic4.jpg" class="img-thumbnail" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="customerReviews">
<div class="product">
<!--Bootstrap 弹出框（Popover）插件-->
<h2 class="title">
<button
type="button"
class="btn btn-primary"
title="温馨提醒"
data-container="body"
data-toggle="popover"
data-placement="top"
data-content="请查看顶部的联系方式！"
>
马上订购（ 点击显示提示信息 ）
</button>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-4">
<!--Bootstrap Well-->
<div class="card bg-light text-dark">
<div class="card-body">宣传视频</div>
</div>
<!--插入视频-->
<video id="video" src="images/video.mp4" controls="controls"></video>
<!--Bootstrap 多媒体对象-->
<div class="media">
<a class="pull-left" href="JavaScript:void(0)"> </a>
<div class="media-body">
<h6 class="media-heading">健康又好吃</h6>
轻实训-美食网注重品味情趣，不仅对饭菜点心的色、香、味、形、器和质量、营养有严格的要求。
</div>
</div>
<div class="media">
<a class="pull-left" href="JavaScript:void(0)">
<img
class="media-object rounded-circle"
src="images/img1.jpg"
alt="媒体对象"
/>
</a>
<div class="media-body">
<h6 class="media-heading">点赞</h6>
轻实训-美食网注重品味情趣，不仅对饭菜点心的色、香、味、形、器和质量、营养有严格的要求。
<div class="media">
<a class="pull-left" href="JavaScript:void(0)">
<img
class="media-object rounded-circle"
src="images/img2.jpg"
alt="媒体对象"
/>
</a>
<div class="media-body">
<h6 class="media-heading">我也点赞</h6>
对饭菜点心的色、香、味、形、器和质量、营养的严格要求点赞
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<img src="images/pic1.jpg" class="img-thumbnail" />
</div>
<div class="col-xs-12 col-sm-4">
<div id="accordion">
<div class="card">
<div class="card-header">
<a
class="card-link"
data-toggle="collapse"
href="#collapseOne"
>
广东菜系，简称粤菜
</a>
</div>
<div
id="collapseOne"
class="collapse show"
data-parent="#accordion"
>
<div class="card-body">
【特色】：它以选料广泛，讲究鲜、嫩、爽、滑、浓为主要特点。它主要由广东菜、潮州菜和东江菜组成。
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a
class="collapsed card-link"
data-toggle="collapse"
href="#collapseTwo"
>
山东菜系，简称鲁菜
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
【特色】：选料精细、刀法细腻，注重实惠，花色多样，善用葱姜。
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a
class="collapsed card-link"
data-toggle="collapse"
href="#collapseThree"
>
江苏菜系，简称苏菜
</a>
</div>
<div
id="collapseThree"
class="collapse"
data-parent="#accordion"
>
<div class="card-body">
【特色】：制作精细，因材施艺、四季有别，浓而不腻，味感清鲜，讲究造型。
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a
class="collapsed card-link"
data-toggle="collapse"
href="#collapseFour"
>
浙江菜系，简称浙菜
</a>
</div>
<div
id="collapseFour"
class="collapse"
data-parent="#accordion"
>
<div class="card-body">
【特色】：浙菜的四方风味既各有特长，又具有共同的四个特点：选料讲究，烹饪独到，注重本味，制作精细，就是做到“细、特、鲜、嫩”4条原则。
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="contactUs">
<div class="product">
<h2 class="title">
<span>
<button
class="btn btn-primary"
data-toggle="modal"
data-target="#modal"
>
在线留言（ 点击弹出留言窗口 ）
</button>
</span>
</h2>
</div>
<!-- 留言板模态框（Modal） -->
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">在线留言</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<!--Bootstrap 表单-->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-md-2 control-label"
>昵称</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="name"
placeholder="请输入名字"
/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">性别</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input
type="radio"
name="gender"
id="male"
value="男"
checked
/>
男
</label>
<label class="checkbox-inline">
<input
type="radio"
name="gender"
id="female"
value="女"
/>
女
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">喜好</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" id="chuan" value="川菜" />
川菜
</label>
<label class="checkbox-inline">
<input type="checkbox" id="yu" value="豫菜" /> 豫菜
</label>
<label class="checkbox-inline">
<input type="checkbox" id="yue" value="粤菜" />粤菜
</label>
<label class="checkbox-inline">
<input type="checkbox" id="lu" value="鲁菜" /> 鲁菜
</label>
<label class="checkbox-inline">
<input type="checkbox" id="su" value="苏菜" /> 苏菜
</label>
<label class="checkbox-inline">
<input type="checkbox" id="zhe" value="浙菜" />浙菜
</label>
</div>
</div>
<div class="form-group">
<label for="taste" class="col-md-2 control-label"
>口味</label
>
<div class="col-sm-10">
<select multiple id="taste" class="form-control">
<option>甜</option>
<option>酸</option>
<option>辣</option>
<option>苦</option>
</select>
</div>
</div>
<div class="form-group">
<label for="city" class="col-md-2 control-label"
>住处</label
>
<div class="col-sm-10">
<select id="city" class="form-control">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="武汉">武汉</option>
<option value="南京">南京</option>
<option value="杭州">杭州</option>
<option value="浙江">浙江</option>
<option value="苏州">苏州</option>
</select>
</div>
</div>
<div class="form-group">
<label for="content" class="col-md-2 control-label"
>内容</label
>
<div class="col-sm-10">
<textarea
id="content"
class="form-control"
rows="3"
></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
取消
</button>
<button
type="button"
class="btn btn-primary"
data-dismiss="modal"
id="submit"
>
留言
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="overlay"></div>
<div class="container">
<!--Bootstrap 网格系统-->
<div class="col-xs-12 col-sm-12 footer-bj row">
<div class="col-xs-3 col-sm-3">
<img src="images/logo.png" />
<strong>轻实训-美食网</strong>
</div>
<div class="col-xs-9 col-sm-9 row">
<ul class="col-4 col-sm-3">
<li>网站首页</li>
<li>最新产品</li>
<li>美味蛋糕</li>
</ul>
<ul class="col-4 col-sm-3">
<li>新品上市</li>
<li>客户点评</li>
<li>联系我们</li>
</ul>
<ul class="col-4 col-sm-3">
<li>友情链接</li>
<li>友情链接</li>
<li>友情链接</li>
</ul>
<ul class="col-4 col-sm-3">
<li>友情链接</li>
<li>友情链接</li>
<li>友情链接</li>
</ul>
</div>
</div>
</div>
</div>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
1250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
