简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >模仿苏X易购手机主页布局

模仿苏X易购手机主页布局

Pharaoh
Pharaoh原创
2022年07月19日 06:07:52424浏览

实例

为了方便直接在我的博客站里创建了子目录方便观看

DEMO网站，请用手机打开http://blog.sofresh.top/0718/suning.html

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>苏X易购</title>
  8.     <link rel="stylesheet" href="css/style.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 页头 -->
  12.     <header>
  13.       <div class="background-top">
  14.         <img
  15.           src="https://image3.suning.cn/uimg/cms/img/161243730178975729.png"
  16.           alt=""
  17.         />
  18.       </div>
  20.       <div class="nav">
  21.         <div class="nav-wrapper">
  22.           <div>
  23.             <span class="iconfont icon-fenlei"></span>
  24.             <span>分类</span>
  25.           </div>
  27.           <a href=""
  28.             ><img
  29.               src="https://image1.suning.cn/uimg/cms/img/165813309260916633.gif"
  30.               alt=""
  31.           /></a>
  32.           <div>
  33.             <span class="iconfont icon-jurassic_user"></span>
  34.             <span>登录</span>
  35.           </div>
  36.         </div>
  38.         <a href="" class="search">
  39.           <span class="iconfont icon-fangdajing"></span>
  40.           <span>空调</span>
  41.         </a>
  42.       </div>
  43.     </header>
  44.     <!-- 主体 -->
  45.     <main>
  46.       <div class="background-bottom">
  47.         <img
  48.           src="https://image1.suning.cn/uimg/cms/img/161243731909884312.png"
  49.           alt=""
  50.         />
  51.         <div>
  52.           <img
  53.             src="https://oss.suning.com/adpp/creative_kit/material/picture/20220718-5e33f32d56f14669a7c810402f2497898d7794dcb6184c30.jpg?format=_is_1242w_610h"
  54.             alt=""
  55.           />
  56.         </div>
  57.       </div>
  59.       <div class="nav">
  60.         <div class="item">
  61.           <a href=""
  62.             ><img
  63.               src="https://image2.suning.cn/uimg/cms/img/165710989476671143.png?from=mobile"
  64.               alt=""
  65.           /></a>
  66.           <a href="">苏宁家电</a>
  67.         </div>
  69.         <div class="item">
  70.           <a href=""
  71.             ><img
  72.               src="https://image1.suning.cn/uimg/cms/img/161293951076282456.png?from=mobile"
  73.               alt=""
  74.           /></a>
  75.           <a href="">苏宁超市</a>
  76.         </div>
  78.         <div class="item">
  79.           <a href=""
  80.             ><img
  81.               src="https://image1.suning.cn/uimg/cms/img/161294179334814175.png?from=mobile"
  82.               alt=""
  83.           /></a>
  84.           <a href="">苏宁宜品</a>
  85.         </div>
  87.         <div class="item">
  88.           <a href=""
  89.             ><img
  90.               src="https://image1.suning.cn/uimg/cms/img/161293957567317395.png?from=mobile"
  91.               alt=""
  92.           /></a>
  93.           <a href="">手机数码</a>
  94.         </div>
  96.         <div class="item">
  97.           <a href=""
  98.             ><img
  99.               src="https://image1.suning.cn/uimg/cms/img/165711026680588659.png?from=mobile"
  100.               alt=""
  101.           /></a>
  102.           <a href="">家居家装</a>
  103.         </div>
  105.         <div class="item">
  106.           <a href=""
  107.             ><img
  108.               src="https://image1.suning.cn/uimg/cms/img/165717934177245432.png?from=mobile"
  109.               alt=""
  110.           /></a>
  111.           <a href="">服装百货</a>
  112.         </div>
  114.         <div class="item">
  115.           <a href=""
  116.             ><img
  117.               src="https://image1.suning.cn/uimg/cms/img/165717927411065855.png?from=mobile"
  118.               alt=""
  119.           /></a>
  120.           <a href="">生活家电</a>
  121.         </div>
  123.         <div class="item">
  124.           <a href=""
  125.             ><img
  126.               src="https://image1.suning.cn/uimg/cms/img/161293963977525820.png?from=mobile"
  127.               alt=""
  128.           /></a>
  129.           <a href="">签到有礼</a>
  130.         </div>
  132.         <div class="item">
  133.           <a href=""
  134.             ><img
  135.               src="https://image1.suning.cn/uimg/cms/img/161293965567020138.png?from=mobile"
  136.               alt=""
  137.           /></a>
  138.           <a href="">领券中心</a>
  139.         </div>
  141.         <div class="item">
  142.           <a href=""
  143.             ><img
  144.               src="https://image1.suning.cn/uimg/cms/img/161293968063152286.png?from=mobile"
  145.               alt=""
  146.           /></a>
  147.           <a href="">更多频道</a>
  148.         </div>
  149.       </div>
  151.       <div class="hot">
  152.         <div class="item">
  153.           <h3>苏宁特卖</h3>
  154.           <p>大牌折扣天天有</p>
  155.           <a>
  156.             <img
  157.               src="https://image1.suning.cn/uimg/cms/img/165710962835761144.jpg?format=_is_200w_200h.webp"
  158.               alt=""
  159.             /><img
  160.               src="https://image1.suning.cn/uimg/cms/img/165710963417239634.jpg?format=_is_200w_200h.webp"
  161.               alt=""
  162.             />
  163.           </a>
  164.         </div>
  166.         <div class="item">
  167.           <h3>苏宁特卖</h3>
  168.           <p>大牌折扣天天有</p>
  169.           <a>
  170.             <img
  171.               src="https://image1.suning.cn/uimg/cms/img/165710962835761144.jpg?format=_is_200w_200h.webp"
  172.               alt=""
  173.             /><img
  174.               src="https://image1.suning.cn/uimg/cms/img/165710963417239634.jpg?format=_is_200w_200h.webp"
  175.               alt=""
  176.             />
  177.           </a>
  178.         </div>
  180.         <div class="item">
  181.           <h3>苏宁特卖</h3>
  182.           <p>大牌折扣天天有</p>
  183.           <a>
  184.             <img
  185.               src="https://image1.suning.cn/uimg/cms/img/165710962835761144.jpg?format=_is_200w_200h.webp"
  186.               alt=""
  187.             /><img
  188.               src="https://image1.suning.cn/uimg/cms/img/165710963417239634.jpg?format=_is_200w_200h.webp"
  189.               alt=""
  190.             />
  191.           </a>
  192.         </div>
  194.         <div class="item">
  195.           <h3>苏宁特卖</h3>
  196.           <p>大牌折扣天天有</p>
  197.           <a>
  198.             <img
  199.               src="https://image1.suning.cn/uimg/cms/img/165710962835761144.jpg?format=_is_200w_200h.webp"
  200.               alt=""
  201.             /><img
  202.               src="https://image1.suning.cn/uimg/cms/img/165710963417239634.jpg?format=_is_200w_200h.webp"
  203.               alt=""
  204.             />
  205.           </a>
  206.         </div>
  207.       </div>
  209.       <h3>推荐榜单</h3>
  211.       <div class="recommend">
  212.         <div>
  213.           <a href=""
  214.             ><img
  215.               src="https://image.suning.cn/uimg/b2c/qrqm/0070221259000000010588681602.jpg?format=_is_200w_200h_4e.webp"
  216.               alt=""
  217.           /></a>
  218.           <span>人气榜</span>
  219.           <div>
  220.             <a href=""><p>多功能接线板榜</p></a>
  221.             <a href=""><span>卖爆350件</span></a>
  222.           </div>
  223.         </div>
  224.         <div>
  225.           <a href=""
  226.             ><img
  227.               src="https://image.suning.cn/uimg/b2c/qrqm/0070221259000000010588681602.jpg?format=_is_200w_200h_4e.webp"
  228.               alt=""
  229.           /></a>
  230.           <span>人气榜</span>
  231.           <div>
  232.             <a href=""><p>多功能接线板榜</p></a>
  233.             <a href=""><span>卖爆350件</span></a>
  234.           </div>
  235.         </div>
  236.         <div>
  237.           <a href=""
  238.             ><img
  239.               src="https://image.suning.cn/uimg/b2c/qrqm/0070221259000000010588681602.jpg?format=_is_200w_200h_4e.webp"
  240.               alt=""
  241.           /></a>
  242.           <span>人气榜</span>
  243.           <div>
  244.             <a href=""><p>多功能接线板榜</p></a>
  245.             <a href=""><span>卖爆350件</span></a>
  246.           </div>
  247.         </div>
  248.       </div>
  250.       <div class="guesslike">
  251.         <a href=""
  252.           ><img
  253.             src="https://image3.suning.cn/uimg/cms/img/157793128909842388.png?format=_is_1242w_100h.webp"
  254.             alt=""
  255.         /></a>
  256.       </div>
  258.       <div class="list">
  259.         <ul class="left">
  260.           <li>
  261.             <a href=""
  262.               ><img
  263.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  264.                 alt=""
  265.             /></a>
  266.             <div class="title">
  267.               <a href=""
  268.                 >惠普
  269.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  270.               >
  271.             </div>
  272.             <div>
  273.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  274.             </div>
  275.             <div>
  276.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  277.             </div>
  278.           </li>
  280.           <li>
  281.             <a href=""
  282.               ><img
  283.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  284.                 alt=""
  285.             /></a>
  286.             <div class="title">
  287.               <a href=""
  288.                 >惠普
  289.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  290.               >
  291.             </div>
  292.             <div>
  293.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  294.             </div>
  295.             <div>
  296.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  297.             </div>
  298.           </li>
  300.           <li>
  301.             <a href=""
  302.               ><img
  303.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  304.                 alt=""
  305.             /></a>
  306.             <div class="title">
  307.               <a href=""
  308.                 >惠普
  309.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  310.               >
  311.             </div>
  312.             <div>
  313.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  314.             </div>
  315.             <div>
  316.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  317.             </div>
  318.           </li>
  320.           <li>
  321.             <a href=""
  322.               ><img
  323.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  324.                 alt=""
  325.             /></a>
  326.             <div class="title">
  327.               <a href=""
  328.                 >惠普
  329.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  330.               >
  331.             </div>
  332.             <div>
  333.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  334.             </div>
  335.             <div>
  336.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  337.             </div>
  338.           </li>
  340.           <li>
  341.             <a href=""
  342.               ><img
  343.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  344.                 alt=""
  345.             /></a>
  346.             <div class="title">
  347.               <a href=""
  348.                 >惠普
  349.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  350.               >
  351.             </div>
  352.             <div>
  353.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  354.             </div>
  355.             <div>
  356.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  357.             </div>
  358.           </li>
  360.           <li>
  361.             <a href=""
  362.               ><img
  363.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  364.                 alt=""
  365.             /></a>
  366.             <div class="title">
  367.               <a href=""
  368.                 >惠普
  369.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  370.               >
  371.             </div>
  372.             <div>
  373.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  374.             </div>
  375.             <div>
  376.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  377.             </div>
  378.           </li>
  380.           <li>
  381.             <a href=""
  382.               ><img
  383.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  384.                 alt=""
  385.             /></a>
  386.             <div class="title">
  387.               <a href=""
  388.                 >惠普
  389.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  390.               >
  391.             </div>
  392.             <div>
  393.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  394.             </div>
  395.             <div>
  396.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  397.             </div>
  398.           </li>
  399.         </ul>
  400.         <ul class="right">
  401.           <li>
  402.             <a href=""
  403.               ><img
  404.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  405.                 alt=""
  406.             /></a>
  407.             <div class="title">
  408.               <a href=""
  409.                 >惠普
  410.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  411.               >
  412.             </div>
  413.             <div>
  414.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  415.             </div>
  416.             <div>
  417.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  418.             </div>
  419.           </li>
  421.           <li>
  422.             <a href=""
  423.               ><img
  424.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  425.                 alt=""
  426.             /></a>
  427.             <div class="title">
  428.               <a href=""
  429.                 >惠普
  430.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  431.               >
  432.             </div>
  433.             <div>
  434.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  435.             </div>
  436.             <div>
  437.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  438.             </div>
  439.           </li>
  441.           <li>
  442.             <a href=""
  443.               ><img
  444.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  445.                 alt=""
  446.             /></a>
  447.             <div class="title">
  448.               <a href=""
  449.                 >惠普
  450.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  451.               >
  452.             </div>
  453.             <div>
  454.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  455.             </div>
  456.             <div>
  457.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  458.             </div>
  459.           </li>
  461.           <li>
  462.             <a href=""
  463.               ><img
  464.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  465.                 alt=""
  466.             /></a>
  467.             <div class="title">
  468.               <a href=""
  469.                 >惠普
  470.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  471.               >
  472.             </div>
  473.             <div>
  474.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  475.             </div>
  476.             <div>
  477.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  478.             </div>
  479.           </li>
  481.           <li>
  482.             <a href=""
  483.               ><img
  484.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  485.                 alt=""
  486.             /></a>
  487.             <div class="title">
  488.               <a href=""
  489.                 >惠普
  490.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  491.               >
  492.             </div>
  493.             <div>
  494.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  495.             </div>
  496.             <div>
  497.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  498.             </div>
  499.           </li>
  501.           <li>
  502.             <a href=""
  503.               ><img
  504.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  505.                 alt=""
  506.             /></a>
  507.             <div class="title">
  508.               <a href=""
  509.                 >惠普
  510.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  511.               >
  512.             </div>
  513.             <div>
  514.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  515.             </div>
  516.             <div>
  517.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  518.             </div>
  519.           </li>
  521.           <li>
  522.             <a href=""
  523.               ><img
  524.                 src="https://imgservice.suning.cn/uimg1/b2c/image/BlhhuzYeJOHROX6N4vFGwA.png?format=_is_300w_300h_4e.webp"
  525.                 alt=""
  526.             /></a>
  527.             <div class="title">
  528.               <a href=""
  529.                 >惠普
  530.                 (HP)光影精灵7【16-e0112AX】高配置锐龙R5独显吃鸡电竞游戏笔记本便携学生设</a
  531.               >
  532.             </div>
  533.             <div>
  534.               <a href=""><span>自营</span> <span>大聚惠</span></a>
  535.             </div>
  536.             <div>
  537.               <a href=""><span>￥5999</span> <span>200+评价</span></a>
  538.             </div>
  539.           </li>
  540.         </ul>
  541.       </div>
  542.     </main>
  543.     <!-- 页尾 -->
  544.     <footer>
  545.       <a href="">
  546.         <img
  547.           src="https://image1.suning.cn/uimg/cms/img/157543975265772267.png?from=mobile"
  548.           alt=""
  549.         />
  550.         <span>猜你喜欢</span>
  551.       </a>
  553.       <a href="">
  554.         <span class="iconfont icon-fangdajing"></span>
  555.         <span>分类</span>
  556.       </a>
  558.       <a href="">
  559.         <span class="iconfont icon-paihangbang"></span>
  560.         <span> 排行榜</span>
  561.       </a>
  563.       <a href="">
  564.         <span class="iconfont icon-gouwuche"></span>
  565.         <span>购物车</span>
  566.       </a>
  568.       <a href="">
  569.         <span class="iconfont icon-jurassic_user"></span>
  570.         <span>我的易购</span>
  571.       </a>
  572.     </footer>
  573.   </body>
  574. </html>
  576. /* CSS代码 */
  577. @import "reset.css";
  578. @import url(../font/iconfont.css);
  579. @import url(../font/font/iconfont.css);
  581. body header {
  582.   position: relative;
  583. }
  585. body header .nav {
  586.   width: 100%;
  587.   margin: auto;
  588.   padding: 2px 5px;
  589.   position: absolute;
  590.   top: 0;
  591.   left: 0;
  592. }
  594. body header .nav .nav-wrapper {
  595.   display: grid;
  596.   grid-template-columns: 40px 1fr 40px;
  597.   grid-template-rows: 40px;
  598.   place-items: center;
  599.   place-content: center;
  600. }
  602. body header .nav .nav-wrapper div {
  603.   display: flex;
  604.   flex-direction: column;
  605.   align-items: center;
  606. }
  608. body header .nav .nav-wrapper div span {
  609.   color: white;
  610. }
  612. body header .nav .nav-wrapper div span:last-of-type {
  613.   font-size: 0.1rem;
  614. }
  616. body header .background-top img {
  617.   height: 0.9rem;
  618.   width: 100%;
  619. }
  621. body header .nav img {
  622.   width: 1.5rem;
  623. }
  625. body header .nav .search {
  626.   display: block;
  627.   width: 100%;
  628.   height: 0.3rem;
  629.   background-color: white;
  630.   margin: 10 auto;
  631.   border-radius: 25px;
  632.   line-height: 0.3rem;
  633.   padding: 0 10px;
  634. }
  636. body footer {
  637.   height: 0.5rem;
  638.   display: grid;
  639.   grid-template-columns: repeat(5, 1fr);
  640.   background-color: #fff;
  641.   place-items: center;
  642.   position: fixed;
  643.   left: 0;
  644.   right: 0;
  645.   bottom: 0;
  646.   border-top: 2px solid #eee;
  647.   z-index: 4;
  648. }
  649. body footer a {
  650.   display: flex;
  651.   flex-direction: column;
  652.   align-items: center;
  653.   font-size: 0.12rem;
  654. }
  656. body fotter a span {
  657.   color: #666;
  658. }
  660. body footer a:first-of-type img {
  661.   width: 0.24rem;
  662. }
  663. body main {
  664.   padding-bottom: 0.5rem;
  665. }
  666. body main .background-bottom > img {
  667.   width: 100%;
  668.   position: relative;
  669.   top: -10px;
  670. }
  672. body main .background-bottom div {
  673.   width: 3.51rem;
  674.   margin: auto;
  675.   position: relative;
  676. }
  678. body main .background-bottom div img {
  679.   width: 100%;
  680.   border-radius: 25px;
  681.   position: absolute;
  682.   top: -1.3rem;
  683.   z-index: 3;
  684. }
  686. body main .nav {
  687.   position: relative;
  688.   top: 50px;
  689.   padding: 0 5px;
  690.   display: grid;
  691.   grid-template-columns: repeat(5, 1fr);
  692.   grid-auto-rows: 0.7rem;
  693. }
  695. body main .nav .item {
  696.   display: flex;
  697.   flex-direction: column;
  698.   align-items: center;
  699.   justify-content: center;
  700. }
  702. body main .nav .item a:first-of-type {
  703.   width: 0.4rem;
  704. }
  706. body main .nav .item a:last-of-type {
  707.   font-size: smaller;
  708.   color: gray;
  709. }
  711. body main .nav div a img {
  712.   width: 100%;
  713. }
  715. body main .hot {
  716.   margin: auto;
  717.   padding: 0 10px;
  718.   padding-top: 80px;
  719.   display: grid;
  720.   grid-template-columns: repeat(2, 1fr);
  721. }
  723. body main .hot .item {
  724.   background-color: white;
  725.   padding: 0.05rem 0.05rem;
  726. }
  728. body main .hot .item h3 {
  729.   font-size: smaller;
  730. }
  732. body main .hot .item p {
  733.   font-size: 0.09rem;
  734.   color: #999;
  735. }
  737. body main .hot .item a img {
  738.   width: 50%;
  739. }
  741. body main > h3 {
  742.   margin: 5px 15px;
  743. }
  745. body main .recommend {
  746.   display: flex;
  747.   justify-content: center;
  748.   margin: auto;
  749. }
  751. body main .recommend > div {
  752.   width: 1.1rem;
  753.   height: 1.3rem;
  754.   display: flex;
  755.   flex-direction: column;
  756.   align-items: center;
  757.   border-radius: 10px;
  758.   background-color: white;
  759.   position: relative;
  760.   margin: 0 0.05rem;
  761. }
  763. body main .recommend div img {
  764.   width: 0.75rem;
  765.   height: 0.75rem;
  766. }
  768. body main .recommend div > span {
  769.   height: 0.17rem;
  770.   font-size: 0.1rem;
  771.   padding: 1px 3px;
  772.   border: 1px solid #d9a87a;
  773.   color: #d9a87a;
  774.   background-color: white;
  775.   border-radius: 25px;
  776.   position: absolute;
  777.   top: 0.73rem;
  778.   z-index: 3;
  779. }
  781. body main .recommend div > div {
  782.   background-color: #d9a87a;
  783.   overflow: hidden;
  784.   padding: 5px 10px;
  785.   border-radius: 0 0 10px 10px;
  786.   position: absolute;
  787.   bottom: 0px;
  788.   left: 0;
  789.   right: 0;
  790. }
  792. body main .recommend div > div a p,
  793. body main .recommend div > div a span {
  794.   color: white;
  795.   font-size: 0.12rem;
  796. }
  798. body main .guesslike {
  799.   margin: 5px auto;
  800.   height: 0.3rem;
  801. }
  803. body main .guesslike a {
  804.   padding: 15px 0;
  805. }
  806. body main .guesslike a img {
  807.   width: 100%;
  808. }
  810. body main .list {
  811.   width: 100%;
  812.   /* margin: 0 auto; */
  813.   display: flex;
  814.   justify-content: space-evenly;
  815. }
  817. body main .list .left {
  818.   display: flex;
  819.   flex-direction: column;
  820.   width: 1.7rem;
  821. }
  823. body main .list .left li {
  824.   width: 1.7rem;
  825.   height: 2.6rem;
  826.   display: flex;
  827.   flex-direction: column;
  828.   background-color: white;
  829.   border-radius: 5px;
  830. }
  832. body main .list .left li a:first-of-type img {
  833.   width: 1.7rem;
  834. }
  836. body main .list .left li .title > a {
  837.   font-size: 0.1rem;
  838.   font-weight: 600;
  839.   line-height: 0.3rem;
  840.   text-overflow: ellipsis;
  841. }
  843. body main .list .left li .title {
  844.   overflow: hidden;
  845.   height: 0.3rem;
  846. }
  848. body main .list .left li div:nth-of-type(2) a span:first-of-type {
  849.   font-size: 0.05rem;
  850.   padding: 0 0.02rem;
  851.   background-color: orange;
  852.   border-radius: 5px;
  853.   color: white;
  854. }
  855. body main .list .left li div:nth-of-type(2) a span:last-of-type {
  856.   font-size: 0.05rem;
  857.   padding: 0 0.02rem;
  858.   border: 1px solid #ffbb00;
  859.   border-radius: 5px;
  860. }
  862. body main .list .left li div:last-of-type span:first-of-type {
  863.   color: coral;
  864. }
  866. body main .list .left li div:last-of-type span:last-of-type {
  867.   color: #999999;
  868.   font-size: smaller;
  869. }
  871. body main .list .left {
  872.   display: flex;
  873.   flex-direction: column;
  874.   width: 1.7rem;
  875. }
  877. body main .list .left li {
  878.   width: 1.7rem;
  879.   height: 2.6rem;
  880.   display: flex;
  881.   flex-direction: column;
  882.   background-color: white;
  883.   border-radius: 5px;
  884. }
  886. body main .list .left li a:first-of-type img {
  887.   width: 100%;
  888. }
  890. body main .list .left li .title > a {
  891.   font-size: 0.1rem;
  892.   font-weight: 600;
  893.   line-height: 0.3rem;
  894.   text-overflow: ellipsis;
  895. }
  897. body main .list .left li .title {
  898.   overflow: hidden;
  899.   height: 0.3rem;
  900. }
  902. body main .list .left li div:nth-of-type(2) a span:first-of-type {
  903.   font-size: 0.05rem;
  904.   padding: 0 0.02rem;
  905.   background-color: orange;
  906.   border-radius: 5px;
  907.   color: white;
  908. }
  909. body main .list .left li div:nth-of-type(2) a span:last-of-type {
  910.   font-size: 0.05rem;
  911.   padding: 0 0.02rem;
  912.   border: 1px solid #ffbb00;
  913.   border-radius: 5px;
  914. }
  916. body main .list .left li div:last-of-type span:first-of-type {
  917.   color: coral;
  918. }
  920. body main .list .left li div:last-of-type span:last-of-type {
  921.   color: #999999;
  922.   font-size: smaller;
  923. }
  925. body main .list .right {
  926.   display: flex;
  927.   flex-direction: column;
  928.   width: 1.7rem;
  929.   margin-top: 0.1rem;
  930. }
  932. body main .list .right li {
  933.   width: 1.7rem;
  934.   height: 2.6rem;
  935.   display: flex;
  936.   flex-direction: column;
  937.   background-color: white;
  938.   border-radius: 5px;
  939. }
  941. body main .list .right li a:first-of-type img {
  942.   width: 100%;
  943. }
  945. body main .list .right li .title > a {
  946.   font-size: 0.1rem;
  947.   font-weight: 600;
  948.   line-height: 0.3rem;
  949.   text-overflow: ellipsis;
  950. }
  952. body main .list .right li .title {
  953.   overflow: hidden;
  954.   height: 0.3rem;
  955. }
  957. body main .list .right li div:nth-of-type(2) a span:first-of-type {
  958.   font-size: 0.05rem;
  959.   padding: 0 0.02rem;
  960.   background-color: orange;
  961.   border-radius: 5px;
  962.   color: white;
  963. }
  964. body main .list .right li div:nth-of-type(2) a span:last-of-type {
  965.   font-size: 0.05rem;
  966.   padding: 0 0.02rem;
  967.   border: 1px solid #ffbb00;
  968.   border-radius: 5px;
  969. }
  971. body main .list .right li div:last-of-type span:first-of-type {
  972.   color: coral;
  973. }
  975. body main .list .right li div:last-of-type span:last-of-type {
  976.   color: #999999;
  977.   font-size: smaller;
  978. }
  980. @media (min-width: 460px) {
  981.   html {
  982.     font-size: 125px;
  983.   }
  984. }
  986. @media (max-width: 350px) {
  987.   html {
  988.     font-size: 87.5px;
  989.   }
  990. }

预览

分割线————————————————

上一条：仿淘宝移动端布局下一条：grid的九个属性及其示例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多