手机/平板效果图
PC端效果图
CSS样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: calc(100vw / 3.75);
}
body {
font-size: .14rem;
color: #333;
background-color: #f4f4f4;
}
a {
color: #333;
cursor: pointer;
text-decoration: none;
}
a:hover {
color: #FF5000;
transition: all .3s;
}
cite, small, i {
font-size: 100%;
font-style: normal;
}
li {
list-style: none;
}
img {
border: none;
width: 100%;
}
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/c/font_3738571_nyip7jbpgva.woff2?t=1667134749397') format('woff2'),
url('//at.alicdn.com/t/c/font_3738571_nyip7jbpgva.woff?t=1667134749397') format('woff'),
url('//at.alicdn.com/t/c/font_3738571_nyip7jbpgva.ttf?t=1667134749397') format('truetype');
}
.iconfont {
/* 1. 必须先声明自定义的字体名称 */
font-family: 'iconfont' !important;
/* 2. 可选 , 声明其它字体属性 */
font-size: .16rem;
font-style: normal;
}
.container {
margin: 0 auto;
padding: 0 .15rem;
}
@media (max-width: 320px) {
html {
font-size: 85px;
min-width: 320px;
}
.container {
width: 320px;
}
}
@media (min-width: 640px) {
html {
font-size: 170px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
body {
padding-top: .55rem;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f4f4f4;
z-index: 999;
}
.header>.container {
display: grid;
grid-template-columns: .555rem 1fr .33rem;
grid-auto-rows: .5rem;
place-items: center;
gap: .15rem;
}
.header .logo {
width: 0.555rem;
height: 0.21rem;
}
.header .signin {
width: .33rem;
height: .33rem;
}
.header .search {
width: 100%;
height: .35rem;
background-color: #FFFFFF;
border: 1px solid #FF5000;
border-radius: .5rem;
display: flex;
place-content: space-between;
place-items: center;
}
.header .search>span:first-of-type {
padding-left: .15rem;
font-size: .14rem;
color: #666;
}
.header .search>span:last-of-type {
font-size: .14rem;
color: #FFFFFF;
background: linear-gradient(to right, #FF8D0E, #FF5000);
border: 0.01rem solid #FFFFFF;
border-radius: .5rem;
padding: .05rem .2rem;
}
.icons-wrap {
background-color: #FFFFFF;
border-radius: 0.1rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 0.66rem);
place-items: center;
gap: 0 .05rem;
padding: 0 .05rem .05rem .05rem;
margin-bottom: .1rem;
}
.icons-wrap .item>img {
display: block;
width: 0.6rem;
}
.icons-wrap .item>p {
height: 0.13rem;
line-height: 0.13rem;
font-size: 0.13rem;
color: #666666;
text-align: center;
}
.gonge-wrap {
background-color: #FFFFFF;
border-radius: 0.1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1rem);
padding: .05rem;
margin-bottom: .1rem;
}
.gonge-wrap .item:nth-child(1n+3) {
border-top: .01rem solid #eee;
}
.gonge-wrap .item:nth-child(2n+2) {
border-left: .01rem solid #eee;
}
.gonge-wrap .item-head {
position: relative;
padding: .03rem .1rem;
}
.gonge-wrap .item-head h5{
font-size: 0.15rem;
color: #111111;
display: inline-block;
}
.gonge-wrap .item-head label{
display: inline-block;
font-size: 0.12rem;
padding: 0 .05rem;
height: .14rem;
line-height: 0.14rem;
background-color: #ff5722;
color: #FFFFFF;
border-radius: 0.03rem;
margin-left: .03rem;
}
.gonge-wrap .item-body {
display: flex;
flex-wrap: nowrap;
place-content: space-around;
place-items: center;
}
.gonge-wrap .item-body>a:nth-of-type(1){
width: 0.63rem;
height: 0.63rem;
}
.gonge-wrap .item-body> a:nth-of-type(2) {
width: 0.8rem;
height: 0.8rem;
}
.gonge-wrap .item-body> a:nth-of-type(2)>img {
margin-top: -0.12rem;
}
.recommend-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* grid-auto-rows: 1fr 1fr; */
/* grid-auto-rows: 2.45rem; */
place-items: center;
gap: .05rem;
}
@media (min-width: 978px) {
.recommend-list {
grid-template-columns: repeat(4, 1fr);
}
}
.recommend-list .item {
border-radius: .1rem;
background-color: #FFFFFF;
}
.recommend-list .item-cover img{
border-radius: .1rem .1rem 0 0;
}
.recommend-list .item-title {
height: .4rem;
line-height: .2rem;
font-size: .14rem;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 .1rem;
margin-bottom: .03rem;
}
.recommend-list .item-title h3 {
font-size: .14rem;
font-weight: normal;
}
.recommend-list .item-info {
padding: 0 .1rem .1rem .1rem;
line-height: .2rem;
}
.recommend-list .item-currency, .recommend-list .item-price{
color: #ff5500;
font-size: .13rem;
}
.recommend-list .item-price {
font-size: .15rem;
}
.recommend-list .item-payed {
font-size: .12rem;
color: #999999;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
border-top: .01rem solid #e7e7e7;
border-bottom: .01rem solid #f8f8f8;
height: 0.5rem;
padding: .05rem 0;
}
.footer .container {
display: flex;
place-content: space-around;
place-items: center;
z-index: 1000;
}
.footer .item {
display: flex;
flex-flow: column wrap;
place-items: center;
}
.footer .item > i {
font-size: .25rem;
line-height: .25rem;
}
.footer .item > span {
font-size: .12rem;
color: #666666;
line-height: 0.12rem;
margin-top: .02rem;
}
.footer .item:first-of-type > i {
font-size: .35rem;
color: #ff5500;
}HTML部分
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防淘宝</title>
<link rel="stylesheet" href="static/css/taobao.css">
</head>
<body>
<div class="header">
<div class="container">
<a class="logo" href="#">
<img src="static/images/logo.png" alt="">
</a>
<a class="search" href="#">
<span>寻找宝贝店铺</span>
<span>搜索</span>
</a>
<a class="signin">
<img src="static/images/icon-qiandao.png" alt="">
</a>
</div>
</div>
<div class="container">
<div class="icons-wrap">
<a href="#" class="item">
<img src="static/images/icon-tianmao.webp">
<p>天猫新品</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-jinribaokuan.webp">
<p>今日爆款</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-tianmaoguoji.webp">
<p>天猫国际</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-feizhulvxing.webp">
<p>飞猪旅行</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-tianmaochaoshi.webp">
<p>天猫超市</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-taobaochihuo.webp">
<p>淘宝吃货</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-shengqianka.webp">
<p>省钱卡</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-lingtaojinbi.webp">
<p>领淘金币</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-alipaimai.webp">
<p>阿里拍卖</p>
</a>
<a href="#" class="item">
<img src="static/images/icon-fenlei.webp">
<p>分类</p>
</a>
</div>
<div class="gonge-wrap">
<div class="item">
<div class="item-head">
<a href="#"><h5>聚划算</h5><label>品牌折扣</label></a>
</div>
<div class="item-body">
<a href="">
<img src="static/images/O1CN01kmQoNz22KJCOnZtD4_!!6000000007101-0-yinhe.jpg_140x140q90.jpg_.webp">
</a>
<a href="">
<img src="static/images/O1CN01vLDEqe1wu8URrGGVZ_!!6000000006367-0-yinhe.jpg_180x180q90.jpg_.webp">
</a>
</div>
</div>
<div class="item">
<div class="item-head">
<a href="#"><h5>天天特卖</h5><label>1元秒杀</label></a>
</div>
<div class="item-body">
<a href="">
<img src="static/images/TB1ovZZJpOWBuNjy0FiSutFxVXa.jpg_140x140q90.jpg_.webp">
</a>
<a href="">
<img src="static/images/O1CN018d8cei2ACzq0EDCfl_!!6000000008168-0-yinhe.jpg_180x180q90.jpg_.webp">
</a>
</div>
</div>
<div class="item">
<div class="item-head">
<a href="#"><h5>有好货</h5></a>
</div>
<div class="item-body">
<a href="">
<img src="static/images/TB1ovZZJpOWBuNjy0FiSutFxVXa.jpg_140x140q90.jpg_.webp">
</a>
<a href="">
<img src="static/images/O1CN018d8cei2ACzq0EDCfl_!!6000000008168-0-yinhe.jpg_180x180q90.jpg_.webp">
</a>
</div>
</div>
<div class="item">
<div class="item-head">
<a href="#"><h5>每日好店</h5><label style="background-color: #ff9800;">特色</label></a>
</div>
<div class="item-body">
<a href="">
<img src="static/images/O1CN01kmQoNz22KJCOnZtD4_!!6000000007101-0-yinhe.jpg_140x140q90.jpg_.webp">
</a>
<a href="">
<img src="static/images/O1CN01vLDEqe1wu8URrGGVZ_!!6000000006367-0-yinhe.jpg_180x180q90.jpg_.webp">
</a>
</div>
</div>
</div>
<div class="recommend-list">
<a class="item" href="#">
<div class="item-cover">
<img src="static/images/O1CN01wGqjW51DJLqfuZWOl_!!2206999970195-0-lubanu-s.jpg_500x500q90.jpg_.webp">
</div>
<div class="item-title"><h3>治疗蕉绿女孩适用13/14Pro/Max苹果12手机壳iPhonese硅胶iPhoneX/XS防摔XR保护套SE2女款14plus情侣8/7p软7韩</h3></div>
<div class="item-info">
<span class="item-currency">￥</span>
<span class="item-price">9.9</span>
<span class="item-payed"><cite>61</cite>人购买</span>
</div>
</a>
<a class="item" href="#">
<div class="item-cover">
<img src="static/images/O1CN01wGqjW51DJLqfuZWOl_!!2206999970195-0-lubanu-s.jpg_500x500q90.jpg_.webp">
</div>
<div class="item-title"><h3>治疗蕉绿女孩适用13/14Pro/Max苹果12手机壳iPhonese硅胶iPhoneX/XS防摔XR保护套SE2女款14plus情侣8/7p软7韩</h3></div>
<div class="item-info">
<span class="item-currency">￥</span>
<span class="item-price">9.9</span>
<span class="item-payed"><cite>61</cite>人已购买</span>
</div>
</a>
<a class="item" href="#">
<div class="item-cover">
<img src="static/images/O1CN01wGqjW51DJLqfuZWOl_!!2206999970195-0-lubanu-s.jpg_500x500q90.jpg_.webp">
</div>
<div class="item-title"><h3>治疗蕉绿女孩适用13/14Pro/Max苹果12手机壳iPhonese硅胶iPhoneX/XS防摔XR保护套SE2女款14plus情侣8/7p软7韩</h3></div>
<div class="item-info">
<span class="item-currency">￥</span>
<span class="item-price">9.9</span>
<span class="item-payed"><cite>61</cite>人已购买</span>
</div>
</a>
<a class="item" href="#">
<div class="item-cover">
<img src="static/images/O1CN01wGqjW51DJLqfuZWOl_!!2206999970195-0-lubanu-s.jpg_500x500q90.jpg_.webp">
</div>
<div class="item-title"><h3>治疗蕉绿女孩适用13/14Pro/Max苹果12手机壳iPhonese硅胶iPhoneX/XS防摔XR保护套SE2女款14plus情侣8/7p软7韩</h3></div>
<div class="item-info">
<span class="item-currency">￥</span>
<span class="item-price">9.9</span>
<span class="item-payed"><cite>61</cite>人已购买</span>
</div>
</a>
</div>
</div>
<div class="footer">
<div class="container">
<a class="item" href="#"><i class="iconfont"></i></a>
<a class="item" href="#"><i class="iconfont"></i><span>购物车</span></a>
<a class="item" href="#"><i class="iconfont"></i><span>我的淘宝</span></a>
</div>
</div>
</body>
</html>
