html+css网页设计 喜茶官网1个页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/89719244
2，点击上方下载
目录1
项目视频
html+css网页设计 喜茶官网1个页面
页面1
代码展示
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>喜茶HEYTEA--唯一官网</title>
<link rel="stylesheet" href="./style.css">
<script src="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"></script>
<link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.css" rel="stylesheet">
</head>
<body>
<div class="clearfix" style="position: relative">
<div class="header">
<div class="logo"><img src="./img/logo_2.png" alt=""></div>
<ul class="nav-list">
<li><a href="">关于喜茶</a></li>
<li><a href="">灵感之茶</a></li>
<li><a href="">所有门店</a></li>
</ul>
<div class="ic">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weibo"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixinline"></use>
</svg>
</div>
</div>
<div class="banner_bg">
<img class="pc" src="./img/bg1.jpg" alt="">
</div>
</div>
<div class="about-con clearfix wow fadeIn animated">
<div class="a_txt wow fadeIn animated">
<h2 class="title ntFont">WHO ARE WE? </h2>
<p class="txt_con" style="padding: 0 20px">
2012年，喜茶
<span class="ntFont">HEYTEA</span>
起源于江边里的一条小巷，原名皇茶
<span class="ntFont">ROYALTEA</span>
为了与层出不穷的山寨品牌区分开来，故全面升级为注册品牌喜茶
<span class="ntFont">HEYTEA</span>
。
</p>
<p class="txt_con">喜茶为芝士现泡茶的原创者。自创立以来，喜茶专注于呈现来自世界各地的优质茶香， 让茶饮这一古老文化焕发出新的生命力。</p>
</div>
<a href="" class="btn a_btn">了解更多</a>
<div class="erweimabox wow zoomIn animated">
<div class="l-erweima">
<img src="./img/wxerweima2.jpg" alt="">
<p>微信WeChat</p>
</div>
<div class="l-erweima">
<img src="./img/weiboerweima2.jpg" alt="">
<p>微博Weibo</p>
</div>
<div class="l-erweima">
<img src="./img/QRcode.jpg" alt="">
<p>喜茶Go</p>
</div>
<div class="l-erweima">
<img src="./img/instagram.png" alt="">
<p>instagram</p>
</div>
</div>
</div>
<div class="prod prod_1">
<div class="prod_con">
<div class="prod_txt wow fadeIn">
<h2>原创芝士茗茶</h2>
<div class="pc_show">
<p>将咸芝士与天然茶香融合的“奇思妙想”为喜茶原创。备受消费者推崇的原创芝士茗茶系列</p>
<p>选用进口新西兰乳源浓醇芝士，口感绵密，层层叠进搭配幽香清醇的茶香，两者相交衬托，妙不可言</p>
</div>
</div>
<div class="pro_box wow fadeIn animated">
<div class="pro_line wow fadeIn animated"></div>
<div class="sz wow animated"></div>
<div class="yz1 wow animated fadeIn"></div>
<div class="yz2 wow animated fadeIn"></div>
</div>
</div>
</div>
<div class="prod prod_2">
<div class="prod_con">
<div class="pro_box wow fadeIn animated"></div>
<div class="prod_txt wow fadeIn animated">
<h2>鲜茶水果系列</h2>
<p>
清甜饱满的鲜茶水果系列的推出
<br>
旨在让顾客可以享受水果与好茶结合的美妙口感
</p>
<p>
精选优质茶叶为茶底，以天然糖分温润中和
<br>
诠释出清爽丰富的口感
</p>
</div>
<div class="pro_box2 wow fadeInRight animated">
<div class="sw wow pulse animated"></div>
</div>
</div>
</div>
<div class="prod prod_3">
<div class="prod_con">
<div class="prod_txt wow fadeIn animated">
<h2>轻芝士茗茶系列</h2>
<p>
将新西兰进口芝士与鲜奶精心配比
<br>
创造出口感绝佳的轻盈质地
</p>
<p>恬淡矜持，丰盈却不腻人，轻负担之选</p>
</div>
<div class="pro_box"></div>
<div class="pro_box2 wow fadeIn animated"></div>
<div class="pro_box3 wow fjani animated"></div>
</div>
</div>
<div class="prod prod_4">
<div class="prod_con">
<div class="prod_txt wow fadeIn animated">
<h2>当季水果限定系列</h2>
<p>
四季轮替，每个季节都有其独特的气质及产物
<br>
为了呈现当季最新鲜的风味，喜茶推出季节限定茶饮系列
</p>
<p>选用鲜果搭配定制茶底，果香融入茶韵，让人心生雀跃</p>
</div>
<div class="pro_box wow fadeIn animated"></div>
<div class="pro_box2 wow fadeIn animated"></div>
<div class="pro_box3 wow fadeIn animated"></div>
</div>
</div>
<div class="store_box clearfix" id="store">
<h1 class="title ntFont" id="storeList">STORE</h1>
<div id="storeCon" class="clearfix">
<div class="store_list wow slideInUp ire animated">
<h2 class="store_area">杭州市</h2>
<ul class="store_item clearfix">
<li data-x="30.248485" data-y="120.213354" data-content="来福士茶空间店">来福士茶空间店</li>
<li data-x="30.252900" data-y="120.162850" data-content="湖滨银泰黑金店">湖滨银泰黑金店</li>
<li data-x="30.253060" data-y="120.215070" data-content="杭州万象城店">杭州万象城店</li>
<li data-x="30.20746" data-y="120.20947" data-content="星光大道茶空间店">星光大道茶空间店</li>
<li data-x="30.299943" data-y="120.106603" data-content="杭州城西银泰城店">杭州城西银泰城店</li>
<li data-x="30.309944" data-y="120.326198" data-content="杭州金沙天街茶空间店">杭州金沙天街茶空间店</li>
<li data-x="30.253979" data-y="120.164664" data-content="杭州工联CC店">杭州工联CC店</li>
<li data-x="30.247427" data-y="120.048719" data-content="西溪印象城DP店">西溪印象城DP店</li>
<li data-x="30.269549" data-y="120.162445" data-content="杭州国大广场热麦店">杭州国大广场热麦店</li>
<li data-x="30.170842" data-y="120.268064" data-content="杭州萧山银隆店">杭州萧山银隆店</li>
<li data-x="30.404601" data-y="120.302932" data-content="杭州临平银泰城店">杭州临平银泰城店</li>
</ul>
</div>
</div>
<div class="tipsBox clearfix wow slideInUp animated">
<img class="yzsm" src="./img/yzsm.png" alt="">
<p>
•目前我们旗下仅有「喜茶」和「喜茶热麦」两个品牌,除此之外所有与此类似或者添加前后缀的品牌均与我们无关。我司拥有「喜茶HEYTEA」与「喜茶热麦」的完整商标权，对于任何企业或个人侵犯喜茶注册商标专用权的行为，我们都将予以打击，并追究相关主体的法律责任。
</p>
<p>
•喜茶真的不做任何形式的加盟及代理，网上关于加盟及代理的信息均为诈骗。你搜到的所有加盟官网都是假的，请大家谨防上当受骗。除此之外，其他打着喜茶名义运营的网站均与我们无关。请认准喜茶唯一官网：
<span class="ntFont">www.heytea.com</span>
</p>
</div>
</div>
<div class="swiper-container swiper-container-horizontal swiper-container-autoheight">
<div class="swiper-wrapper" style="height: 753px;">
<div class="swiper-slide">
<div class="swiper-slide swiper-slide-active" style="width: 1349px;">
<img src="./img/banner1.jpg">
<div class="swiper_txt ani fadeInUp animated" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.4s" swiper-animate-delay="0.1s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.4s;-webkit-animation-duration:0.4s;animation-delay:0.1s;-webkit-animation-delay:0.1s;">
<h3 class="title">喜茶北京三里屯黑金店</h3>
<p>
坐落于北京最著名的时尚地标三里屯太古里首层
<br>
毗邻苹果
<span class="ntFont">APPLE STORE</span>
，是北京第一家喜茶黑金主题店
<br>
店面设计从永恒的黑中汲取灵感
<br>
玩味摩登，在此展示我们对黑色的解读
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide swiper-slide-next" style="width: 1349px;">
<img src="./img/banner3.jpg">
<div class="swiper_txt ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.4s" swiper-animate-delay="0.1s" swiper-animate-style-cache=" " style="visibility: hidden;">
<h3 class="title">
<span class="ntFont">HEYTEA DP</span>
计划店
</h3>
<p>
在
<span class="ntFont">Heytea DP</span>
计划里，喜茶将与来自全球不同领域的独立设计师进行契合双方兴趣的跨界合作。深圳壹方城店为纳入Heytea DP计划的首家门店。
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide" style="width: 1349px;">
<img src="./img/banner2.jpg">
<div class="swiper_txt ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.4s" swiper-animate-delay="0.1s" swiper-animate-style-cache=" " style="visibility: hidden;">
<h3 class="title ntFont">HEYTEA PINK店</h3>
<p>
粉色终于也被纳入喜茶的设计语言。
<span class="ntFont">HEYTEA PINK</span>
店为热爱粉色的少女们，提供了一个幻想的空间。怀旧又新潮的粉色令人幻想，置身于大块的粉色中，在顽童和少女间自由切换，真诚而热烈，有一种不加掩饰的可爱。
</p>
</div>
</div>
</div>
</div>
<div class="swiper-button-prev swiper-button-white swiper-button-disabled"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
</div>
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
</body>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
