Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid /编写淘宝网PC端首页布局
Blogger Information
Blog 27
fans 1
comment 2
visits 90432
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
Grid /编写淘宝网PC端首页布局
          
Original
422 people have browsed it
  1. <!doctype html>
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="my/css.css">
  10.     <link rel="stylesheet" href="font_icon/iconfont.css">
  11. <!--    作业内容：-->
  12. <!--    1. 使用Grid / Flex , 编写淘宝网PC端首页布局-->
  13. <!--    2. (可选) 尝试动手实现淘宝移动端首页的主导航和商品列表-->
  14.     <style>
  15.         /*鼠标移上去的样式*/
  16.         header a:hover{
  17.             color: red;
  18.         }
  19.         /*字体大小  间距*/
  20.         .top_right >a,.top_left>a,.top_left>span{
  21.             color: #6C6C6C;
  22.             font-size: 12px;
  23.             padding-left: 15px;
  24.             cursor: pointer;
  25.         }
  26.         .top_left, .top_right{
  27.             padding-top: 3px;
  28.             /*margin-left:191px*/
  29.         }
  30.         header  {
  32.             display: grid;
  33.             background-color: #f5f5f5;
  34.             grid-template-rows:35px;
  35.             grid-template-columns: repeat(2,605px);
  36.             place-content: center;
  37.         }
  38.         .top_right{
  39.             padding-left:84px
  40.         }
  41.         /*商品分类 免费开店间距单独处理*/
  42.         .top_right a:nth-of-type(5){
  43.             padding-left: 1px;
  44.         }
  45.         /*商品分类，免费开店间距*/
  46.         .top_right span{
  47.             margin-left: 10px;
  48.             color: #ddd;
  49.             margin-right: -9px;
  50.         }
  51.         /*亲，请登录红色处理*/
  52.         .top_left a:first-of-type{
  53.             color: red;
  54.         }
  56.         .a1{
  57.              display: grid;
  58.              grid-template-rows: 100px;
  59.              grid-template-columns:100px repeat(5,209px);
  60.              place-content: center;
  61.              gap: 8px;
  62.              width: 100%;
  63.              background-color: #ff72b5;
  64.              position: relative;
  67.          }
  68.         .a1>a:first-of-type>img{
  69.              /*border: 1px solid red;*/
  70.              width: 80px;
  71.              height: 80px;
  72.          }
  73.         .a1 >a{
  74.              margin-top: 10px;
  75.              padding-right: 50px;
  77.          }
  79.         .icobk{
  80.             position: absolute;
  81.             top: 14px;
  82.             margin-left: -75px;
  83.             border-radius:10px;
  84.             height: 66px;
  85.         }
  88.         .main{
  89.             display: grid;
  90.             grid-template-rows: 100px;
  91.             grid-template-columns: repeat(4,300px);
  92.             place-content: center;
  94.         }
  95.         /*LOG部分*/
  96.         .logo {
  97.             width: 143px;
  98.             place-self: center start;
  99.         }
  100.         .iput{
  101.             border: 2px solid #FF5000;
  102.             width: 600px;
  103.             border-radius: 30px;
  104.             place-self: center;
  105.             position: relative;
  106.             padding-left:10px;
  107.         }
  108.         /*输入框行高*/
  109.         .iput span{
  110.             line-height:40px;
  111.             margin-left: 10px;
  112.         }
  113.         /*输入框的竖线*/
  114.         .iput span:nth-of-type(2){
  115.             border-left: 1px solid #F3F0F0;
  116.             color: #9b9b9b;
  117.             padding-left: 10px;
  118.         }
  119.         /*输入框美化，去除边框线*/
  120.         .iput>span>input{
  121.             height: 38px;
  122.             width: 400px;
  123.             color: red;
  124.             border: none;
  125.             background-color: white;
  126.         }
  127.         /* 宝贝搜索下面的产品超链接*/
  128.         .search{
  129.             position:absolute;
  130.             top: 50px;
  131.             font-size: 12px;
  133.         }
  134.         /*宝贝搜索下面的产品超链接间距*/
  135.         .search >a{
  136.             margin-left: 10px;
  137.             color: #666;
  138.         }
  139.         /*提交按钮*/
  140.         .iput > button{
  141.             color: white;
  142.             width: 80px;
  143.             background-image: linear-gradient(145deg,#ff9000,#ff5000 77%);
  144.             font-weight: 700;
  145.             border: 1px solid red;
  146.             right: 2px;
  147.             padding-top: 1px;
  148.             position: absolute;
  149.             border-radius: 30px;
  150.             bottom:3px;
  151.             font-size: 20px;
  152.             height: 35px;
  153.         }
  155.         .a1>a>h3,.a1>a>p{
  156.             position: relative;
  157.             right: 0;
  158.             top: -66px;
  159.             left: 29px;
  160.             color: white;
  161.         }
  162.         /*二维码大小*/
  163.         .qr .obj{width: 75px;border: 1px solid silver; margin-top: 10px}
  164.         .qr>.obj>img{width: 60px;margin: 6px 0 0 6px;}
  165.         .qr>.obj>small{
  166.             display: block;
  167.             font-size: 12px;
  168.             margin: 6px 0 0 6px;
  169.             margin-left: 9px;
  170.             color: red;
  173.         }
  174.         .qr {
  175.             grid-area: 1/4/1/span 3;
  176.             margin-left:217px;
  177.         }
  179.         .bananer{
  180.             display: grid;
  181.             grid-template-rows: 410px;
  182.             grid-template-columns: 270px 900px ;
  183.             place-content: center;
  184.             margin-top:40px
  185.         }
  186.         /*分类*/
  187.         .left_class{
  188.             /*margin: 50px 0 0 0;*/
  189.             background-color: #F7F9FA;
  190.             border-radius: 10px;
  192.         }
  193.         .nav{
  194.             display: grid;
  195.             grid-template-rows: 40px 100px;
  196.             grid-template-columns: 900px 100px ;
  197.             grid-auto-flow: column;
  198.             margin-left: 10px;
  199.         }
  200.     </style>
  201. </head>
  202. <body>
  203. <header>
  204.     <div class="top_left">
  205.         <span>中国大陆 v</span>
  206.         <a href="">亲，请登录</a>
  207.         <a href="">免费注册</a>
  208.         <a href="">手机逛淘宝</a>
  209.         <a href="">网页无障碍</a>
  210.     </div>
  211.     <div class="top_right">
  212.         <a href="">我的淘宝 v</a>
  213.         <a href="">购物车</a>
  214.         <a href="">收藏夹 v</a>
  215.         <a href="">商品分类</a>
  216.         <a href="">免费开店</a>
  217.         <span> |</span>
  218.         <a href="">千牛卖家中心 v</a>
  219.         <a href="">联系客服 v</a>
  220.     </div>
  222. </header>
  223. <div class="a1">
  224.         <a  href=""><img src="my/img/tm.png"  alt=""></a>
  225.         <a href=""><img src="my/img/bg1.png" alt=""><img class= 'icobk' src="my/img/b1.webp" alt=""><h3>家装百科</h3><p>避坑指南</p></a>
  226.         <a href=""><img src="my/img/bg2.png" alt=""><img class= 'icobk' src="my/img/b2.webp" alt=""><h3>图像音像</h3><p>热度好书推荐</p></a>
  227.         <a href=""><img src="my/img/bg3.png" alt=""><img class= 'icobk' src="my/img/b3.webp" alt=""><h3>开新出行</h3><p>爆款破冰价</p></a>
  228.         <a href=""><img src="my/img/bg4.png" alt=""><img class= 'icobk' src="my/img/b4.webp" alt=""><h3>国潮东方</h3><p>不止5折</p></a>
  229.         <a href=""><img src="my/img/bg5.png" alt=""><img class= 'icobk' src="my/img/b5.webp" alt=""><h3>全球家电</h3><p>抢5折家电</p></a>
  230.     </div>
  231. <!--LOGO输入框-->
  232. <div class="main"  >
  233.     <div class="logo"><img src="my/img/taobao.png" alt=""></div>
  234.     <div class="iput">
  235.         <span>宝贝 v</span>
  236.         <span><input placeholder="连衣裙"></span>
  237.         <button type="submit">提交</button>
  238.         <div class="search">
  239.             <a href="">新款连衣裙</a>
  240.             <a href="">四件套</a>
  241.             <a href="">潮流T恤</a>
  242.             <a href="">时尚女鞋</a>
  243.             <a href="">短裤</a>
  244.             <a href="">半身裙</a>
  245.             <a href="">男士外套</a>
  246.             <a href="">墙纸</a>
  247.             <a href="">行车记录仪</a>
  248.         </div>
  249.     </div>
  250.     <div class="qr">
  251.         <div class="obj"><small>下载淘宝</small><img src="my/img/qr.png"></div>
  252.     </div>
  254. </div>
  256. <div class="bananer">
  257.     <!--        分类-->
  258.     <div class="left_class">
  259.         <h3>分类</h3>
  260.         <ul>
  261.             <li> <span class="iconfont icon-qunzi"></span>
  262.                 <a href="">女装</a>
  263.                 <span>/</span>
  264.                 <a href="">内衣</a>
  265.                 <span>/</span>
  266.                 <a href="">奢品 </a></li>
  267.             <li> <span class="iconfont icon-chunjishangxin-peishi-"></span>
  268.                 <a href="">女鞋</a>
  269.                 <span>/</span>
  270.                 <a href="">男鞋</a>
  271.                 <span>/</span>
  272.                 <a href="">箱包 </a></li>
  273.             <li> <span class="iconfont icon-meizhuang"></span>
  274.                 <a href="">美妆</a>
  275.                 <span>/</span>
  276.                 <a href="">饰品</a>
  277.                 <span>/</span>
  278.                 <a href="">洗护 </a></li>
  279.             <li> <span class="iconfont icon-nanzhuang"></span>
  280.                 <a href="">男装</a>
  281.                 <span>/</span>
  282.                 <a href="">运动</a>
  283.                 <span>/</span>
  284.                 <a href="">百货 </a></li>
  285.             <li> <span class="iconfont icon-qunzi"></span>
  286.                 <a href="">手机</a>
  287.                 <span>/</span>
  288.                 <a href="">数码</a>
  289.                 <span>/</span>
  290.                 <a href="">企业礼品 </a></li>
  291.             <li> <span class="iconfont icon-weibiaoti2fuzhi13"></span>
  292.                 <a href="">家装</a>
  293.                 <span>/</span>
  294.                 <a href="">电器</a>
  295.                 <span>/</span>
  296.                 <a href="">车品 </a></li>
  297.             <li> <span class="iconfont icon-shipin"></span>
  298.                 <a href="">食品</a>
  299.                 <span>/</span>
  300.                 <a href="">生鲜</a>
  301.                 <span>/</span>
  302.                 <a href="">母婴 </a></li>
  303.             <li> <span class="iconfont icon-yiyaoxiang
  304. "></span>
  305.                 <a href="">医药</a>
  306.                 <span>/</span>
  307.                 <a href="">保健</a>
  308.                 <span>/</span>
  309.                 <a href="">进口 </a></li>
  310.         </ul>
  311.     </div>
  313.     <div class="nav">
  314.         <!--        bananer上面的文字-->
  315.         <div class="tianmao">
  316.             <a href="">天猫</a>
  317.             <span> |</span>
  318.             <a href="">聚划算</a>
  319.             <span> |</span>
  320.             <a href="">天猫超市</a>
  321.             <span> |</span>
  322.             <a href="">司法拍卖</a>
  323.             <span> |</span>
  324.             <a href="">飞猪旅行</a>
  325.             <span> |</span>
  326.             <a href="">天天特卖</a>
  327.             <span> |</span>
  328.             <a href="">极有家</a>
  329.             <span> |</span>
  330.             <a href="">淘宝直播</a>
  332.         </div>
  333.         <!--            bananer图-->
  334. <!--        <div class="bananer_img">-->
  335. <!--            <img style="height: 50px" src="my/img/bananer.jpg" alt=""></div>-->
  336.         <div class="self_person"></div>
  337.     </div>
  338.     <!--    个人中心-->
  339.     <div class="persons"></div>
  340. </div>
  341. <br>
  342. <br>
  343. <br>
  344. <br>
  345. <br>
  346. <br>
  347. <br>
  349. <footer style="background-color: silver;height: 80px;text-align: center;color: red">
  350.     页脚
  351. </footer>
  352. </body>
  353. </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