亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 27
粉絲 1
評論 2
訪問量 96966
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Grid /編寫淘寶網(wǎng)PC端首頁布局
          
原創(chuàng)
677人瀏覽過
  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. <!--    作業(yè)內(nèi)容：-->
  12. <!--    1. 使用Grid / Flex , 編寫淘寶網(wǎng)PC端首頁布局-->
  13. <!--    2. (可選) 嘗試動手實現(xiàn)淘寶移動端首頁的主導航和商品列表-->
  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.         /* 寶貝搜索下面的產(chǎn)品超鏈接*/
  128.         .search{
  129.             position:absolute;
  130.             top: 50px;
  131.             font-size: 12px;
  133.         }
  134.         /*寶貝搜索下面的產(chǎn)品超鏈接間距*/
  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="">網(wǎng)頁無障礙</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="">聯(lián)系客服 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="">內(nèi)衣</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="">數(shù)碼</a>
  289.                 <span>/</span>
  290.                 <a href="">企業(yè)禮品 </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="">醫(yī)藥</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>

運行結(jié)果

還未完成

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：已完成的部分效果還不錯, 繼續(xù)加油
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學