[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FWNmPpj-1691944251554)(assets/1680344354682.png)]
index.css
<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>
div>
/* banner */
.banner {
height: 500px;
background-color: #F5F5F5;
}
.banner .wrapper {
position: relative;
height: 500px;
background-color: pink;
overflow: hidden;
}
/* 图片 */
.banner .pic {
display: flex;
/* flex 布局,父级宽度不够,子级被挤小,不想挤小,增大父级尺寸 */
width: 3720px;
}
<div class="subnav">
<ul>
<li>
<div><a href="#" class="classify">生鲜a><a href="#">水果a><a href="#">蔬菜a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">美食a><a href="#">面点a><a href="#">干果a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">餐厨a><a href="#">数码产品a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">电器a><a href="#">床品a><a href="#">四件套a><a href="#">被枕a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">居家a><a href="#">奶粉a><a href="#">玩具a><a href="#">辅食a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">洗护a><a href="#">洗发a><a href="#">洗护a><a href="#">美妆a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">孕婴a><a href="#">奶粉a><a href="#">玩具a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">服饰a><a href="#">女装a><a href="#">男装a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">杂货a><a href="#">户外a><a href="#">图书a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
<li>
<div><a href="#" class="classify">品牌a><a href="#">品牌制造a>div>
<span class="iconfont icon-arrow-right-bold">span>
li>
ul>
div>
/* 侧导航 */
.subnav {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
background-color: rgba(0,0,0,0.42);
}
.subnav li {
display: flex;
justify-content: space-between;
padding-left: 30px;
padding-right: 12px;
height: 50px;
/* background-color: pink; */
line-height: 50px;
color: #fff;
cursor: pointer;
}
/* a所有都是小字,分类是大字 */
.subnav li a {
margin-right: 5px;
font-size: 14px;
color: #fff;
}
.subnav li .classify {
margin-right: 14px;
font-size: 16px;
}
.subnav li .iconfont {
font-size: 14px;
}
.subnav li:hover {
background-color: #00BE9A;
}
<ol>
<li class="current"><i>i>li>
<li><i>i>li>
<li><i>i>li>
ol>
/* 圆点指示器 */
.banner ol {
position: absolute;
bottom: 17px;
right: 16px;
display: flex;
}
.banner ol li {
margin-left: 8px;
width: 22px;
height: 22px;
/* background-color: pink; */
border-radius: 50%;
cursor: pointer;
}
.banner ol i {
display: block;
margin: 4px;
width: 14px;
height: 14px;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
}
/* 选中:li半透明; i白色 */
.banner ol .current {
background-color: rgba(255,255,255,0.5);
}
.banner ol .current i {
background-color: #fff;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZSP7Y3Tk-1691944251556)(assets/1680344375183.png)]
考虑公共样式
<div class="goods wrapper">
<div class="title">
<div class="left">
<h3>新鲜好物h3>
<p>新鲜出炉 品质靠谱p>
div>
<div class="right">
<a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold">span>a>
div>
div>
div>
/* 新鲜好物 */
/* 标题 -- 公共样式 */
.title {
display: flex;
justify-content: space-between;
margin-top: 40px;
margin-bottom: 30px;
height: 42px;
/* background-color: pink; */
}
.title .left {
display: flex;
}
.title .left h3 {
margin-right: 35px;
font-size: 30px;
}
.title .left p {
align-self: flex-end;
color: #A1A1A1;
}
.title .right .more {
line-height: 42px;
color: #A1A1A1;
}
.title .right .more .iconfont {
margin-left: 10px;
}
<div class="bd">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods1.png" alt="">div>
<div class="txt">
<h4>KN95级莫兰迪色防护口罩h4>
<p>¥<span>79span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods2.png" alt="">div>
<div class="txt">
<h4>紫檀外独板三层普洱茶盒h4>
<p>¥<span>566span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods3.png" alt="">div>
<div class="txt">
<h4>法拉蒙高颜值记事本可定制h4>
<p>¥<span>58span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods4.png" alt="">div>
<div class="txt">
<h4>科技布布艺沙发h4>
<p>¥<span>3579span>p>
div>
a>
li>
ul>
div>
/* 好物内容 -- 公共样式 */
.bd ul {
display: flex;
justify-content: space-between;
}
.bd li {
width: 304px;
height: 404px;
background-color: #EEF9F4;
}
.bd li .pic {
width: 304px;
height: 304px;
}
.bd li .txt {
text-align: center;
}
.bd li h4 {
margin-top: 18px;
margin-bottom: 8px;
font-size: 20px;
}
.goods .bd p {
font-size: 18px;
color: #AA2113;
}
.goods .bd p span {
margin-left: 3px;
font-size: 22px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ir8Mpi3I-1691944251556)(assets/1680345456528.png)]
<div class="recommend wrapper">
<div class="title">
<div class="left">
<h3>人气推荐h3>
<p>人气爆款 不容错过p>
div>
div>
<div class="bd">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend1.png" alt="">div>
<div class="txt">
<h4>特惠推荐h4>
<p>我猜得到 你的需要p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend2.png" alt="">div>
<div class="txt">
<h4>爆款推荐h4>
<p>人气好物推荐p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend3.png" alt="">div>
<div class="txt">
<h4>节日礼品一站买全h4>
<p>编辑尽心整理推荐p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend4.png" alt="">div>
<div class="txt">
<h4>鲜花园艺h4>
<p>给生活增加仪式感p>
div>
a>
li>
ul>
div>
div>
/* 人气推荐 */
.recommend .bd li {
background-color: #fff;
}
.recommend .bd p {
color: #A1A1A1;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uNX2o7rk-1691944251557)(assets/1680345437806.png)]
<div class="brand">
<div class="wrapper">
<div class="title">
<div class="left">
<h3>热门品牌h3>
<p>国际经典 品质认证p>
div>
<div class="button">1div>
div>
div>
div>
/* 热门品牌 */
.brand {
margin-top: 60px;
height: 468px;
background-color: #F5F5F5;
}
.brand .wrapper {
overflow: hidden;
height: 468px;
/* background-color: pink; */
}
.brand .title {
position: relative;
margin-bottom: 40px;
}
.brand .button {
position: absolute;
right: 0;
bottom: -25px;
/* 让a在一行显示,宽高生效 */
display: flex;
}
<div class="button">
<a href="#" class="prev">
<i class="iconfont icon-arrow-left-bold">i>
a>
<a href="#" class="next">
<i class="iconfont icon-arrow-right-bold">i>
a>
div>
<div class="bd">
<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>
.brand .button a {
margin-left: 12px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
color: #fff;
}
.brand .button .prev {
background-color: #ddd;
}
.brand .button .next {
background-color: #00BE9A;
}
.brand .bd li {
width: 244px;
height: 306px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsJFqPUP-1691944251558)(assets/1680345419866.png)]
<div class="fresh wrapper">
<div class="title">
<div class="left">
<h3>生鲜h3>
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">查看全部<span class="iconfont icon-arrow-right-bold">span>a>
div>
div>
div>
/* 生鲜 */
.fresh .title {
margin-top: 60px;
margin-bottom: 20px;
}
.title .right {
display: flex;
}
.title .right ul {
display: flex;
margin-top: 10px;
margin-right: 58px;
}
.title .right ul a {
display: block;
margin-left: 6px;
padding: 0 7px;
height: 20px;
/* background-color: pink; */
line-height: 20px;
}
.title .right ul .active {
background-color: #00BE9A;
color: #fff;
}
<div class="content">
<div class="left">
<a href="#"><img src="./uploads/fresh_left.png" alt="">a>
div>
<div class="right">
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
<li>7li>
<li>8li>
ul>
div>
div>
/* 生鲜内容 */
.content {
display: flex;
justify-content: space-between;
}
.content .left {
width: 248px;
height: 610px;
/* background-color: pink; */
}
.content .right {
width: 968px;
height: 610px;
/* background-color: pink; */
}
.content .right ul {
display: flex;
flex-wrap: wrap;
}
.content .right li {
position: relative;
padding: 10px 21px 0;
width: 242px;
height: 305px;
border: 2px solid #fff;
/* 为了隐藏绿色cover */
overflow: hidden;
}
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh1.png" alt="">div>
<div class="txt">
<div class="info">
<h4>双味千层,手抓饼烤肉组合h4>
<p>240g/袋 4片装p>
<p>加热即食p>
div>
<p class="price">¥<span>89.99span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh2.png" alt="">div>
<div class="txt">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头h4>
<p>220g/袋 5个装p>
<p>加热即食p>
div>
<p class="price">¥<span>9.00span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh3.png" alt="">div>
<div class="txt">
<div class="info">
<h4>日式风味小圆饼h4>
<p>圆形【海盐味】p>
<p>糖果零食p>
div>
<p class="price">¥<span>588.00span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh4.png" alt="">div>
<div class="txt">
<div class="info">
<h4>全麦奶油浓香小面包h4>
<p>50g*12袋p>
<p>美味西点p>
div>
<p class="price">¥<span>69.00span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh5.png" alt="">div>
<div class="txt">
<div class="info">
<h4>秘制外皮五福摩提大福点心h4>
<p>150g/盒p>
<p>美味西点p>
div>
<p class="price">¥<span>39.99span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh6.png" alt="">div>
<div class="txt">
<div class="info">
<h4>水果面膜韩国蜂蜜柚子茶h4>
<p>560g/瓶p>
<p>冲调饮品p>
div>
<p class="price">¥<span>39.99span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh7.png" alt="">div>
<div class="txt">
<div class="info">
<h4>浓情比利时巧克力礼盒装h4>
<p>205克/盒p>
<p>糖果零食p>
div>
<p class="price">¥<span>120.00span>p>
div>
a>
li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh8.png" alt="">div>
<div class="txt">
<div class="info">
<h4>抹茶奶油小蛋糕礼盒装h4>
<p>220克/盒p>
<p>美味西点p>
div>
<p class="price">¥<span>60.00span>p>
div>
a>
li>
ul>
/* 产品内容 */
.content .pic {
width: 200px;
height: 180px;
}
.content .info {
margin-top: 14px;
margin-bottom: 5px;
height: 60px;
line-height: 19px;
}
.content .price {
color: #AF2F22;
}
.content .price span {
margin-left: 5px;
font-size: 22px;
}
<div class="cover">
<p>找相似p>
<p>p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold">span>p>
div>
/* 产品底部绿色区域 */
.content li .cover {
position: absolute;
left: 0;
/* bottom: 0; */
bottom: -86px;
padding-top: 15px;
width: 242px;
height: 84px;
background-color: #00BE9A;
text-align: center;
color: #fff;
transition: all 0.5s;
}
.content .cover p:nth-child(1) {
font-size: 18px;
}
.content .cover p:nth-child(2) {
margin: 3px auto 6px;
width: 120px;
height: 1px;
background-color: rgba(255,255,255,0.11);
}
.content .cover p:nth-child(3) {
font-size: 13px;
}
.content .cover p:nth-child(3) .iconfont {
font-size: 14px;
}
/* 鼠标悬停到li,显示cover,改变位置 */
.content .right li:hover .cover {
bottom: 0;
}
.content .right li:hover {
border: 2px solid #00BE9A;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sHWgpHf0-1691944251559)(assets/1680345389305.png)]
<div class="topic wrapper">
<div class="title">
<div class="left">
<h3>最新专题h3>
div>
<div class="right">
<a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold">span>a>
div>
div>
<div class="topic-bd">
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
div>
div>
/* 最新专题 */
.topic {
margin-bottom: 40px;
}
.topic .title {
margin-top: 100px;
}
.topic-bd ul {
display: flex;
justify-content: space-between;
}
.topic-bd li {
width: 405px;
height: 355px;
background-color: pink;
}
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic1.png" alt="">
div>
<div class="txt">
<div class="left">
<p>
<i class="iconfont icon-favorites-fill">i>
<span>1220span>
p>
<p>
<i class="iconfont icon-browse">i>
<span>1800span>
p>
div>
<div class="right">
<p>
<i class="iconfont icon-comment">i>
<span>246span>
p>
div>
div>
a>
li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic2.png" alt="">
div>
<div class="txt">
<div class="left">
<p>
<i class="iconfont icon-favorites-fill">i>
<span>1220span>
p>
<p>
<i class="iconfont icon-browse">i>
<span>1800span>
p>
div>
<div class="right">
<p>
<i class="iconfont icon-comment">i>
<span>246span>
p>
div>
div>
a>
li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic3.png" alt="">
div>
<div class="txt">
<div class="left">
<p>
<i class="iconfont icon-favorites-fill">i>
<span>1220span>
p>
<p>
<i class="iconfont icon-browse">i>
<span>1800span>
p>
div>
<div class="right">
<p>
<i class="iconfont icon-comment">i>
<span>246span>
p>
div>
div>
a>
li>
ul>
.topic-bd ul {
display: flex;
justify-content: space-between;
}
.topic-bd li {
width: 405px;
height: 355px;
background-color: pink;
}
.topic-bd .pic {
position: relative;
width: 405px;
height: 288px;
}
.topic-bd .txt {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
width: 405px;
height: 67px;
/* background-color: skyblue; */
font-size: 14px;
color: #666;
}
.topic-bd .txt .left {
display: flex;
}
.topic-bd .txt .left p {
margin-right: 20px;
}
.topic-bd .txt .left p:nth-child(1) i {
color: #AA2113;
}
<div class="pic">
<img src="./uploads/topic2.png" alt="">
<div class="cover">
<div class="left">
<h4>吃这些美食才不算辜负自己h4>
<p>餐厨起居洗护好物p>
div>
<div class="right">¥<span>29.9span><span>起span>div>
div>
div>
/* 定位区域 - 文字 */
.topic-bd .cover {
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
width: 405px;
height: 90px;
background-image: linear-gradient(180deg, rgba(137,137,137,0.00) 0%, rgba(0,0,0,0.90) 100%);
}
.topic-bd .cover .left {
color: #fff;
}
.topic-bd .cover .left h4 {
margin-bottom: 6px;
font-size: 20px;
}
.topic-bd .cover .right {
padding: 0 7px;
height: 25px;
background-color: #fff;
color: #AA2113;
font-size: 15px;
}
.topic-bd .cover .right span {
font-size: 18px;
}