目录
第1关 使用flex布局实现Educoder顶部导航栏容器布局
使用 HTML/CSS 实现 Educoder 顶部导航栏
第1关 使用flex布局实现Educoder顶部导航栏容器布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Educoder</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="step1/verify.js"></script>
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.color-white {
color: white;
}
/*********** Begin ************/
.container {
height: 60px;
display: flex;
justify-content: space-between;
}
/*********** End ************/
</style>
<body>
<div class="container">
<header style="background: #24292D; min-width:1200px;">
<div class="left-wrap color-white">左边容器</div>
<div class="right-wrap color-white">右边容器</div>
</header>
</div>
</body>
</html>第2关 实现左侧文字导航列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Educoder</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="step2/verify.js"></script>
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.container {
min-width: 1200px;
}
.flex {
display: flex;
}
.full-height {
height: 100%;
}
header {
background: #24292D;
height: 60px;
justify-content: space-between;
padding: 0 25px;
}
header>div {
height: 100%;
display: flex;
align-items: center;
}
/*********** Begin ************/
.logo-block {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
width: 40px;
height: 38px;
margin-right: 30px;
}
.menu-item {
color: #ffffff;
font-size: 16px;
width: 64px;
height: 100%;
display: flex;
align-items: center;
margin-right: 30px;
position: relative;
}
.hot {
position: absolute;
top: 10px;
right: -22px;
}
/*********** End ************/
</style>
<body>
<div class="container">
<header class="flex">
<div class="left-wrap">
<!--********** Begin **********-->
<div class="logo-block">
<img src="https://data.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
</div>
<div class="menu-block full-height flex">
<div class="menu-item"><span>实践课程</span></div>
<div class="menu-item"><span>翻转课堂</span></div>
<div class="menu-item"><span>实训项目</span></div>
<div class="menu-item">
<span>在线竞赛<img class="hot" src="https://img-blog.csdnimg.cn/2022010612112358534.png"></span>
</div>
<div class="menu-item"><span>教学案例</span></div>
<div class="menu-item"><span>交流问答</span></div>
</div>
<!--********** End **********-->
</div>
<div class="right-wrap">
</div>
</header>
</div>
</body>
</html>第3关 实现右侧功能图标排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Educoder</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="step3/verify.js"></script>
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.container {
min-width: 1200px;
}
.flex {
display: flex;
}
.full-height {
height: 100%;
}
header {
background: #24292D;
height: 60px;
justify-content: space-between;
padding: 0 25px;
}
header > div {
height: 100%;
display: flex;
align-items: center;
}
.logo-block {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
width: 40px;
height: 38px;
margin-right: 30px;
}
.menu-item {
color: #ffffff;
font-size: 16px;
width: 64px;
height: 100%;
display: flex;
align-items: center;
margin-right: 30px;
position: relative;
cursor: pointer;
}
.hot {
position: absolute;
top: 10px;
right: -22px;
}
.icon-item {
height: 100%;
width: 48px;
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
}
.user {
width: 34px;
height: 34px;
margin-left: 15px;
cursor: pointer;
}
/*********** Begin ************/
.active{
color: #459be5;
}
.active:after{
content: '';
position: absolute;
height: 2px;
bottom: -10px;
left: 0;
width: 14px;
background-color: #459be5;
}
/*********** End ************/
</style>
<body>
<div class="container">
<header class="flex">
<div class="left-wrap">
<div class="logo-block">
<img src="https://data.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
</div>
<div class="menu-block full-height flex">
<div class="menu-item"><span class="active">实践课程</span></div>
<div class="menu-item"><span>翻转课堂</span></div>
<div class="menu-item"><span>实训项目</span></div>
<div class="menu-item"><span>在线竞赛<img class="hot"
src="https://img-blog.csdnimg.cn/2022010614485797198.png"></span>
</div>
<div class="menu-item"><span>教学案例</span></div>
<div class="menu-item"><span>交流问答</span></div>
</div>
</div>
<div class="right-wrap">
<div class="icon-list full-height flex">
<div class="icon-item"><img src="https://www.educoder.net/api/attachments/411643" alt=""></div>
<div class="icon-item"><img src="https://www.educoder.net/api/attachments/411644" alt=""></div>
<div class="icon-item"><img src="https://www.educoder.net/api/attachments/411645" alt=""></div>
</div>
<img class="user" src="https://www.educoder.net/images/avatars/User/b?t=1569204859650" alt="">
</div>
</header>
</div>
</body>
</html>
第4关 实现左侧鼠标悬停效果与选中状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Educoder</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="step4/verify.js"></script>
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.container {
min-width: 1200px;
}
.flex {
display: flex;
}
.full-height {
height: 100%;
}
header {
background: #24292D;
height: 60px;
justify-content: space-between;
padding: 0 25px;
}
header > div {
height: 100%;
display: flex;
align-items: center;
}
.logo-block{
display: flex;
align-items: center;
justify-content: center;
}
.logo {
width: 40px;
height: 38px;
margin-right: 30px;
}
.menu-item {
color: #ffffff;
font-size: 16px;
width: 64px;
height: 100%;
display: flex;
align-items: center;
margin-right: 30px;
position: relative;
cursor: pointer;
}
.hot {
position: absolute;
top: 10px;
right: -22px;
}
.icon-item {
height: 100%;
width: 48px;
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
}
.user {
width: 34px;
height: 34px;
margin-left: 15px;
cursor: pointer;
}
/*********** Begin ************/
.menu-item:hover {
opacity: .7;
}
.active {
position: relative;
color: #459be5;
}
.active:after {
position: absolute;
content: ' ';
width: 14px;
height: 2px;
background: #459be5;
bottom: -10px;
left: 0;
}
/*********** End ************/
</style>
<body>
<div class="container">
<header class="flex">
<div class="left-wrap">
<div class="logo-block">
<img src="https://www.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
</div>
<div class="menu-block full-height flex">
<div class="menu-item"><span class="active">实践课程</span></div>
<div class="menu-item"><span>翻转课堂</span></div>
<div class="menu-item"><span>实训项目</span></div>
<div class="menu-item"><span>在线竞赛<img class="hot" src="https://img-blog.csdnimg.cn/2022010612112358534.png"></span></div>
<div class="menu-item"><span>教学案例</span></div>
<div class="menu-item"><span>交流问答</span></div>
</div>
</div>
<div class="right-wrap">
<div class="icon-list full-height flex">
<div class="icon-item"><img src="https://www.educoder.net/api/attachments/411643" alt=""></div>
<div class="icon-item"><img src="https://www.educoder.net/api/attachments/411644" alt=""></div>
<div class="icon-item"><img src="https://www.educoder.net/api/attachments/411645" alt=""></div>
</div>
<img class="user" src="https://www.educoder.net/images/avatars/User/b?t=1569204859650" alt="">
</div>
</header>
</div>
</body>
</html>html网页综合项目实战
第1关 header——头部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>少儿教育</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
color: #888888;
text-decoration: none;
font-size: 16px;
}
body {
background: #fff;
position: relative;
}
#top{
width: 80%;
margin: 0 auto;
}
.bg-header {
border-bottom: 1px solid #eee;
}
/********* Begin **********/
#top .logo {
width: 120px;
height: 50px;
margin-top: 11px;
/*向左浮动*/
float:left;
}
#top .head-list {
/*向右浮动*/
float:right;
}
#top .head-list li {
padding: 0 20px;
/*垂直居中，高度为74px*/
line-height:74px;
/*向左浮动*/
float:left;
}
/********* End *********/
#top .head-list li a:hover {
color: #333;
text-decoration: underline;
}
</style>
</head>
<body>
<header class="bg-top">
<div id="top" class="clearfix">
<img src="https://www.educoder.net/api/attachments/196816" alt="logo" class="logo" />
<ul class="head-list">
<li>
<a href="javascript:void;">首页</a>
</li>
<li>
<a href="javascript:void;">班级设置</a>
</li>
<li>
<a href="javascript:void;">师资团队</a>
</li>
<li>
<a href="javascript:void;">童画日记</a>
</li>
<li>
<a href="javascript:void;">关于我们</a>
</li>
<li>
<a href="javascript:void;">联系我们</a>
</li>
</ul>
</div>
</header>
</body>
</html>
第2关 用Swiper实现轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>少儿教育</title>
<link rel="stylesheet" href="step2/swiper.min.css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
color: #888;
text-decoration: none;
font-size: 16px;
}
body {
background: #fff;
position: relative;
}
.swiper-container {
width: 100%;
height: 280px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-------- Begin --------->
<!-- swiper最大的容器类-->
<div class="swiper-container">
<!-- 图片容器类-->
<div class=" swiper-wrapper">
<!--------- End ---------->
<div class="swiper-slide">
<img src="https://www.educoder.net/api/attachments/198516" alt="轮播图1" />
</div>
<div class="swiper-slide">
<img src="https://www.educoder.net/api/attachments/198517" alt="轮播图2" />
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<script src="step2/swiper.min.js"></script>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
//------------- Begin ------------
//开启loop模式，设置图片为循环播放
loop:true,
//自动切换的时间为1.5秒
autoplay: 1500,
//-------------- End ------------
speed: 1000,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplayDisableOnInteraction: false,
});
</script>
</body>
</html>
第3关 用CSS3实现移动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>少儿教育</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
color: #888888;
text-decoration: none;
font-size: 16px;
}
body {
background: #f7f7f7;
position: relative;
}
#nav {
width: 100%;
margin: 0 auto;
padding: 40px 0;
}
#nav .nav-item {
width: 21%;
height: auto;
text-align: center;
color: #ff7415;
padding-top: 10px;
float: left;
transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
#nav .nav-item:not(:last-child) {
margin-right: 28px;
}
#nav .nav-item:hover {
border: 1px solid #FF7415;
}
/*---------- Begin -----------*/
#nav .nav-item:hover .nav-info {
/*向上移动10px*/
transform:translate(0,-10px)
}
#nav .nav-item .nav-info {
/*给所有属性添加0.3s的 平滑过滤效果(linear),不考虑兼容性*/
transition:all 0.3s linear;
}
/*------------ End --------------*/
#nav .nav-item img {
width: 64px;
height: 64px;
margin: 20px auto;
}
#nav .nav-item .nav-title {
font-size: 22px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div id="nav">
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198536" alt="cecorate" />
<p class="nav-title">儿童装饰画</p>
<p>装饰</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198538" alt="cecorate" />
<p class="nav-title">趣味素描</p>
<p>sketch</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198539" alt="cecorate" />
<p class="nav-title">漫画阅读</p>
<p>comic</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198537" alt="cecorate" />
<p class="nav-title">手工制作</p>
<p>manual</p>
</div>
</div>
</div>
</body>
</html>
第4关 用CSS3实现放大效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>少儿教育</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
color: #888888;
text-decoration: none;
font-size: 16px;
}
body {
background: #f7f7f7;
position: relative;
}
.diary-block {
width: 90%;
height: 360px;
margin:40px auto;
padding: 0px 40px;
}
.diary-item {
width: 26%;
float: left;
border: 1px solid #ccc;
}
.diary-item:not(:last-child) {
margin-right: 7%;
}
.diary-item .diary-img {
overflow: hidden;
}
/*----------- Begin ---------*/
.diary-item .diary-img img {
width: 100%;
height: 200px;
/*给img所有属性添加0.3s的平滑过渡效果(linear)*/
transition:all 0.3s linear;
}
.diary-item .diary-img img:hover {
/*缩放中心为center*/
transform-origin:center center;
/*放大倍数为1.1倍;*/
transform:scale(1.1,1.1);
}
/*--------- End ----------*/
.diary-item .diary-details {
height: 150px;
padding: 10px 30px;
color: #888;
}
.diary-item .diary-details p {
line-height: 26px;
}
.diary-item .diary-details .diary-describe {
height: 72px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="diary-block">
<div class="diary-item clearfix">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198656" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198657" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198658" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
</div>
</body>
</html>
第5关 完成一个版块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>少儿教育</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
color: #888888;
text-decoration: none;
font-size: 16px;
}
body {
background: #f7f7f7;
position: relative;
}
.diary-block {
width: 90%;
height: 450px;
padding: 0 40px;
margin: 40px auto;
}
.diary-item {
width: 26%;
float: left;
overflow: hidden;
/*---------- Begin ----------*/
/*设置圆角为20px*/
border-radius:20px 20px 20px 20px;
/*设置左边,右边,下边的外部阴影,
水平阴影和垂直阴影的值为10px,模糊距离为20px,颜色为#ccc */
box-shadow:10px 10px 20px #ccc,-10px 10px 20px #ccc;
}
/*---------- End ----------*/
.diary-item:not(:last-child) {
margin-right: 7%;
}
.diary-item .diary-img {
overflow: hidden;
}
.diary-item .diary-img img {
width: 100%;
height: 232px;
transition: all .3s ease-in;
}
.diary-item .diary-img img:hover {
transform-origin: center;
transform: scale(1.1);
}
.diary-item .diary-details {
height: 180px;
padding: 10px 30px;
color: #888;
}
.diary-item .diary-details p {
line-height: 26px;
}
.diary-item .diary-details .diary-describe {
height: 72px;
/*-------- Begin --------*/
/*自动隐藏文字*/
overflow:hidden;
/*文字隐藏后添加省略号*/
text-overflow:ellipsis;
/*-------- End ----------*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-top: 10px;
line-height: 24px;
}
</style>
</head>
<body>
<div class="diary-block">
<div class="diary-item clearfix">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198656" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198657" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198658" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
</div>
</body>
</html>
第6关 清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>少儿教育</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
color: #888888;
text-decoration: none;
font-size: 16px;
}
body {
background: #fff;
position: relative;
}
/*------------ Begin ------------*/
.clearfix:after{
/*设置伪类内容为空；高度为0 */
content: "";
height: 0;
/*设置它为一个不可见的块级元素；*/
display: block;
visibility: hidden;
/*清除两边的浮动*/
clear: both;
}
.clearfix{
zoom: 1;
}
/*------------- End -------------*/
#nav {
width: 100%;
margin: 0 auto;
padding: 40px 0;
background: #333;
}
#nav .nav-item {
width: 21%;
height: auto;
text-align: center;
color: #ff7415;
padding-top: 10px;
float: left;
transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
#nav .nav-item:not(:last-child) {
margin-right: 28px;
}
#nav .nav-item img {
width: 64px;
height: 64px;
margin: 20px auto;
}
#nav .nav-item .nav-title {
font-size: 22px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<!-------------- Begin -------------->
<!--添加清除浮动的类-->
<div class="clearfix"></div>
<div id="nav" >
<!-------------- End -------------->
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198536" alt="cecorate" />
<p class="nav-title">儿童装饰画</p>
<p>装饰</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198538" alt="cecorate" />
<p class="nav-title">趣味素描</p>
<p>sketch</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198539" alt="cecorate" />
<p class="nav-title">漫画阅读</p>
<p>comic</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198537" alt="cecorate" />
<p class="nav-title">手工制作</p>
<p>manual</p>
</div>
</div>
</div>
</body>
</html>
完整功能实例——图片网格动画特效
第1关 网格动画布局样式
<!DOCTYPE html>
<html lang="en">
<head>
<style>.a9e95c04a-cb92-45ad-9177-2c101993e792 body,html { width: 100%; height: 100%; display: flex;}.a9e95c04a-cb92-45ad-9177-2c101993e792 ul { margin: auto; width: 200px; height: 200px; display: flex; flex-wrap: wrap; flex-direction: column; gap: 12px;}.a9e95c04a-cb92-45ad-9177-2c101993e792 li { width: 30px; height: 30px; border-radius: 50%; background: #000; animation: move 2s linear}.a9e95c04a-cb92-45ad-9177-2c101993e792 @keyframes move { 60%, 100% { transform: translate(var(--end)); // background 为 var(--color)值 /***** Begin *****/ background: var(--color); /***** End *****/ }.a9e95c04a-cb92-45ad-9177-2c101993e792 </style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul>
<li style="--end: 150px; --color: red;"></li>
<!----- 第二个元素 --end 为 200px，--color 为blue ----->
<!----- Begin ----->
<li style="--end: 200px; --color: blue;"></li>
<!----- End ----->
<li style="--end: 120px; --color: green;"></li>
</ul>
</body>
</html>第2关 实现渐隐渐现的动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现渐隐渐现的动画效果</title>
<style>.ade5a3c97-1211-4371-878c-ef6fc175f350 img{// 动画淡入淡出效果 animation:fadenum，时间为 5秒animation:fadenum 5s 1;}.ade5a3c97-1211-4371-878c-ef6fc175f350 // 不透明度设置/***** Begin *****/@keyframes fadenum{ 0%{opacity: 1;}.ade5a3c97-1211-4371-878c-ef6fc175f350 100%{opacity: 0;}.ade5a3c97-1211-4371-878c-ef6fc175f350 /***** End *****/</style>
</head>
<body>
<img src="../tg.png">
</body>
</html>第3关 实现炫酷飞转的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<style>.a7e56fdd7-c92e-4fc9-b422-8752c27663d3 .img { width: 100px; height: 100px; animation: rotate 3s linear infinite; border-radius: 50%; -webkit-user-drag: none; }.a7e56fdd7-c92e-4fc9-b422-8752c27663d3 @keyframes rotate { // 0%旋转0deg /***** Begin *****/ 0% { transform: rotate(0deg); }.a7e56fdd7-c92e-4fc9-b422-8752c27663d3 /***** End *****/ // 100%旋转360deg /***** Begin *****/ 100% { transform: rotate(360deg); }.a7e56fdd7-c92e-4fc9-b422-8752c27663d3 /***** End *****/ }.a7e56fdd7-c92e-4fc9-b422-8752c27663d3 </style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img class="img" src="data:image/png;base64,xxx">
</body>
</html>完整网站实例——制作你自己的购物网站
第1关 搭建购物网站的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<!-- 快捷导航区域 -->
<div class="shortcut">
<div class="wrapper">
<ul>
<li><a href="#" class="login">请先登录</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">在线客服</a></li>
<li>
<a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a>
</li>
</ul>
</div>
</div>
<!-- 头部区域 -->
<!----- div 标签，class为 “header wrapper” ----->
<!----- Begin ----->
<div class="header wrapper">
<!----- End ----->
<!-- logo区域 -->
<div class="logo">
<h1><a href="#">小兔鲜儿</a></h1>
</div>
<!-- 导航区域 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">餐厨</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
</ul>
</div>
<!-- 搜索框 -->
<div class="sear">
<span class="iconfont icon-search"></span>
<input type="text" placeholder="搜一搜">
</div>
<!-- 购物车 -->
<div class="cart">
<a href="#">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</a>
</div>
</div>
<!-- banner区域 -->
<div class="banner">
<div class="wrapper">
<!-- 大图 -->
<ul class="pic">
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
<!-- 测导航 -->
<div class="subnav">
<ul>
<li>
<div>
<a href="#">生鲜</a>
<a href="#">水果</a>
<a href="#">蔬菜</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">美食</a>
<a href="#">面点</a>
<a href="#">干果</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">餐厨</a>
<a href="#">数码产品</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">电器</a>
<a href="#">床品</a>
<a href="#">四件套</a>
<a href="#">被枕</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">居家</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
<a href="#">辅食</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">洗护</a>
<a href="#">洗发</a>
<a href="#">洗护</a>
<a href="#">美妆</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">孕婴</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">服饰</a>
<a href="#">男装</a>
<a href="#">女装</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">杂货</a>
<a href="#">户外</a>
<a href="#">图书</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">品牌</a>
<a href="#">品牌制造</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<!-- 小圆点 -->
<ol>
<li class="active"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
</div>
</div>
<!-- 新鲜好物 -->
<!----- div 标签，class为 “goods wrapper” ----->
<!----- Begin ----->
<div class="goods wrapper">
<!----- End ----->
<div class="hd">
<div class="left">
<h2>新鲜好物</h2>
<p>新鲜出炉 品质靠谱</p>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods1.png" alt="">
</div>
<div class="text">
<h4>KN95级莫兰迪色防护口罩</h4>
<p>¥<span>79</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods2.png" alt="">
</div>
<div class="text">
<h4>紫檀外独板三层普洱茶盒</h4>
<p>¥<span>566</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods3.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>58</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods4.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>3579</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 推荐区域 -->
<!----- div 标签，class为 “recommand wrapper” ----->
<!----- Begin ----->
<div class="recommand wrapper">
<!----- End ----->
<div class="hd">
<div class="left">
<h2>人气推荐</h2>
<p>人气爆款 不容错过</p>
</div>
<!-- <div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div> -->
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend1.png" alt="">
</div>
<div class="text">
<h4>特惠推荐</h4>
<p>我猜得到 你的需要</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend2.png" alt="">
</div>
<div class="text">
<h4>爆款推荐</h4>
<p>人气好物推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend3.png" alt="">
</div>
<div class="text">
<h4>节日礼品一站买全</h4>
<p>编辑尽心整理推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend4.png" alt="">
</div>
<div class="text">
<h4>鲜花园艺</h4>
<p>给生活增加仪式感</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 热门品牌 -->
<div class="hotbrand">
<div class="wrapper">
<div class="hd">
<div class="left">
<h2>热门品牌</h2>
<p>国际经典 品质认证</p>
</div>
</div>
<div class="mid">
<a href="#"><span class="iconfont icon-arrow-left-bold"></span></a>
<a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="products">
<ul>
<li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 生鲜区域 -->
<div class="fresh wrapper">
<div class="hd">
<div class="left">
<h2>生鲜</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">蔬菜</a></li>
<li><a href="#">肉禽蛋</a></li>
<li><a href="#">水果</a></li>
<li><a href="#">海鲜</a></li>
<li><a href="#">零食</a></li>
<li><a href="#">饮料</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>双味千层，手抓饼烤肉组合</h4>
<p>240g/袋 4片装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头</h4>
<p>220g/袋 5个装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>9.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>日式风味小圆饼</h4>
<p>圆形【海盐味】</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>59.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>全麦奶油浓香小面包</h4>
<p>50g*12袋</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>49.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>秘制外皮五福摩提大福点心</h4>
<p>150g/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>39.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水果面膜韩国蜂蜜柚子茶</h4>
<p>560g/瓶</p>
<p>冲调饮品</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>浓情比利时巧克力礼盒装</h4>
<p>205克/盒</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>抹茶奶油小蛋糕礼盒装</h4>
<p>220克/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 服装区域 -->
<div class="clothes wrapper">
<div class="hd">
<div class="left">
<h2>服饰</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">奢侈品</a></li>
<li><a href="#">裤装</a></li>
<li><a href="#">衬衫</a></li>
<li><a href="#">T恤</a></li>
<li><a href="#">内衣</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/colthes_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>男女情侣抗菌夜视休闲跑鞋</h4>
<p>36/37/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>jessyline2022秋装专柜款</h4>
<p>M码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>499.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>高领纯羊毛针织打底衫毛衣</h4>
<p>S/M/L码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>259.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>潮流文艺袜子女纯棉船袜</h4>
<p>36-38</p>
<p>居家日用</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>新款韩系设计感美背衬衫裙</h4>
<p>M码 黑色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>139.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>头层牛皮真皮百搭个性腰带</h4>
<p>120cm</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>129.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>束念帆布ins潮百搭板鞋子</h4>
<p>36/36/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>Descente迪桑特训练运动裤</h4>
<p>标码 墨绿色/白色/蓝色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>230.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 餐厨区域 -->
<div class="kitchen wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">厨具</a></li>
<li><a href="#">水具</a></li>
<li><a href="#">灯具</a></li>
<li><a href="#">五金</a></li>
<li><a href="#">家具材料</a></li>
<li><a href="#">居家好物</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/kitchen_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>紫砂茶漏茶渣茶叶过滤器</h4>
<p>【禅意舍得】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>简约贝壳果盘 零食收纳盘</h4>
<p>【灰色】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>电动打奶泡器咖啡奶泡机</h4>
<p>KJBQ-4</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯保温壶大容量家用</h4>
<p>304不锈钢</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>龙泉青瓷碗碟盘餐具套装</h4>
<p>【碗+盘+杯子】</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>99.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>戚风蛋糕模具家用套装</h4>
<p>6/8胚子4寸</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>托盘家用放茶杯水杯茶盘</h4>
<p>水果餐盘</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯双层隔热便携水杯</h4>
<p>橙色/绿色</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 居家区域 -->
<div class="house wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">居家</a></li>
<li><a href="#">热门</a></li>
<li><a href="#">鲜花生活</a></li>
<li><a href="#">家纺</a></li>
<li><a href="#">创意礼品</a></li>
<li><a href="#">个性配饰</a></li>
<li><a href="#">生活日用</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/home_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>北极绒房间的彩虹全棉床单</h4>
<p>《房间的彩虹》</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>沃特曼毛绒玩具玩偶抱枕</h4>
<p>23cm小号粉色70332</p>
<p>创意礼品</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水培植物玻璃花瓶大</h4>
<p>水养花瓶1903</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>韩版网红仙女发圈小皮筋</h4>
<p>森系头绳（三件套）</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>竖纹透明仿真干花插花花瓶</h4>
<p>竖纹玻璃花瓶【透明】</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>折叠简约家用简易书桌</h4>
<p>1.22米折叠桌二档【白色】</p>
<p>生活日用</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>自动吸水懒人花盆</h4>
<p>直径15cm</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>百富帝byford碳化竹席枕套</h4>
<p>单只装 48-74cm</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新专题 -->
<div class="new wrapper">
<div class="hd">
<div class="left">
<h2>最新专题</h2>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="content">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic1.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic2.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic3.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 底部区域 -->
<div class="footer">
<div class="wrapper">
<!-- 服务区域 -->
<div class="service">
<ul>
<li>
<h5></h5>
<p>服务亲民</p>
</li>
<li>
<h5></h5>
<p>物流快捷</p>
</li>
<li>
<h5></h5>
<p>品质新鲜</p>
</li>
<li>
<h5></h5>
<p>售后无忧</p>
</li>
</ul>
</div>
<!-- 帮助区域 -->
<div class="help">
<div class="left">
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">支付方式</a></dd>
<dd><a href="#">售后规则</a></dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd><a href="#">配送运费</a></dd>
<dd><a href="#">配送范围</a></dd>
<dd><a href="#">配送时间</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">平台规则</a></dd>
<dd><a href="#">联系我们</a></dd>
<dd><a href="#">问题反馈</a></dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">退款说明</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd><a href="#">在线客服</a><span class="iconfont icon-customer-service"></span></dd>
<dd><a href="#">客服电话 400-4000-000</a></dd>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic">
<img src="./images/wechat.png" alt="">
<p>微信公众号</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/app.png" alt="">
<p>APP下载二维码</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 版权区域 -->
<div class="copyright">
<p>
<a href="#">关于我们</a>|
<a href="#">帮助中心</a>|
<a href="#">售后服务</a>|
<a href="#">配送与验收</a>|
<a href="#">商务合作</a>|
<a href="#">搜索推荐</a>|
<a href="#">友情链接</a>|
</p>
<p>CopyRight © 小兔鲜</p>
</div>
</div>
</div>
</body>
</html>第2关 设计购物网站的导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<!-- 快捷导航区域 -->
<!----- div 标签，class为 “shortcut” ----->
<!----- Begin ----->
<div class="shortcut">
<!----- End ----->
<div class="wrapper">
<ul>
<li><a href="#" class="login">请先登录</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">在线客服</a></li>
<li>
<a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a>
</li>
</ul>
</div>
</div>
<!-- 头部区域 -->
<div class="header wrapper">
<!-- logo区域 -->
<div class="logo">
<h1><a href="#">小兔鲜儿</a></h1>
</div>
<!-- 导航区域 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">餐厨</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
</ul>
</div>
<!-- 搜索框 -->
<div class="sear">
<!----- span 标签，class为 “iconfont icon-search” ----->
<!----- Begin ----->
<span class="iconfont icon-search"></span>
<!----- End ----->
<input type="text" placeholder="搜一搜">
</div>
<!-- 购物车 -->
<div class="cart">
<a href="#">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</a>
</div>
</div>
<!-- banner区域 -->
<div class="banner">
<div class="wrapper">
<!-- 大图 -->
<ul class="pic">
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
<!-- 测导航 -->
<!----- div 标签，class为 “subnav” ----->
<!----- Begin ----->
<div class="subnav">
<!----- End ----->
<ul>
<li>
<div>
<a href="#">生鲜</a>
<a href="#">水果</a>
<a href="#">蔬菜</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">美食</a>
<a href="#">面点</a>
<a href="#">干果</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">餐厨</a>
<a href="#">数码产品</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">电器</a>
<a href="#">床品</a>
<a href="#">四件套</a>
<a href="#">被枕</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">居家</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
<a href="#">辅食</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">洗护</a>
<a href="#">洗发</a>
<a href="#">洗护</a>
<a href="#">美妆</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">孕婴</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">服饰</a>
<a href="#">男装</a>
<a href="#">女装</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">杂货</a>
<a href="#">户外</a>
<a href="#">图书</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">品牌</a>
<a href="#">品牌制造</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<!-- 小圆点 -->
<ol>
<li class="active"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
</div>
</div>
<!-- 新鲜好物 -->
<div class="goods wrapper">
<div class="hd">
<div class="left">
<h2>新鲜好物</h2>
<p>新鲜出炉 品质靠谱</p>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods1.png" alt="">
</div>
<div class="text">
<h4>KN95级莫兰迪色防护口罩</h4>
<p>¥<span>79</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods2.png" alt="">
</div>
<div class="text">
<h4>紫檀外独板三层普洱茶盒</h4>
<p>¥<span>566</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods3.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>58</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods4.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>3579</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 推荐区域 -->
<div class="recommand wrapper">
<div class="hd">
<div class="left">
<h2>人气推荐</h2>
<p>人气爆款 不容错过</p>
</div>
<!-- <div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div> -->
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend1.png" alt="">
</div>
<div class="text">
<h4>特惠推荐</h4>
<p>我猜得到 你的需要</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend2.png" alt="">
</div>
<div class="text">
<h4>爆款推荐</h4>
<p>人气好物推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend3.png" alt="">
</div>
<div class="text">
<h4>节日礼品一站买全</h4>
<p>编辑尽心整理推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend4.png" alt="">
</div>
<div class="text">
<h4>鲜花园艺</h4>
<p>给生活增加仪式感</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 热门品牌 -->
<div class="hotbrand">
<div class="wrapper">
<div class="hd">
<div class="left">
<h2>热门品牌</h2>
<p>国际经典 品质认证</p>
</div>
</div>
<div class="mid">
<a href="#"><span class="iconfont icon-arrow-left-bold"></span></a>
<a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="products">
<ul>
<li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 生鲜区域 -->
<div class="fresh wrapper">
<div class="hd">
<div class="left">
<h2>生鲜</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">蔬菜</a></li>
<li><a href="#">肉禽蛋</a></li>
<li><a href="#">水果</a></li>
<li><a href="#">海鲜</a></li>
<li><a href="#">零食</a></li>
<li><a href="#">饮料</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>双味千层，手抓饼烤肉组合</h4>
<p>240g/袋 4片装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头</h4>
<p>220g/袋 5个装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>9.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>日式风味小圆饼</h4>
<p>圆形【海盐味】</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>59.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>全麦奶油浓香小面包</h4>
<p>50g*12袋</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>49.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>秘制外皮五福摩提大福点心</h4>
<p>150g/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>39.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水果面膜韩国蜂蜜柚子茶</h4>
<p>560g/瓶</p>
<p>冲调饮品</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>浓情比利时巧克力礼盒装</h4>
<p>205克/盒</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>抹茶奶油小蛋糕礼盒装</h4>
<p>220克/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 服装区域 -->
<div class="clothes wrapper">
<div class="hd">
<div class="left">
<h2>服饰</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">奢侈品</a></li>
<li><a href="#">裤装</a></li>
<li><a href="#">衬衫</a></li>
<li><a href="#">T恤</a></li>
<li><a href="#">内衣</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/colthes_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>男女情侣抗菌夜视休闲跑鞋</h4>
<p>36/37/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>jessyline2022秋装专柜款</h4>
<p>M码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>499.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>高领纯羊毛针织打底衫毛衣</h4>
<p>S/M/L码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>259.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>潮流文艺袜子女纯棉船袜</h4>
<p>36-38</p>
<p>居家日用</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>新款韩系设计感美背衬衫裙</h4>
<p>M码 黑色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>139.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>头层牛皮真皮百搭个性腰带</h4>
<p>120cm</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>129.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>束念帆布ins潮百搭板鞋子</h4>
<p>36/36/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>Descente迪桑特训练运动裤</h4>
<p>标码 墨绿色/白色/蓝色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>230.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 餐厨区域 -->
<div class="kitchen wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">厨具</a></li>
<li><a href="#">水具</a></li>
<li><a href="#">灯具</a></li>
<li><a href="#">五金</a></li>
<li><a href="#">家具材料</a></li>
<li><a href="#">居家好物</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/kitchen_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>紫砂茶漏茶渣茶叶过滤器</h4>
<p>【禅意舍得】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>简约贝壳果盘 零食收纳盘</h4>
<p>【灰色】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>电动打奶泡器咖啡奶泡机</h4>
<p>KJBQ-4</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯保温壶大容量家用</h4>
<p>304不锈钢</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>龙泉青瓷碗碟盘餐具套装</h4>
<p>【碗+盘+杯子】</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>99.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>戚风蛋糕模具家用套装</h4>
<p>6/8胚子4寸</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>托盘家用放茶杯水杯茶盘</h4>
<p>水果餐盘</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯双层隔热便携水杯</h4>
<p>橙色/绿色</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 居家区域 -->
<div class="house wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">居家</a></li>
<li><a href="#">热门</a></li>
<li><a href="#">鲜花生活</a></li>
<li><a href="#">家纺</a></li>
<li><a href="#">创意礼品</a></li>
<li><a href="#">个性配饰</a></li>
<li><a href="#">生活日用</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/home_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>北极绒房间的彩虹全棉床单</h4>
<p>《房间的彩虹》</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>沃特曼毛绒玩具玩偶抱枕</h4>
<p>23cm小号粉色70332</p>
<p>创意礼品</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水培植物玻璃花瓶大</h4>
<p>水养花瓶1903</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>韩版网红仙女发圈小皮筋</h4>
<p>森系头绳（三件套）</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>竖纹透明仿真干花插花花瓶</h4>
<p>竖纹玻璃花瓶【透明】</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>折叠简约家用简易书桌</h4>
<p>1.22米折叠桌二档【白色】</p>
<p>生活日用</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>自动吸水懒人花盆</h4>
<p>直径15cm</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>百富帝byford碳化竹席枕套</h4>
<p>单只装 48-74cm</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新专题 -->
<div class="new wrapper">
<div class="hd">
<div class="left">
<h2>最新专题</h2>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="content">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic1.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic2.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic3.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 底部区域 -->
<div class="footer">
<div class="wrapper">
<!-- 服务区域 -->
<div class="service">
<ul>
<li>
<h5></h5>
<p>服务亲民</p>
</li>
<li>
<h5></h5>
<p>物流快捷</p>
</li>
<li>
<h5></h5>
<p>品质新鲜</p>
</li>
<li>
<h5></h5>
<p>售后无忧</p>
</li>
</ul>
</div>
<!-- 帮助区域 -->
<div class="help">
<div class="left">
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">支付方式</a></dd>
<dd><a href="#">售后规则</a></dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd><a href="#">配送运费</a></dd>
<dd><a href="#">配送范围</a></dd>
<dd><a href="#">配送时间</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">平台规则</a></dd>
<dd><a href="#">联系我们</a></dd>
<dd><a href="#">问题反馈</a></dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">退款说明</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd><a href="#">在线客服</a><span class="iconfont icon-customer-service"></span></dd>
<dd><a href="#">客服电话 400-4000-000</a></dd>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic">
<img src="./images/wechat.png" alt="">
<p>微信公众号</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/app.png" alt="">
<p>APP下载二维码</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 版权区域 -->
<div class="copyright">
<p>
<a href="#">关于我们</a>|
<a href="#">帮助中心</a>|
<a href="#">售后服务</a>|
<a href="#">配送与验收</a>|
<a href="#">商务合作</a>|
<a href="#">搜索推荐</a>|
<a href="#">友情链接</a>|
</p>
<p>CopyRight © 小兔鲜</p>
</div>
</div>
</div>
</body>
</html>第3关 购物网站商品展示的样式
/* 去除常见标签默认的 margin 和 padding */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 16px/1.5 "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
/* 去除列表默认样式 */
ul,
ol {
/***** Begin *****/
list-style: none;
/***** End *****/
}
/* 去除默认的倾斜效果 */
em,
i {
font-style: normal;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}
/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
/* 去除input默认样式 */
input {
border: none;
outline: none;
color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
}
第4关 购物网站翻页样式
.banner {
height: 500px;
background-color: #F5F5F5;
/* background-color: pink; */
}
.banner .wrapper {
position: relative;
overflow: hidden;
height: 500px;
background-color: pink;
}
.banner .wrapper .pic {
display: flex;
/* flex布局，父级宽度不够，子级元素被挤小了 */
width: 3720px;
height: 500px;
}
.banner .wrapper .subnav {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
background: #000000;
opacity: 0.42;
}
.banner .wrapper .subnav li {
display: flex;
justify-content: space-between;
padding-left: 30px;
padding-right: 12px;
line-height: 50px;
height: 50px;
color: #fff;
cursor: pointer;
}
.banner .wrapper .subnav li div a {
margin-right: 5px;
font-size: 14px;
color: #fff;
}
.banner .wrapper .subnav li div a:first-child {
margin-right: 14px;
font-size: 16px;
}
.banner .wrapper .subnav li .iconfont {
font-size: 14px;
}
/*对 .banner .wrapper .subnav li 内容添加鼠标监听*/
/***** Begin *****/
.banner .wrapper .subnav li:hover {
/***** End *****/
background-color: #00BE9A;
}
.banner .wrapper ol {
margin-right: 16px;
margin-bottom: 17px;
display: flex;
position: absolute;
bottom: 0;
right: 0;
}
.banner .wrapper ol li {
margin-left: 8px;
width: 22px;
height: 22px;
/* background-color: pink; */
border-radius: 50%;
cursor: pointer;
}
.banner .wrapper ol li i {
margin: 4px;
display: block;
width: 14px;
height: 14px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
.banner .wrapper ol .active {
background-color: rgba(255, 255, 255, 0.5);
}
.banner .wrapper ol .active i {
background-color: #fff;
}
.goods {
margin-top: 40px;
height: 476px;
/* background-color: palegoldenrod; */
}
.hd {
margin-top: 40px;
margin-bottom: 30px;
height: 42px;
display: flex;
justify-content: space-between;
/* background-color: pink; */
}
.hd .left {
display: flex;
}
.hd .left h2 {
margin-right: 35px;
font-size: 30px;
}
.hd .left p {
align-self: self-end;
color: #A1A1A1;
}
.hd .right {
line-height: 42px;
color: #A1A1A1;
}
.hd .right .more {
color: #A1A1A1;
}
.hd .right .iconfont {
margin-left: 10px;
font-size: 12px;
}
.products ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products ul li {
width: 304px;
height: 404px;
background-color: #EEF9F4 ;
}
.products ul li .pic {
width: 304px;
height: 304px;
}
.products ul li .text {
padding: 18px 0px 16px;
text-align: center;
}
.products ul li .text h4 {
margin-bottom: 8px;
font-size: 20px;
}
.goods .products ul li .text p{
font-size: 18px;
color: #AA2113;
}
.goods .products ul li .text span {
margin-left: 3px;
font-size: 22px;
}
.recommand .products ul li {
background-color: #fff;
}
.recommand .products ul li .text p {
color: #A1A1A1 ;
font-size: 16px;
}
.hotbrand {
margin-top: 60px;
margin-bottom: 20px;
padding: 40px 0;
height: 468px;
background-color: #F5F5F5;
}
/* .hotbrand .wrapper {
background-color: pink;
} */
.hotbrand .wrapper .hd {
margin-top: 0;
margin-bottom: 0;
}
.hotbrand .wrapper .mid {
margin: 5px 0 15px 0;
display: flex;
justify-content: flex-end;
height: 20px;
}
.hotbrand .wrapper .mid a {
width: 20px;
height: 20px;
background-color: rgba(9, 9, 9, 0.3);
text-align: center;
line-height: 20px;
}
/*对 .hotbrand .wrapper .mid a 内容添加鼠标监听*/
/***** Begin *****/
.hotbrand .wrapper .mid a:hover {
/***** End *****/
background-color: #00BE9A;
}
.hotbrand .wrapper .mid a:last-child {
margin-left: 12px;
}
.hotbrand .wrapper .mid .iconfont {
color: #fff;
}
.hotbrand .wrapper .products ul li {
width: 244px;
height: 306px;
}
.fresh {
margin-top: 60px;
margin-bottom: 40px;
/* background-color: pink; */
}
.fresh .hd {
margin-bottom: 20px;
}
.hd .right {
display: flex;
}
.hd .right ul {
display: flex;
margin-right: 58px;
}
.hd .right ul li a {
margin-left: 6px;
padding: 0 7px;
}
.hd .right ul li .active {
background-color: #00BE9A;
color: #fff;
}
.bd {
display: flex;
justify-content: space-between;
height: 610px;
/* background-color: pink; */
}
.bd .left {
width: 248px;
height: 610px;
}
.bd .right {
width: 968px;
height: 610px;
/* background-color: pink; */
}
.bd .right ul {
display: flex;
flex-wrap: wrap;
}
.bd .right ul li {
position: relative;
padding: 10px 21px 0;
width: 242px;
height: 305px;
overflow: hidden;
/* background-color: pink; */
/* border: 2px solid #000000; */
}
.bd .right ul li .pic {
width: 200px;
height: 180px;
}
.bd .right ul li .text .info {
margin-top: 15px;
margin-bottom: 5px;
height: 60px;
line-height: 19px;
}
.bd .right ul li .text .price {
color: #AF2F22;
}
.bd .right ul li .text .price span {
margin-left: 5px;
font-size: 22px;
}
.bd .right ul li .pop_up {
padding: 16px 0 14px;
position: absolute;
left: 0;
bottom: -86px;
width: 240px;
height: 83px;
background-color: #00BE9A;
text-align: center;
color: #fff;
transition: all 0.5s;
}
.bd .right ul li .pop_up p:first-child {
margin-bottom: 4px;
font-size: 18px;
}
.bd .right ul li .pop_up div {
margin: 0 auto;
margin-bottom: 6px;
width: 120px;
height: 2px;
background-color: rgba(255, 255, 255, 0.11);
}
.bd .right ul li .pop_up p:nth-child(2) {
font-size: 13px;
}
/*对 .bd .right ul li 内容添加鼠标监听*/
/***** Begin *****/
.bd .right ul li:hover {
/***** End *****/
border: 2px solid #00BE9A;
}
/*对 .bd .right ul li 内容添加鼠标监听，显示.pop_up的内容*/
/***** Begin *****/
.bd .right ul li:hover .pop_up {
/***** End *****/
bottom: 0px;
}
.clothes {
margin-bottom: 40px;
height: 672px;
/* background-color: pink; */
}
.clothes .hd {
margin-bottom: 20px;
}
.kitchen {
margin-bottom: 40px;
height: 672px;
}
.clothes .hd {
margin-bottom: 20px;
}
.house {
margin-bottom: 100px;
height: 672px;
}
.house .hd {
margin-bottom: 20px;
}
.new {
margin-bottom: 40px;
height: 427px;
/* background-color: pink; */
}
.new .hd {
margin-bottom: 30px;
}
.new .content {
height: 355px;
}
.new .content ul {
display: flex;
justify-content: space-between;
}
.new .content ul li {
width: 405px;
height: 355px;
/* background-color: pink; */
}
.new .content ul li a .pic {
position: relative;
width: 405px;
height: 288px;
}
.new .content ul li a>.text {
padding: 0 15px;
display: flex;
justify-content: space-between;
height: 67px;
line-height: 67px;
}
.new .content ul li a>.text .prve .icon-favorites-fill {
color: brown;
font-size: 14px;
}
.new .content ul li a>.text {
color: #666;
}
.new .content ul li a>.text .prve {
display: flex;
}
.new .content ul li a>.text p {
margin-right: 20px;
}
.new .content ul li a .pic .cover{
display: flex;
justify-content: space-between;
padding: 20px 15px 0;
position: absolute;
left: 0;
bottom: 0;
width: 405px;
height: 90px;
background-image: linear-gradient(180deg, rgba(137,137,137,0.00) 0%, rgba(0,0,0,0.90) 100%);
/* background-color: green; */
}
.new .content ul li a .pic .cover .text {
color: #fff;
}
.new .content ul li a .pic .cover .text h3 {
font-size: 20px;
margin-bottom: 6px;
}
.new .content ul li a .pic .cover .price {
padding: 0 7px;
margin-top: 15px;
height: 25px;
background-color: #fff;
color: #AA2113 ;
text-align: center;
line-height: 25px;
font-size: 15px;
}
.new .content ul li a .pic .cover .price span {
font-size: 18px;
}第5关 点击商品动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<!-- 快捷导航区域 -->
<div class="shortcut">
<div class="wrapper">
<ul>
<li><a href="#" class="login">请先登录</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">在线客服</a></li>
<li>
<a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a>
</li>
</ul>
</div>
</div>
<!-- 头部区域 -->
<div class="header wrapper">
<!-- logo区域 -->
<div class="logo">
<h1><a href="#">小兔鲜儿</a></h1>
</div>
<!-- 导航区域 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">餐厨</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
</ul>
</div>
<!-- 搜索框 -->
<div class="sear">
<span class="iconfont icon-search"></span>
<input type="text" placeholder="搜一搜">
</div>
<!-- 购物车 -->
<div class="cart">
<a href="#">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</a>
</div>
</div>
<!-- banner区域 -->
<div class="banner">
<div class="wrapper">
<!-- 大图 -->
<ul class="pic">
<!-- 显示./uploads/banner1.png，并且添加超链接，链接路径暂为# -->
<!----- Begin ----->
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<!----- End ----->
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
<!-- 测导航 -->
<div class="subnav">
<ul>
<li>
<div>
<a href="#">生鲜</a>
<a href="#">水果</a>
<a href="#">蔬菜</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">美食</a>
<a href="#">面点</a>
<a href="#">干果</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">餐厨</a>
<a href="#">数码产品</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">电器</a>
<a href="#">床品</a>
<a href="#">四件套</a>
<a href="#">被枕</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">居家</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
<a href="#">辅食</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">洗护</a>
<a href="#">洗发</a>
<a href="#">洗护</a>
<a href="#">美妆</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">孕婴</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">服饰</a>
<a href="#">男装</a>
<a href="#">女装</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">杂货</a>
<a href="#">户外</a>
<a href="#">图书</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">品牌</a>
<a href="#">品牌制造</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<!-- 小圆点 -->
<ol>
<li class="active"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
</div>
</div>
<!-- 新鲜好物 -->
<div class="goods wrapper">
<div class="hd">
<div class="left">
<h2>新鲜好物</h2>
<p>新鲜出炉 品质靠谱</p>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<!-- 显示./uploads/goods1.png 商品图片 -->
<!----- Begin ----->
<img src="./uploads/goods1.png" alt="">
<!----- End ----->
</div>
<div class="text">
<h4>KN95级莫兰迪色防护口罩</h4>
<p>¥<span>79</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<!-- 显示./uploads/goods2.png 商品图片 -->
<!----- Begin ----->
<img src="./uploads/goods2.png" alt="">
<!----- End ----->
</div>
<div class="text">
<h4>紫檀外独板三层普洱茶盒</h4>
<p>¥<span>566</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods3.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>58</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods4.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>3579</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 推荐区域 -->
<div class="recommand wrapper">
<div class="hd">
<div class="left">
<h2>人气推荐</h2>
<p>人气爆款 不容错过</p>
</div>
<!-- <div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div> -->
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend1.png" alt="">
</div>
<div class="text">
<h4>特惠推荐</h4>
<p>我猜得到 你的需要</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend2.png" alt="">
</div>
<div class="text">
<h4>爆款推荐</h4>
<p>人气好物推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend3.png" alt="">
</div>
<div class="text">
<h4>节日礼品一站买全</h4>
<p>编辑尽心整理推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend4.png" alt="">
</div>
<div class="text">
<h4>鲜花园艺</h4>
<p>给生活增加仪式感</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 热门品牌 -->
<div class="hotbrand">
<div class="wrapper">
<div class="hd">
<div class="left">
<h2>热门品牌</h2>
<p>国际经典 品质认证</p>
</div>
</div>
<div class="mid">
<a href="#"><span class="iconfont icon-arrow-left-bold"></span></a>
<a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="products">
<ul>
<li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 生鲜区域 -->
<div class="fresh wrapper">
<div class="hd">
<div class="left">
<h2>生鲜</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">蔬菜</a></li>
<li><a href="#">肉禽蛋</a></li>
<li><a href="#">水果</a></li>
<li><a href="#">海鲜</a></li>
<li><a href="#">零食</a></li>
<li><a href="#">饮料</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>双味千层，手抓饼烤肉组合</h4>
<p>240g/袋 4片装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头</h4>
<p>220g/袋 5个装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>9.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>日式风味小圆饼</h4>
<p>圆形【海盐味】</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>59.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>全麦奶油浓香小面包</h4>
<p>50g*12袋</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>49.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>秘制外皮五福摩提大福点心</h4>
<p>150g/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>39.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水果面膜韩国蜂蜜柚子茶</h4>
<p>560g/瓶</p>
<p>冲调饮品</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>浓情比利时巧克力礼盒装</h4>
<p>205克/盒</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>抹茶奶油小蛋糕礼盒装</h4>
<p>220克/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 服装区域 -->
<div class="clothes wrapper">
<div class="hd">
<div class="left">
<h2>服饰</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">奢侈品</a></li>
<li><a href="#">裤装</a></li>
<li><a href="#">衬衫</a></li>
<li><a href="#">T恤</a></li>
<li><a href="#">内衣</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/colthes_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>男女情侣抗菌夜视休闲跑鞋</h4>
<p>36/37/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>jessyline2022秋装专柜款</h4>
<p>M码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>499.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>高领纯羊毛针织打底衫毛衣</h4>
<p>S/M/L码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>259.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>潮流文艺袜子女纯棉船袜</h4>
<p>36-38</p>
<p>居家日用</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>新款韩系设计感美背衬衫裙</h4>
<p>M码 黑色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>139.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>头层牛皮真皮百搭个性腰带</h4>
<p>120cm</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>129.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>束念帆布ins潮百搭板鞋子</h4>
<p>36/36/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>Descente迪桑特训练运动裤</h4>
<p>标码 墨绿色/白色/蓝色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>230.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 餐厨区域 -->
<div class="kitchen wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">热门</a></li>
<li><a href="#">厨具</a></li>
<li><a href="#">水具</a></li>
<li><a href="#">灯具</a></li>
<li><a href="#">五金</a></li>
<li><a href="#">家具材料</a></li>
<li><a href="#">居家好物</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/kitchen_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>紫砂茶漏茶渣茶叶过滤器</h4>
<p>【禅意舍得】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>简约贝壳果盘 零食收纳盘</h4>
<p>【灰色】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>电动打奶泡器咖啡奶泡机</h4>
<p>KJBQ-4</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯保温壶大容量家用</h4>
<p>304不锈钢</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>龙泉青瓷碗碟盘餐具套装</h4>
<p>【碗+盘+杯子】</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>99.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>戚风蛋糕模具家用套装</h4>
<p>6/8胚子4寸</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>托盘家用放茶杯水杯茶盘</h4>
<p>水果餐盘</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯双层隔热便携水杯</h4>
<p>橙色/绿色</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 居家区域 -->
<div class="house wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</div>
<div class="right">
<ul>
<li><a href="#" class="active">居家</a></li>
<li><a href="#">热门</a></li>
<li><a href="#">鲜花生活</a></li>
<li><a href="#">家纺</a></li>
<li><a href="#">创意礼品</a></li>
<li><a href="#">个性配饰</a></li>
<li><a href="#">生活日用</a></li>
</ul>
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/home_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>北极绒房间的彩虹全棉床单</h4>
<p>《房间的彩虹》</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>沃特曼毛绒玩具玩偶抱枕</h4>
<p>23cm小号粉色70332</p>
<p>创意礼品</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水培植物玻璃花瓶大</h4>
<p>水养花瓶1903</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>韩版网红仙女发圈小皮筋</h4>
<p>森系头绳（三件套）</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>竖纹透明仿真干花插花花瓶</h4>
<p>竖纹玻璃花瓶【透明】</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>折叠简约家用简易书桌</h4>
<p>1.22米折叠桌二档【白色】</p>
<p>生活日用</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>自动吸水懒人花盆</h4>
<p>直径15cm</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>百富帝byford碳化竹席枕套</h4>
<p>单只装 48-74cm</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新专题 -->
<div class="new wrapper">
<div class="hd">
<div class="left">
<h2>最新专题</h2>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="content">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic1.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic2.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic3.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 底部区域 -->
<div class="footer">
<div class="wrapper">
<!-- 服务区域 -->
<div class="service">
<ul>
<li>
<h5></h5>
<p>服务亲民</p>
</li>
<li>
<h5></h5>
<p>物流快捷</p>
</li>
<li>
<h5></h5>
<p>品质新鲜</p>
</li>
<li>
<h5></h5>
<p>售后无忧</p>
</li>
</ul>
</div>
<!-- 帮助区域 -->
<div class="help">
<div class="left">
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">支付方式</a></dd>
<dd><a href="#">售后规则</a></dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd><a href="#">配送运费</a></dd>
<dd><a href="#">配送范围</a></dd>
<dd><a href="#">配送时间</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">平台规则</a></dd>
<dd><a href="#">联系我们</a></dd>
<dd><a href="#">问题反馈</a></dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">退款说明</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd><a href="#">在线客服</a><span class="iconfont icon-customer-service"></span></dd>
<dd><a href="#">客服电话 400-4000-000</a></dd>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic">
<img src="./images/wechat.png" alt="">
<p>微信公众号</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/app.png" alt="">
<p>APP下载二维码</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 版权区域 -->
<div class="copyright">
<p>
<a href="#">关于我们</a>|
<a href="#">帮助中心</a>|
<a href="#">售后服务</a>|
<a href="#">配送与验收</a>|
<a href="#">商务合作</a>|
<a href="#">搜索推荐</a>|
<a href="#">友情链接</a>|
</p>
<p>CopyRight © 小兔鲜</p>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
