search

博客列表 >Grid /编写淘宝网PC端首页布局

Grid /编写淘宝网PC端首页布局

          
          原创
2022年11月02日 10:30:04423浏览
  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>

运行结果

还未完成

上一条：淘宝首页丐版下一条：10.28作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多