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

搜索
博主信息
博文 45
粉絲 3
評(píng)論 0
訪問(wèn)量 56575
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
仿京東商城頁(yè)面
殘破的蛋蛋
原創(chuàng)
1434人瀏覽過(guò)

仿京東APP商城首頁(yè)

利用所學(xué)的HTML、CSS寫(xiě)一個(gè)純前端的頁(yè)面

用到的知識(shí)：

  1. HTML

  2. CSS

  3. iconfont圖標(biāo)組件

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>多快好省，購(gòu)物上京東</title>
  8.     <link rel="stylesheet" href="static/css/reset.css">
  9.     <!-- 字體圖標(biāo) -->
  10.     <link rel="stylesheet" href="static/font/icon-font/iconfont.css">
  11.     <link rel="stylesheet" href="static/css/index.css">
  12.     <!-- 頁(yè)頭 -->
  13.     <link rel="stylesheet" href="static/css/header.css">
  14.     <!-- 輪播海報(bào) -->
  15.     <link rel="stylesheet" href="static/css/swiper.css">
  16.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  17.     <!-- nav -->
  18.     <link rel="stylesheet" href="static/css/nav.css">
  19.     <!-- 秒殺 -->
  20.     <link rel="stylesheet" href="static/css/miaosha.css">
  21.     <!-- 商品推薦 -->
  22.     <link rel="stylesheet" href="static/css/recommend.css">
  23.     <!-- 精選會(huì)場(chǎng) -->
  24.     <link rel="stylesheet" href="static/css/fetured.css">
  25.     <!-- footer -->
  26.     <link rel="stylesheet" href="static/css/footer.css">
  27. </head>
  29. <body style="background-color: #f6f6f6;">
  30.     <!-- 外層包裹區(qū) -->
  31.     <div class="wrap">
  32.         <!-- 頁(yè)頭 -->
  33.         <div class="header">
  34.             <div class="menu iconfont icon-menu"></div>
  35.             <div class="search-wrap">
  36.                 <div class="logo"></div>
  37.                 <div class="search iconfont icon-search"></div>
  38.                 <input type="text" class="keywords" value="蘋(píng)果筆記本">
  39.             </div>
  40.             <!-- 登陸按鈕 -->
  41.             <div class="login"><a href="">登錄</a></div>
  42.         </div>
  43.         <!-- 主體 -->
  44.         <div class="main">
  45.             <!-- 輪播海報(bào) -->
  46.             <div class="swiper-wrap">
  47.                 <div class="swiper-bg"></div>
  48.                 <div class="swiper-container">
  49.                     <div class="swiper-wrapper">
  50.                         <div class="swiper-slide">
  51.                             <a href=""><img src="http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/140337/4/18669/96106/5fd9d7f6E4333ed06/1b2de05f19c6c7a8.jpg!q70.jpg.dpg" alt=""></a>
  52.                         </div>
  53.                         <div class="swiper-slide">
  54.                             <a href=""><img src="http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/149128/9/19904/144486/5fe3ee2aE7ad7fd5d/300fa1e6d033c92b.jpg!q70.jpg.dpg" alt=""></a>
  55.                         </div>
  56.                         <div class="swiper-slide">
  57.                             <a href=""><img src="http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/150964/16/11261/90681/5fdc6ba8E40256a92/ba1066ab8e1348e1.jpg!q70.jpg.dpg" alt=""></a>
  58.                         </div>
  59.                     </div>
  60.                     <!-- 如果需要分頁(yè)器 -->
  61.                     <div class="swiper-pagination"></div>
  62.                     <!-- 如果需要導(dǎo)航按鈕 -->
  63.                     <!-- <div class="swiper-button-prev"></div>
  64.                     <div class="swiper-button-next"></div> -->
  65.                     <!-- 如果需要滾動(dòng)條 -->
  66.                     <!-- <div class="swiper-scrollbar"></div> -->
  67.                 </div>
  68.                 <!-- 引入輪播海報(bào)js -->
  69.                 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
  70.                 <script>
  71.                     const swiper = new Swiper('.swiper-container', {
  72.                         loop: true,
  73.                         pagination: {
  74.                             el: '.swiper-pagination',
  75.                         }
  76.                     });
  77.                 </script>
  78.             </div>
  79.             <!-- 導(dǎo)航圖標(biāo) -->
  80.             <div class="nav">
  81.                 <ul>
  82.                     <li><a href=""><img src="static/images/nav/nav-1.png" alt="1"><span>京東超市</span></a></li>
  83.                     <li><a href=""><img src="static/images/nav/nav-2.png" alt="1"><span>數(shù)碼電器</span></a></li>
  84.                     <li><a href=""><img src="static/images/nav/nav-3.png" alt="1"><span>京東服飾</span></a></li>
  85.                     <li><a href=""><img src="static/images/nav/nav-4.png" alt="1"><span>京東生鮮</span></a></li>
  86.                     <li><a href=""><img src="static/images/nav/nav-5.png" alt="1"><span>京東到家</span></a></li>
  87.                     <li><a href=""><img src="static/images/nav/nav-6.png" alt="1"><span>充值繳費(fèi)</span></a></li>
  88.                     <li><a href=""><img src="static/images/nav/nav-7.png" alt="1"><span>9.9元拼團(tuán)</span></a></li>
  89.                     <li><a href=""><img src="static/images/nav/nav-8.png" alt="1"><span>領(lǐng)券</span></a></li>
  90.                     <li><a href=""><img src="static/images/nav/nav-9.png" alt="1"><span>借錢(qián)</span></a></li>
  91.                     <li><a href=""><img src="static/images/nav/nav-10.png" alt="1"><span>PLUS會(huì)員</span></a></li>
  92.                 </ul>
  93.             </div>
  94.             <!-- 秒殺 -->
  95.             <div class="miaosha">
  96.                 <div class="title-wrap">
  97.                     <div class="left">
  98.                         <div class="miaosha-title">京東秒殺</div>
  99.                         <div class="miaosha-hourly">20</div>
  100.                         <div class="miaosha-time">
  101.                             <div class="miaosha-num miaosha-hour">20</div>
  102.                             <div class="miaosha-separator">:</div>
  103.                             <div class="miaosha-num miaosha-minute">25</div>
  104.                             <div class="miaosha-separator">:</div>
  105.                             <div class="miaosha-num miaosha-second">35</div>
  106.                         </div>
  107.                     </div>
  108.                     <div class="miaosha-more">
  109.                         <span>更多秒殺</span>
  110.                         <i></i>
  111.                     </div>
  112.                 </div>
  113.                 <div class="container-wrap">
  114.                     <div class="item-wrap">
  115.                         <a href="">
  117.                             <img src="./static/images/miaosha/ms-1.jpg" alt="">
  118.                             <div class="price">
  119.                                 <div class="c-price"><em>￥</em>39</div>
  120.                                 <div class="s-price"><s><em>￥</em>59</s></div>
  121.                             </div>
  122.                         </a>
  123.                     </div>
  124.                     <div class="item-wrap">
  125.                         <a href="">
  126.                             <img src="./static/images/miaosha/ms-2.jpg" alt="">
  127.                             <div class="price">
  128.                                 <div class="c-price"><em>￥</em>39</div>
  129.                                 <div class="s-price"><s><em>￥</em>59</s></div>
  130.                             </div>
  131.                         </a>
  132.                     </div>
  133.                     <div class="item-wrap">
  134.                         <a href="">
  135.                             <img src="./static/images/miaosha/ms-3.jpg" alt="">
  136.                             <div class="price">
  137.                                 <div class="c-price"><em>￥</em>39</div>
  138.                                 <div class="s-price"><s><em>￥</em>59</s></div>
  139.                             </div>
  140.                         </a>
  141.                     </div>
  142.                     <div class="item-wrap">
  143.                         <a href="">
  144.                             <img src="./static/images/miaosha/ms-4.jpg" alt="">
  145.                             <div class="price">
  146.                                 <div class="c-price"><em>￥</em>39</div>
  147.                                 <div class="s-price"><s><em>￥</em>59</s></div>
  148.                             </div>
  149.                         </a>
  150.                     </div>
  151.                     <div class="item-wrap">
  152.                         <a href="">
  153.                             <img src="./static/images/miaosha/ms-5.jpg" alt="">
  154.                             <div class="price">
  155.                                 <div class="c-price"><em>￥</em>39</div>
  156.                                 <div class="s-price"><s><em>￥</em>59</s></div>
  157.                             </div>
  158.                         </a>
  159.                     </div>
  160.                     <div class="item-wrap">
  161.                         <a href="">
  162.                             <img src="./static/images/miaosha/ms-6.jpg" alt="">
  163.                             <div class="price">
  164.                                 <div class="c-price"><em>￥</em>39</div>
  165.                                 <div class="s-price"><s><em>￥</em>59</s></div>
  166.                             </div>
  167.                         </a>
  168.                     </div>
  169.                 </div>
  170.             </div>
  171.             <!-- 精選會(huì)場(chǎng) -->
  172.             <div class="featured">
  173.                 <ul class="featured-wrap">
  174.                     <li class="item-wrap">
  175.                         <a href="">
  176.                             <img class="item-bg" src="./static/images/featured/bg.jpg" alt="">
  177.                             <div class="item-img">
  178.                                 <img src="./static/images/featured/1.jpg" alt="">
  179.                             </div>
  180.                             <span class="active">至高24期免息</span>
  181.                             <span class="title">OPPO自營(yíng)店</span>
  182.                         </a>
  183.                     </li>
  184.                     <li class="item-wrap">
  185.                         <a href="">
  186.                             <img class="item-bg" src="./static/images/featured/bg.jpg" alt="">
  187.                             <div class="item-img">
  188.                                 <img src="./static/images/featured/2.jpg" alt="">
  189.                             </div>
  190.                             <span class="active">滿169減30</span>
  191.                             <span class="title">除塵迎福年</span>
  192.                         </a>
  193.                     </li>
  194.                     <li class="item-wrap">
  195.                         <a href="">
  196.                             <img class="item-bg" src="./static/images/featured/bg.jpg" alt="">
  197.                             <div class="item-img">
  198.                                 <img src="./static/images/featured/3.jpg" alt="">
  199.                             </div>
  200.                             <span class="active">PLUS享9折</span>
  201.                             <span class="title">時(shí)尚美家</span>
  202.                         </a>
  203.                     </li>
  204.                     <li class="item-wrap">
  205.                         <a href="">
  206.                             <img class="item-bg" src="./static/images/featured/bg.jpg" alt="">
  207.                             <div class="item-img">
  208.                                 <img src="./static/images/featured/4.jpg" alt="">
  209.                             </div>
  210.                             <span class="active">維C低至9.9元</span>
  211.                             <span class="title">京東健康</span>
  212.                         </a>
  213.                     </li>
  214.                 </ul>
  215.             </div>
  216.             <!-- 商品推薦 -->
  217.             <div class="recommend">
  218.                 <div class="recommend-title"></div>
  219.                 <div class="recommend-wrap">
  220.                     <ul>
  221.                         <li>
  222.                             <a href="">
  223.                                 <img class="item-pic" src="http://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/145219/2/19536/399315/5fe2f1f1E85abe804/7a5d72011578ff7a.jpg!q70.dpg.webp" alt="">
  224.                                 <div class="detail">
  225.                                     <div class="title">
  226.                                         <img src="http://img11.360buyimg.com/jdphoto/s98x28_jfs/t16411/341/2502946085/2662/c4af0771/5aadf9daN1916b3f2.png" alt="">
  227.                                         戰(zhàn)神盟主 酷睿i5 9400F/GTX1060獨(dú)顯 吃雞游戲臺(tái)式機(jī)電腦主機(jī)組裝整機(jī) 電腦主機(jī) 套餐三:i7四核+1060獨(dú)顯6G電競(jìng)直播
  228.                                     </div>
  229.                                     <div class="price">
  231.                                     </div>
  232.                                 </div>
  233.                             </a>
  234.                         </li>
  235.                         <li>
  236.                             <a href="">
  237.                                 <img class="item-pic" src="http://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/145219/2/19536/399315/5fe2f1f1E85abe804/7a5d72011578ff7a.jpg!q70.dpg.webp" alt="">
  238.                                 <div class="detail">
  239.                                     <div class="title">
  240.                                         <img src="http://img11.360buyimg.com/jdphoto/s98x28_jfs/t16411/341/2502946085/2662/c4af0771/5aadf9daN1916b3f2.png" alt="">
  241.                                         戰(zhàn)神盟主 酷睿i5 9400F/GTX1060獨(dú)顯 吃雞游戲臺(tái)式機(jī)電腦主機(jī)組裝整機(jī) 電腦主機(jī) 套餐三:i7四核+1060獨(dú)顯6G電競(jìng)直播
  242.                                     </div>
  243.                                     <div class="price">
  245.                                     </div>
  246.                                 </div>
  247.                             </a>
  248.                         </li>
  249.                         <li>
  250.                             <a href="">
  251.                                 <img class="item-pic" src="http://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/145219/2/19536/399315/5fe2f1f1E85abe804/7a5d72011578ff7a.jpg!q70.dpg.webp" alt="">
  252.                                 <div class="detail">
  253.                                     <div class="title">
  254.                                         <img src="http://img11.360buyimg.com/jdphoto/s98x28_jfs/t16411/341/2502946085/2662/c4af0771/5aadf9daN1916b3f2.png" alt="">
  255.                                         戰(zhàn)神盟主 酷睿i5 9400F/GTX1060獨(dú)顯 吃雞游戲臺(tái)式機(jī)電腦主機(jī)組裝整機(jī) 電腦主機(jī) 套餐三:i7四核+1060獨(dú)顯6G電競(jìng)直播
  256.                                     </div>
  257.                                     <div class="price">
  259.                                     </div>
  260.                                 </div>
  261.                             </a>
  262.                         </li>
  263.                         <li>
  264.                             <a href="">
  265.                                 <img class="item-pic" src="http://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/145219/2/19536/399315/5fe2f1f1E85abe804/7a5d72011578ff7a.jpg!q70.dpg.webp" alt="">
  266.                                 <div class="detail">
  267.                                     <div class="title">
  268.                                         <img src="http://img11.360buyimg.com/jdphoto/s98x28_jfs/t16411/341/2502946085/2662/c4af0771/5aadf9daN1916b3f2.png" alt="">
  269.                                         戰(zhàn)神盟主 酷睿i5 9400F/GTX1060獨(dú)顯 吃雞游戲臺(tái)式機(jī)電腦主機(jī)組裝整機(jī) 電腦主機(jī) 套餐三:i7四核+1060獨(dú)顯6G電競(jìng)直播
  270.                                     </div>
  271.                                     <div class="price">
  273.                                     </div>
  274.                                 </div>
  275.                             </a>
  276.                         </li>
  277.                     </ul>
  278.                 </div>
  279.             </div>
  280.         </div>
  281.         <!-- 頁(yè)腳 -->
  282.         <div class="footer">
  283.             <ul>
  284.                 <li class="active"><a href="javascript:;"><div class="iconfont icon-home"></div><span>首頁(yè)</span></a></li>
  285.                 <li><a href="javascript:;"><div class="iconfont icon-layers"></div><span>分類</span></a></li>
  286.                 <li><a href="javascript:;"><div class="iconfont icon-kehuguanli"></div><span>京喜</span></a></li>
  287.                 <li><a href="javascript:;"><div class="iconfont icon-shopping-cart"></div><span>購(gòu)物車</span></a></li>
  288.                 <li><a href="javascript:;"><div class="iconfont icon-user"></div><span>未登錄</span></a></li>
  289.             </ul>
  290.         </div>
  291.     </div>
  292. </body>
  294. </html>
  • 效果圖


批改狀態(tài)：未批改

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

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

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