Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模仿苏X易购手机主页布局
Blogger Information
Blog 29
fans 1
comment 0
visits 14950
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
模仿苏X易购手机主页布局
Pharaoh
Original
433 people have browsed it

实例

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

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. }

预览

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

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：写的很棒
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post