HTML5期末大作业：甜品蛋糕网站设计——甜品蛋糕网页设计(5页)
文章目录
- HTML5期末大作业：甜品蛋糕网站设计——甜品蛋糕网页设计(5页)
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>21cake</title>
</head>
<body>
<!-- 头部导航栏部分 start -->
<header>
<div class="inner">
<div class="logo">
<img src="picture/logo.png" width="120px" height="44px" alt="21cake 蛋糕官网">
</div>
<ul class="nav">
<li><a href="index.html">首页</a></li>
<li><a href="class.html">蛋糕</a></li>
<li><a href="class.html">面包</a></li>
<li><a href="class.html">冰淇淋</a></li>
<li><a href="class.html">咖啡下午茶</a></li>
<li><a href="class.html">全国送</a></li>
<li><a href="class.html">企业专区</a></li>
</ul>
<ul class="join">
<li><a href="#">APP下载</a></li>
<li><a href="#">北京</a><i class="city"></i></li>
<li><a href="#">消息</a></li>
<li><a href="login.html">登录</a>/<a href="register.html">注册</a></li>
<li class="cart"><i></i></li>
</ul>
</div>
</header>
<!-- 轮播图部分 -->
<div class="slider">
<img src="picture/slider-1.jpg" alt="">
</div>
<!-- 中间部分 start -->
<div class="content">
<div class="home-module home-menu">
<a href="#1">
<img src="picture/menu-1.jpg" alt="新品" title="新品">
</a>
<a href="#2">
<img src="picture/menu-2.jpg" alt="新品" title="新品">
</a>
<a href="#3">
<img src="picture/menu-3.jpg" alt="新品" title="新品">
</a>
<a href="#4">
<img src="picture/menu-4.jpg" alt="新品" title="新品">
</a>
<a href="#5">
<img src="picture/menu-5.png" alt="新品" title="新品">
</a>
</div>
<!-- 新品专区 start-->
<div class="home-module home-colorful" id="1">
<h4 class="home-module-title">
新品
<span>/</span>
<span>专区</span>
</h4>
<div class="colorful-top-banner">
<a href="#" target="_blank">
<img src="picture/menu-top-1.jpg" alt="">
</a>
</div>
<div class="colorful-product-list">
<div class="list-box">
<ul>
<li>
<a href="#">
<img src="picture/xinpin-cake-1.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<div class="tag-list">
<a href="">儿童 ></a>
<a href="">新品 ></a>
<a href="">生日 ></a>
</div>
<div class="cart-info">
<span class="spec">¥298.00/454g(1.0磅)</span>
<a href="" class="add-cart">加入购物车</a>
</div>
</li>
<li>
<a href="#">
<img src="picture/xinpin-cake-2.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<img src="picture/child-cake-2.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<div class="tag-list">
<a href="">儿童 ></a>
<a href="">新品 ></a>
<a href="">生日 ></a>
</div>
<div class="cart-info">
<span class="spec">¥298.00/454g(1.0磅)</span>
<a href="" class="add-cart">加入购物车</a>
</div>
</li>
<li>
<a href="#">
<img src="picture/child-cake-3.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<div class="tag-list">
<a href="">儿童 ></a>
<a href="">新品 ></a>
<a href="">生日 ></a>
</div>
<div class="cart-info">
<span class="spec">¥298.00/454g(1.0磅)</span>
<a href="" class="add-cart">加入购物车</a>
</div>
</li>
<li>
<a href="#">
<img src="picture/child-cake-4.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<div class="tag-list">
<a href="">儿童 ></a>
<a href="">新品 ></a>
<a href="">生日 ></a>
</div>
<div class="cart-info">
<span class="spec">¥298.00/454g(1.0磅)</span>
<a href="" class="add-cart">加入购物车</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 聚会专区 start-->
<div class="home-module home-colorful" id="4">
<h4 class="home-module-title">
聚会
<span>/</span>
<span>专区</span>
</h4>
<div class="colorful-top-banner">
<a href="#" target="_blank">
<img src="picture/menu-top-4.jpg" alt="">
</a>
</div>
<div class="colorful-product-list">
<div class="list-box">
<ul>
<li>
<a href="#">
<img src="picture/party-cake-1.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<div class="tag-list">
<a href="">儿童 ></a>
<a href="">新品 ></a>
<a href="">生日 ></a>
</div>
<div class="cart-info">
<span class="spec">¥298.00/454g(1.0磅)</span>
<a href="" class="add-cart">加入购物车</a>
</div>
</li>
<li>
<a href="#">
<img src="picture/party-cake-2.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<div class="tag-list">
<a href="">儿童 ></a>
<a href="">新品 ></a>
<a href="">生日 ></a>
</div>
<div class="cart-info">
<span class="spec">¥298.00/454g(1.0磅)</span>
<a href="" class="add-cart">加入购物车</a>
</div>
</li>
<li>
<a href="#">
<img src="picture/party-cake-3.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<div class="tag-list">
<a href="">儿童 ></a>
<a href="">新品 ></a>
<a href="">生日 ></a>
</div>
<div class="cart-info">
<span class="spec">¥298.00/454g(1.0磅)</span>
<a href="" class="add-cart">加入购物车</a>
</div>
</li>
<li>
<a href="#">
<img src="picture/party-cake-4.png" alt="">
</a>
<a href="#">
<h6>米道</h6>
</a>
<a href="">
<p>天真、天然，是这款蛋糕唯一的出发点</p>
</a>
<div class="tag-list">
<a href="">儿童 ></a>
<a href="">新品 ></a>
<a href="">生日 ></a>
</div>
<div class="cart-info">
<span class="spec">¥298.00/454g(1.0磅)</span>
<a href="" class="add-cart">加入购物车</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 活动门 start-->
<div class="home-module home-colorful" id="5">
<h4 class="home-module-title">
活动门
<span>/</span>
<span>是被吸引了吧</span>
</h4>
<ul class="active-content">
<li>
<a href="">
<img src="picture/active.jpg" alt="" class="lazy">
</a>
</li>
</ul>
</div>
<!-- 二一客 start-->
<div class="home-module home-colorful" id="6">
<h4 class="home-module-title">
廿一客
<span>/</span>
<span>文章</span>
<a href="">查看更多 ></a>
</h4>
<ul class="active-content">
<li>
<a href="">
<img src="picture/reader-1.jpg" alt="" class="lazy">
<h4>冬季刊·进博会</h4>
<p>
<span></span>
<span>阅读全文 >></span>
</p>
</a>
</li>
<li>
<a href="">
<img src="picture/reader-2.jpg" alt="" class="lazy">
<h4>廿一志秋刊·客服Q&A</h4>
<p>
<span></span>
<span>阅读全文 >></span>
</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 底部footer start -->
<footer>
<img class="footer-logo" src="picture/footer-logo.png" height="36" width="96" alt>
<div class="footer-nav">
<a href="#">联系我们</a>
<span>|</span>
<a href="#">订购帮助</a>
<span>|</span>
<a href="#">企业合作</a>
<span>|</span>
<a href="#">生产经营资质</a>
<span>|</span>
<a href="#">公告专区</a>
</div>
<div class="footer-icon">
<a class="footer-weixin">
<img src="picture/footericon-02.png">
</a>
</div>
<div class="footer-text">
<span>订购专线: xxxx-xxxxxxx (服务时间 08:00-22:00)，团购热线: xxx xxxx xxxx</span>
<span>客服电话:xxxx-xxxxxxx</span>
<span>请提前3小时预定，当日 20点 以后的订单，于次日 8点 后开始审核</span>
<span>当日蛋糕配送截至下单时间 20:00</span>
<span>店铺地址:xxxxxxxxxxxxxxxxxx</span>
</div>
<div class="footer-copy">
<span>Copyright© 信德利蛋糕官网商城 2007-2018, 版权所有 京ICP备14006254号-1</span>
</div>
</footer>
<!-- 底部footer end -->
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
