Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 淘宝PC端框架
Blogger Information
Blog 35
fans 0
comment 0
visits 16754
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
淘宝PC端框架
手机用户311660634
Original
538 people have browsed it

```html
<!DOCTYPE html>

<html lang="en">

<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>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>

<style>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
min-height: 2000px;
background-color: pink;
}
/ 顶部栏目 /
.header {
width: 1190px;
height: 35px;
background-color:lightgray;
margin: auto;

}
/ 主体 /
main {
min-width: 940px;
max-width: 1190px;
min-height: 1500px;
margin: auto;
padding: 20px;
background-color: lightblue;
}
/ 搜索 /
main .search {
height: 112px;
display: grid;
grid-template-columns: 196px 1fr;
gap: 0 20px;
position: sticky;
top:0;

}
main .search > {
background-color: rgb(72, 213, 138);
}
/ 搜索框 */
main .search > .input {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 18px ;
gap: 10px;

}
main .search .input .ssk{
background-color: red;
}
main .search .input .kslj{
background-color: blue;
}
/ 分类加快速入口加登录 /
main .two {
height: 430px;
display: grid;
grid-template-columns: 220px 1fr 340px;
gap: 0 20px;
margin: 20px 0;
}
main .two >{
background-color: white;
}
/ 快速入口 */
main .two .ksrk{
height: 430px;
display: grid;
grid-template-rows: 30px 1fr 167px;
gap: 8px;

}

main .two .ksrk .biaoti{
background-color: lightgreen;
}
/ 超值好货 /
main .two .ksrk .czhh{

  1. display: grid;
  2. grid-template-columns: repeat(2, 1fr);
  3. gap: 5px;
  4. /* background-color: green; */

}
main .two .ksrk .czhh.one{
background-color: green;
}
main .two .ksrk .czhh.to{
background-color:red;
}
/ 全民口碑 /
main .two .ksrk .koubei{
display: grid;
grid-template-rows: 30px 1fr;
gap:10px
}
main .two .ksrk .koubei span{
background-color: pink;
}
main .two .ksrk .koubei .tupian{
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 10px;
background-color: yellow;
}
/ 登录 /
main .two .login{
display: grid;
grid-template-rows: 200px 50px 1fr;
gap: 8px;
background-color: orange;
}

main .two .login .denglu{
background-color: blue;
}
main .two .login .vip{
display: grid;
grid-template-rows: 30px 1fr;
gap: 5px;
padding: 2px;
}

main .two .login .vip .fuwu{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 5px;
}
/ 广告图 /
main .guanggaotu {

  1. height: 72px;
  2. margin: 10px auto;
  3. background-color: rgb(50, 164, 48);

}
/ 商品列表 /
main .shangpin{
display: grid;
grid-template-rows: 36px repeat(2.1fr);
gap: 8px;
/ background-color:red; /
}
main .shangpin .spb{
min-height: 500px;
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 10px;

}
main .shangpin .spb > ,{
/ background-color: yellow; /
}
main .shangpin .spb .spnr{
height: 324px;
display: grid;
grid-template-rows:215px 66px 1fr ;
/ grid-auto-rows: 324px; /
gap: 5px;
background-color: yellow;

}</style>

<body>
<div class="header"></div>
<main>
<div class="search">
<div class="logo"><a href=""><img src="" alt=""></a></div>
<div class="input">
<div class="ssk">1</div>
<div class="kslj">2</div>
</div>
</div>
<div class="two">
<div class="fenlei"></div>
<div class="ksrk">
<div class="biaoti"></div>
<div class="czhh">
<div class="czhh one">
<span></span>
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
</div>
<div class="czhh to">
<span></span>
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
</div>
</div>

  1.             <div class="koubei">
  2.                 <span></span>
  3.                 <div class="tupian">
  4.                     <a href=""><img src="" alt=""></a>
  5.                     <a href=""><img src="" alt=""></a>
  6.                     <a href=""><img src="" alt=""></a>
  7.                     <a href=""><img src="" alt=""></a>
  8.                     <a href=""><img src="" alt=""></a>
  9.                 </div>
  10.             </div>
  11.         </div>
  12.         <div class="login">
  13.             <div class="touxiang"></div>
  14.             <div class="denglu">
  15.                 <a href="" class="dlym"></a>
  16.                 <a href="" class="zcym"></a>
  17.             </div>
  18.             <div class="vip">
  19.                 <span><h3></h3></span>
  20.                 <div class="fuwu">
  21.                     <div>
  22.                     <a href=""><img src="" alt=""></a>
  23.                     <a href=""></a>
  24.                 </div>
  25.                 <div>
  26.                     <a href=""><img src="" alt=""></a>
  27.                     <a href=""></a>
  28.                 </div>
  29.                 <div>
  30.                     <a href=""><img src="" alt=""></a>
  31.                     <a href=""></a>
  32.                 </div>
  33.                 <div>
  34.                     <a href=""><img src="" alt=""></a>
  35.                     <a href=""></a>
  36.                 </div>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     </div>
  41.     <!-- 广告图 -->
  42.     <div class="guanggaotu"><a href=""><img src="" alt=""></a></div>
  43.     <!-- 猜你喜欢 -->
  44.     <div class="shangpin">
  45.         <span><h3>猜你喜欢</h3></span>
  46.         <div class="spb">
  47.         <div class="spnr">
  48.             <a href=""><img src="" alt=""></a>
  49.             <a href="">商品简介</a>
  50.             <span>￥188 688人已付款</span>
  51.         </div>
  52.         <div class="spnr">
  53.             <a href=""><img src="" alt=""></a>
  54.             <a href="">商品简介</a>
  55.             <span>￥188 688人已付款</span>
  56.         </div>
  57.         <div class="spnr">
  58.             <a href=""><img src="" alt=""></a>
  59.             <a href="">商品简介</a>
  60.             <span>￥188 688人已付款</span>
  61.         </div>
  62.         <div class="spnr">
  63.             <a href=""><img src="" alt=""></a>
  64.             <a href="">商品简介</a>
  65.             <span>￥188 688人已付款</span>
  66.         </div>
  67.         <div class="spnr">
  68.             <a href=""><img src="" alt=""></a>
  69.             <a href="">商品简介</a>
  70.             <span>￥188 688人已付款</span>
  71.         </div>
  73.     </div>
  74.     </div>
  75. </main>

</body>
</html>
```

由于我这里打开的淘宝没有媒体查询功能

Correcting teacher：PHPzPHPz

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!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post