<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>奈雪の茶</title>
<link rel="stylesheet" type="text/css" href="../view/style.css" />
</head>
<body>
<header class="art_top">
<ul>
<li>
<h1>奈雪の茶</h1>
</li>
</ul>
</header>
<nav class="art-nav">
<ul>
<img src="../img/icon.png">
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于奈雪</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">投资者关系</a></li>
<li><a href="#">加盟合作</a></li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>奈雪の茶</title>
<link rel="stylesheet" type="text/css" href="../view/style.css" />
</head>
<body>
<header class="art_top">
<ul>
<li>
<h1>奈雪の茶</h1>
</li>
</ul>
</header>
<nav class="art-nav">
<ul>
<img src="../img/icon.png">
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于奈雪</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">投资者关系</a></li>
<li><a href="#">加盟合作</a></li>
</ul>
</nav>
<div class="banner">
<img src="../img/banner.jpg">
</div>
<div class="artlist">
<ul>
<li>
<div class="artist-title">
<p>冰爽果茶</p>
<p>更多</p>
<ul class="intr-list">
<li>
<div class="artist-intr">
<p>新鲜品茶: 黄桃果霸</p>
<p>奈雪的茶率先创造了一种全新的现代茶饮体验,
并在茶饮消费领域引起全国性轰动。根据灼识咨询的数
据,奈雪的茶首先在中国使用新鲜水果制备现制茶饮
,并首先在中国创新提出现制茶饮搭配烘焙产品的概念。</p>
</div>
<img class="firstImg" src="../img/202829941.jpg">
<img src="../img/03.webp">
<img src="../img/07.jpg">
<li>
<div class="drink">
<p>奈雪茗茶: 乌龙茶</p>
<p>为探索传统与创新融合的现代茶生活,奈雪茗茶还打造了极具意境的茶文化融合体验空间——奈雪茶院,让茶以更轻松多样的方式走近大众,将其独有的东方生活美学延伸至日常。</p>
</div>
<img src="../img/02.jpeg">
<img src="../img/05.jpg">
<img src="../img/06.jpg">
</li>
<!-- 重新写,先写大框,再填东西,不要靠内容撑起来,初学时父元素一定要有宽高 -->
<h2>畅销产品</h2>
<h3>Best Seller</h3>
<div class="box">
<ul>
<li>
<img src="../img/04.jpg">
<h4>一朵莲雪顶</h4>
</li>
<li>
<img src="../img/01.jpg">
<h4>龙井青团宝藏茶</h4>
</li>
<li>
<img src="../img/08.jpg">
<h4>奈雪樱花季</h4>
</li>
<li>
<img src="../img/09.jpg">
<h4>一杯龙井尽知春</h4>
</li>
<li>
<img src="../img/10.jpg">
<h4>奈雪果茶</h4>
</li>
<li>
<img src="../img/11.jpg">
<h4>霸气小王子&玫瑰草莓</h4>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- 一个效果出来再写下一个,从上到下写 -->
<div class="ban">
<img src="../img/wm.png">
<img src="../img/ban.png">
</div>
<footer>
<ul>
<li>奈雪の茶</li>
<li>
<h2>联系我们</h2>
<p>QQ: 9348348393</p>
<p>邮箱:@qq.com831289</p>
<p>地址:郑州市郑东新区龙子湖街道金水区36号</p>
</li>
</ul>
</footer>
</body>
</html>