手机/平板效果图
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>
Correcting teacher：
PHPz
Correction status：qualified
Teacher's comments：实现效果很好，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
