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

搜索
博主信息
博文 70
粉絲 1
評(píng)論 0
訪問(wèn)量 67282
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
京東app頁(yè)眉-推薦-頁(yè)腳制作
葡萄枝子
原創(chuàng)
1442人瀏覽過(guò)

京東app頁(yè)眉-推薦-頁(yè)腳制作

作業(yè)內(nèi)容：京東app首頁(yè)，選擇導(dǎo)航，頁(yè)眉，頁(yè)腳，秒殺，推薦等，任選二個(gè)組件完成即可

  • 頁(yè)眉，推薦，頁(yè)腳代碼
  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>JD home</title>
  8.     <link rel="stylesheet" href="static/css/jd.css">
  9. </head>
  11. <body>
  12.     <!-- 頁(yè)眉 -->
  13.     <header>
  14.         <!-- 導(dǎo)航圖標(biāo) -->
  15.         <div class="menu iconfont icon-daohang"></div>
  16.         <!-- 中間搜索框 -->
  17.         <div class="search">
  18.             <div class="logo">JD</div>
  19.             <div class="zoom iconfont icon-sousuo"></div>
  20.             <input class="words" type="text" name="search" value="超薄本" />
  21.         </div>
  22.         <!-- 登錄鏈接 -->
  23.         <div class="login"><a href="">登錄</a></div>
  24.     </header>
  25.     <!-- 主體 -->
  26.     <main>
  27.         <h2>猜你喜歡</h2>
  28.         <ul>
  29.             <li class="item">
  30.                 <a href=""><img
  31.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/118759/27/18140/174299/5f639d55Eff2fb460/f0a383120faa5213.jpg!q70.dpg.webp"
  32.                         alt=""></a>
  33.                 <p>100支長(zhǎng)絨棉歐式北歐風(fēng)輕奢四件套全棉純棉床單床笠被套酒店三件套床上用品4 夢(mèng)藍(lán)銀灰 1.8m床單款四件套(被套200*230cm)</p>
  34.                 <div class="price">
  35.                     <div>￥ 498</div>
  36.                     <div>看相似</div>
  37.                 </div>
  38.             </li>
  39.             <li class="item">
  40.                 <a href=""><img
  41.                         src="https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/148010/28/8733/166712/5f65b4c5E8506b16c/71f1adfb1a49b10f.jpg!q70.dpg.webp"
  42.                         alt=""></a>
  43.                 <p>超媛加絨加厚中長(zhǎng)款打底衫女冬季新款顯瘦大碼女裝上衣立領(lǐng)外穿連衣裙FF-A015-C#9916你 黑色 S</p>
  44.                 <div class="price">
  45.                     <div>￥ 498</div>
  46.                     <div>看相似</div>
  47.                 </div>
  48.             </li>
  49.             <li class="item">
  50.                 <a href=""><img
  51.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/150600/39/11576/322314/5fdf806bE968752a7/e96be941acbffd20.jpg!q70.dpg.webp"
  52.                         alt=""></a>
  53.                 <p>芬騰 保暖內(nèi)衣女士套裝秋衣秋褲秋冬季新品棉質(zhì)修身圓領(lǐng)少女棉毛衫長(zhǎng)袖長(zhǎng)褲打底衫女 淺紫（蕾絲領(lǐng)） M </p>
  54.                 <div class="price">
  55.                     <div>￥ 498</div>
  56.                     <div>看相似</div>
  57.                 </div>
  58.             </li>
  59.             <li class="item">
  60.                 <a href=""><img
  61.                         src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/135532/8/9634/253738/5f59df91Ec8d59432/dafe418dc6f75762.jpg!q70.dpg.webp"
  62.                         alt=""></a>
  63.                 <p>@潮牌許劉芒1970s紫外線變色高幫手繪帆布鞋女2020春秋款百搭ulzzang日系女生板鞋 黑色(高 幫款，陽(yáng)光下變色時(shí)效8小時(shí)) 39</p>
  64.                 <div class="price">
  65.                     <div>￥ 498</div>
  66.                     <div>看相似</div>
  67.                 </div>
  68.             </li>
  69.         </ul>
  70.     </main>
  71.     <!-- 頁(yè)腳 -->
  72.     <footer>
  73.         <div>
  74.             <div class="iconfont icon-shouye"></div>
  75.             <span>主頁(yè)</span>
  76.         </div>
  77.         <div>
  78.             <div class="iconfont icon-fenlei"></div>
  79.             <span>分類(lèi)</span>
  80.         </div>
  81.         <div>
  82.             <div class="iconfont icon-jingxi"></div>
  83.             <span>京喜</span>
  84.         </div>
  85.         <div>
  86.             <div class="iconfont icon-gouwuche-01"></div>
  87.             <span>購(gòu)物車(chē)</span>
  88.         </div>
  89.         <div>
  90.             <div class="iconfont icon-denglu"></div>
  91.             <span>未登錄</span>
  92.         </div>
  93.     </footer>
  94. </body>
  96. </html>
  • 引入的 static/css/jd.css 樣式
  1. /* 導(dǎo)入初始化 css */
  2. @import 'reset.css';
  4. /*
  5. 導(dǎo)入7個(gè)字體圖標(biāo)
  6. icon-shouye 首頁(yè)
  7. icon-gouwuche-01 購(gòu)物車(chē)
  8. icon-daohang 導(dǎo)航
  9. icon-denglu 登錄
  10. icon-fenlei 分類(lèi)
  11. icon-jingxi 驚喜
  12. icon-sousuo 搜索
  13. */
  14. @import '//at.alicdn.com/t/font_2289282_a45l8mmz4j.css';
  16. /* 頁(yè)眉 */
  17. header {
  18.     position: fixed;
  19.     top: 0;
  20.     left: 0;
  21.     right: 0;
  22.     background-color: red;
  23.     height: 4rem;
  24.     /* flex 容器 */
  25.     display: flex;
  26.     /* 交叉軸居中 */
  27.     align-items: center;
  28.     z-index: 100;
  29. }
  31. /* 左邊菜單按鈕 */
  32. header .menu {
  33.     flex: 1;
  34.     text-align: center;
  35.     color: white;
  36. }
  38. /* 中間搜索框 */
  39. header .search {
  40.     flex: 6;
  41.     display: flex;
  42.     align-items: center;
  43.     border-radius: 2em;
  44.     background-color: white;
  45.     height: 2.5rem;
  46. }
  47. /* logo */
  48. header .search .logo {
  49.     color: red;
  50.     flex: 0 1 2em;
  51.     font-size: 1.5rem;
  52.     text-align: center;
  53. }
  54. /* 搜索圖標(biāo) */
  55. header .search .zoom {
  56.     flex: 0 1 2em;
  57.     text-align: center;
  58.     border-left: 1px solid #ccc;
  59. }
  60. /* 輸入框 */
  61. header .search .words {
  62.     border: none;
  63.     outline: none;
  64.     color: #bbb;
  65. }
  67. /* 右邊登錄鏈接 */
  68. header .login {
  69.     flex: 1;
  70.     text-align: center;
  71. }
  72. header .login a{
  73.     color: white;
  74.     font-size: 1.2rem;
  75. }
  77. /* 主體 */
  78. main {
  79.     position: absolute;
  80.     top: 4rem;
  81.     left: 0;
  82.     reight: 0;
  83.     bottom: 4.5rem;
  84. }
  85. main h2 {
  86.     text-align: center;
  87.     margin: .5em 0;
  88. }
  90. main ul {
  91.     /* 轉(zhuǎn)flex容器 */
  92.     display: flex;
  93.     /* 主軸橫向，交叉軸換行 */
  94.     flex-flow: row wrap;
  95. }
  96. main ul .item {
  97.     flex: 1 1 50%;
  98.     padding: .5em;
  99. }
  100. main ul .item a img {
  101.     width: 100%;
  102. }
  103. main ul .item p {
  104.     font-size: 1.25rem;
  105.     margin:.4em 0;
  106. }
  107. main ul .item .price {
  108.     display: flex;
  109.     /* 兩端對(duì)齊 */
  110.     justify-content: space-between;
  111. }
  112. main ul .item .price div:first-of-type {
  113.     color:red;
  114.     font-size: 1.4rem;
  115. }
  116. main ul .item .price div:last-of-type {
  117.     background-color: #ddd;
  118.     border-radius: 1em;
  119.     padding: .5em;
  120. }
  122. /* 頁(yè)腳 */
  123. footer {
  124.     position: fixed;
  125.     bottom: 0;
  126.     left: 0;
  127.     right: 0;
  128.     height: 4.5rem;
  129.     background-color: #eee;
  130.     /* 轉(zhuǎn)flex容器 */
  131.     display: flex;
  132.     /* 分散對(duì)齊 */
  133.     justify-content: space-around;
  134.     /* 交叉軸居中 */
  135.     align-items: center;
  137. }
  138. footer > div {
  139.     /* 將flex容器項(xiàng)目居中 */
  140.     display: flex;
  141.     flex-flow: column nowrap;
  142.     align-items: center;
  143. }
  • 導(dǎo)入的 reset.css 樣式是默認(rèn)的
  1. /* reset css */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. li {
  8.     list-style: none;
  9. }
  10. a {
  11.     color: #7b7b7b;
  12.     text-decoration: none;
  13. }
  14. body {
  15.     background-color: #F6F6F6;
  16. }
  17. html {
  18.     font-size: 10px;
  19. }
  21. /* 媒體查詢(xún) */
  22. @media screen and (min-width: 480px) {
  23.     html {
  24.         font-size: 12px;
  25.     }
  26. }
  27. @media screen and (min-width: 640px) {
  28.     html {
  29.         font-size: 14px;
  30.     }
  31. }
  32. @media screen and (min-width: 720px) {
  33.     html {
  34.         font-size: 16px;
  35.     }
  36. }
  • 導(dǎo)入的阿里 iconfont 7 個(gè)字體圖標(biāo)

鏈接為 https://at.alicdn.com/t/font_2289282_a45l8mmz4j.css

  • 附上制作圖

京東app頁(yè)眉推薦頁(yè)腳制作

批改老師：天蓬老師天蓬老師

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

老師批語(yǔ)：RMB是一個(gè)字體圖標(biāo), 不是一個(gè)符號(hào)
本博文版權(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é)