大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 企业官网 星巴克2个页面
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/90219182
2，点击上方下载
目录1
项目视频
html+css+js网页设计 美食企业官网 星巴克2个页面
页面展示
页面1
页面2
代码展示
<body>
<div class="container-fluid">
<div class="row justify-content-end">
<!-- 左边导航栏 -->
<div class="col-lg-3 border-right leftContent bg-white position-fixed">
<!-- 导航区 -->
<header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
<a href="#" class="brand mr-3">
<img src="./images/logo.svg" alt="" width="36" />
</a>
<nav class="nav mr-auto">
<a href="#" class="nav-item text-dark font-weight-bold nav-link">门店</a>
<a href="#" class="nav-item text-dark font-weight-bold nav-link">我的帐户</a>
<a href="#" class="nav-item text-dark font-weight-bold nav-link">菜单</a>
</nav>
<a href="javascript:;">
<i class="iconfont text-metu icon-ego-menu" id="showBtn"></i>
</a>
</header>
<!-- 内容区 -->
<div class="content d-lg-flex align-items-center">
<div class="px-lg-5 mx-lg-5">
<h1 class="py-4 py-sm-0">关于星巴克</h1>
<div class="my_2 d-none d-sm-block"><a href="">星巴克在中国</a></div>
<div class="my_2 d-none d-sm-block"><a href="">合作机会</a></div>
<div class="my_2 d-none d-sm-block">
<a href="./work.html">工作机会</a>
</div>
<div class="my_2 d-none d-sm-block"><a href="">企业新闻</a></div>
<div class="my_2 d-none d-sm-block"><a href="">社会责任</a></div>
<div class="my_2 d-none d-sm-block"><a href="">历史回顾</a></div>
<div class="my_2 d-none d-sm-block"><a href="">信息公示</a></div>
<div class="my_2 d-none d-sm-block"><a href="">联系我们</a></div>
</div>
</div>
<!-- 弹出内容 -->
<div class="showView bg-white position-absolute d-flex flex-column justify-content-between hide">
<header class="navbar px-4">
<a href="#" class="brand mr-3">
<img src="./images/logo.svg" alt="" width="36" />
</a>
<a href="javascript:;">
<i class="iconfont text-metu icon-guanbi" id="hideBtn"></i>
</a>
</header>
<ul class="list mx-sm-5 p-0 pl-sm-5">
<li><a href="#" class="font-weight-bold text-dark d-block py-2">门店</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">星享俱乐部</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">菜单</a></li>
<hr />
<li><a href="#" class="font-weight-bold text-dark d-block py-2">星巴克移动应用</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">星礼卡</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">星巴克臻选™</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">啡快™ － 在线点 到店取</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">专星送™</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">咖啡星讲堂</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">上海烘焙工坊</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">关于星巴克</a></li>
<li><a href="#" class="font-weight-bold text-dark d-block py-2">帮助中心</a></li>
<hr />
<li>
<div class="my-3 d-none d-sm-block">
<a href="#" class="text-success d-inline-block mr-5">
<i class="iconfont icon-denglu"></i>
登陆
</a>
<a href="#" class="btn btn-outline-success btn-rounded d-inline-block px-4">注册</a>
</div>
</li>
</ul>
<footer>
<p class="mx-sm-5 pl-sm-5 pb-5">
<a href="#" class="d-inline-block font-weight-bold px-2">English</a> | <a href="#" class="d-inline-block font-weight-bold px-2">隐私政策</a> |
<a href="#" class="d-inline-block font-weight-bold px-2">使用条款</a>
</p>
</footer>
</div>
</div>
<!-- 右边内容区 -->
<div class="col-lg-9 text-left">
<!-- 轮播图区 -->
<div class="row">
<div class="col-12 p-0">
<div class="carousel slide" id="carousel" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="./images/kv1.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="img-fluid" src="./images/kv2.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="img-fluid" src="./images/kv3.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="img-fluid" src="./images/kv4.jpg" alt="" />
</div>
</div>
<a href="#carousel" class="carousel-control-prev" data-slide="prev">
<i class="iconfont icon-zuo"></i>
</a>
<a href="#carousel" class="carousel-control-next" data-slide="next">
<i class="iconfont icon-tubiaozhizuo-"></i>
</a>
<ul class="carousel-indicators">
<li class="active" data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ul>
</div>
</div>
</div>
<!-- 图片推荐区 -->
<div class="row py-4">
<div class="col-sm-4 mb-4 mb-sm-0">
<a href="#"><img src="images/img_01.jpg" alt="" class="fluid img-thumbnail" /></a>
</div>
<div class="col-sm-4 mb-4 mb-sm-0">
<a href="#"><img src="images/img_02.jpg" alt="" class="fluid img-thumbnail" /></a>
</div>
<div class="col-sm-4 mb-4 mb-sm-0">
<a href="#"><img src="images/img_03.jpg" alt="" class="fluid img-thumbnail" /></a>
</div>
</div>
<!-- 星享俱乐部 -->
<div class="row bg-white py-5 px-5 text-center star">
<div class="col-sm-4 py-2 px-5 text-sm-left ml-auto">
<h3 class="content-title mb-4">星享俱乐部</h3>
<p class="content-subtitle mb-5">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="#">了解更多 ›</a></p>
<div>
<button class="btn btn-outline-success btn-rounded px-4 mx-2">注册</button>
<button class="btn btn-outline-success btn-rounded px-4 mx-2">登陆</button>
</div>
</div>
<div class="col-sm-4 pt-5 pt-sm-0 d-flex align-items-center justify-content-center mr-auto">
<img src="images/logo-msr-new.svg" alt="" />
</div>
</div>
<!-- 星巴克精选 -->
<div class="tmall row py-5 text-center">
<div class="col-12">
<h4 class="content-title mt-2">星巴克精选</h4>
<p class="content-subtitle my-4">在星巴克天猫旗舰店发现更多咖啡心意</p>
</div>
<div class="col mt-5 pt-5">
<div class="row">
<div class="col-md-3 col-6 my-5 my-md-0">
<a href="#" class="bg-white d-inline-block pb-3 text-center rounded position-relative">
<img src="images/tmall-card-01.png" alt="" class="img-fluid" />
<h3 class="content-title">会员星礼包</h3>
<p class="content-subtitle">星享卡新升级<br />更多心意好礼</p>
<p class="caption">了解更多 ›</p>
</a>
</div>
<div class="col-md-3 col-6 my-5 my-md-0">
<a href="#" class="bg-white d-inline-block pb-3 text-center rounded position-relative">
<img src="images/tmall-card-02.png" alt="" class="img-fluid" />
<h3 class="content-title">星礼卡</h3>
<p class="content-subtitle">用一份心礼<br />让心意相随</p>
<p class="caption">了解更多 ›</p>
</a>
</div>
<div class="col-md-3 col-6 my-5 my-md-0">
<a href="#" class="bg-white d-inline-block pb-3 text-center rounded position-relative">
<img src="images/tmall-card-03.png" alt="" class="img-fluid" />
<h3 class="content-title">电子产品券</h3>
<p class="content-subtitle">心意<br />从这一杯开始</p>
<p class="caption">了解更多 ›</p>
</a>
</div>
<div class="col-md-3 col-6 my-5 my-md-0">
<a href="#" class="bg-white d-inline-block pb-3 text-center rounded position-relative">
<img src="images/tmall-card-04.png" alt="" class="img-fluid" />
<h3 class="content-title">咖啡生活</h3>
<p class="content-subtitle">星巴克<br />用心制作</p>
<p class="caption">了解更多 ›</p>
</a>
</div>
</div>
</div>
</div>
<!-- 咖啡星讲堂 -->
<div class="row bg-white pt-5 mb-5 mb-sm-0">
<div class="col-12 text-center">
<h4 class="content-title mt-2">1912 派克街 | 咖啡星讲堂</h4>
<p class="content-subtitle my-4">了解更多星巴克咖啡文化</p>
</div>
<div class="col scroll-wrapper">
<div class="row">
<div class="col-md-3 col-6 my-5 my-md-0">
<div class="card rounded">
<img src="images/scroll_img_01.jpg" alt="" class="card-img-top img-fluid" />
<div class="card-body">
<p class="mb-0">咖啡的起源与培植</p>
</div>
<span class="text-white position-absolute">咖啡知识</span>
</div>
</div>
<div class="col-md-3 col-6 my-5 my-md-0">
<div class="card rounded">
<img src="images/scroll_img_02.jpg" alt="" class="card-img-top img-fluid" />
<div class="card-body">
<p class="mb-0">咖啡的起源与培植</p>
</div>
<span class="text-white position-absolute">咖啡调制</span>
</div>
</div>
<div class="col-md-3 col-6 my-5 my-md-0">
<div class="card rounded">
<img src="images/scroll_img_03.jpg" alt="" class="card-img-top img-fluid" />
<div class="card-body">
<p class="mb-0">咖啡的起源与培植</p>
</div>
<span class="text-white position-absolute">咖啡烘培</span>
</div>
</div>
<div class="col-md-3 col-6 my-5 my-md-0">
<div class="card rounded">
<img src="images/scroll_img_04.jpg" alt="" class="card-img-top img-fluid" />
<div class="card-body">
<p class="mb-0">咖啡的起源与培植</p>
</div>
<span class="text-white position-absolute">咖啡品鉴</span>
</div>
</div>
</div>
</div>
<div class="col-12 footer mb-5 mb-sm-0">
<p class="text-center mt-5">
<img src="images/icpicon.png" alt="" />
<a href="#" class="d-inline-block font-weight-bold px-2">沪公网安备31010402000253号</a> |
<a href="#" class="d-inline-block font-weight-bold px-2">沪ICP备17003747号</a>
</p>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-nav">
<ul class="d-sm-none bg-white mb-0 d-flex justify-content-around text-center p-0">
<li class="active">
<i class="iconfont d-block icon-shouye"></i>
<span>首页</span>
</li>
<li>
<i class="iconfont d-block icon-mendian"></i>
<span>门店</span>
</li>
<li>
<i class="iconfont d-block icon-weibiaoti5"></i>
<span>我的账户</span>
</li>
<li>
<i class="iconfont d-block icon-caidan"></i>
<span>菜单</span>
</li>
<li>
<i class="iconfont d-block icon-gengduo"></i>
<span>更多</span>
</li>
</ul>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
<script src="js/index.js"></script>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
