简体中文（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

博客列表 >仿360移动端

仿360移动端

期待.
期待.原创
2022年08月03日 10:31:49737浏览

1.效果图

  • 原网站：https://m.360.cn/
    效果图

    2.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>Document</title>
    8.   <link rel="stylesheet" href="./css/reset.css">
    9.   <link rel="stylesheet" href="./css/style.css">
    10.   <link rel="stylesheet" href="./font_3553567_zghgpn8ng0h/iconfont.css">
    11. </head>
    12. <body>
    13.   <header>
    14.       <a href="" class="logo"><img src="./img/1.png" alt=""></a>
    15.       <a href="" class="iconfont icon-caidan"></a>
    16.   </header>
    17.   <div class="centerimg">
    18.       <a href=""><img src="./img/2.jpg" alt=""></a>
    19.   </div>
    20.   <div class="center">
    21.       <ul class="centerf">
    22.           <li>
    23.               <a href=""><img src="./img/2.png" alt=""></a>
    24.               <a href="">全部产品</a>
    25.           </li>
    26.           <li>
    27.               <a href=""><img src="./img/3.png" alt=""></a>
    28.               <a href="">360搜索</a>
    29.           </li>
    30.           <li>
    31.               <a href=""><img src="./img/4.png" alt=""></a>
    32.               <a href="">360商城</a>
    33.           </li>
    34.           <li>
    35.               <a href=""><img src="./img/5.png" alt=""></a>
    36.               <a href="">360游戏</a>
    37.           </li>
    38.       </ul>
    39.       <div class="centerk"></div>
    40.   </div>
    41.   <div class="handgame">
    42.       手机游戏
    43.   </div>
    44.   <div class="gamexiangxi">
    45.       <ul class="content-game">
    46.           <li>
    47.               <a href=""><img src="./img/6.png" alt=""></a>
    48.               <a href="">手机卫士</a>
    49.               <span>8.95M</span>
    50.               <a href="">下载</a>
    51.           </li>
    52.           <li>
    53.               <a href=""><img src="./img/7.png" alt=""></a>
    54.               <a href="">手机助手</a>
    55.               <span>6.5M</span>
    56.               <a href="">下载</a>
    57.           </li>
    58.           <li>
    59.               <a href=""><img src="./img/8.png" alt=""></a>
    60.               <a href="">浏览器</a>
    61.               <span>23.16M</span>
    62.               <a href="">下载</a>
    63.           </li>
    64.           <li>
    65.               <a href=""><img src="./img/9.png" alt=""></a>
    66.               <a href="">清理大师</a>
    67.               <span>5.8M</span>
    68.               <a href="">下载</a>
    69.           </li>
    70.           <li>
    71.               <a href=""><img src="./img/10.png" alt=""></a>
    72.               <a href="">贷款神器</a>
    73.               <span>10.53M</span>
    74.               <a href="">下载</a>
    75.           </li>
    76.           <li>
    77.               <a href=""><img src="./img/11.png" alt=""></a>
    78.               <a href="">省电王</a>
    79.               <span>2.8M</span>
    80.               <a href="">下载</a>
    81.           </li>
    82.           <li>
    83.               <a href=""><img src="./img/12.png" alt=""></a>
    84.               <a href="">免费WIFI</a>
    85.               <span>3.8M</span>
    86.               <a href="">下载</a>
    87.           </li>
    88.           <li>
    89.               <a href=""><img src="./img/3.jpg" alt=""></a>
    90.               <a href="">安全客</a>
    91.               <span>9.98M</span>
    92.               <a href="">下载</a>
    93.           </li>
    94.       </ul>
    95.       <div class="xiangmu">
    96.           <div class="testtest">
    97.               <img src="./img/13.png" alt=""><a href="">360搜索</a>
    98.           </div>
    99.           <div class="testtest">
    100.               <img src="./img/14.png" alt=""><a href="">360商城</a>
    101.           </div>
    102.           <div class="testtest">
    103.               <img src="./img/15.png" alt=""><a href="">手机专家</a>
    104.           </div>
    105.           <div class="testtest">
    106.               <img src="./img/16.png" alt=""><a href="">360天气</a>
    107.           </div>
    108.           <div class="testtest">
    109.               <img src="./img/17.png" alt=""><a href="">360借条</a>
    110.           </div>
    111.       </div>
    112.       <div style="margin-top: 0.4rem;border-bottom: 10px solid #EBEBEB;"></div>
    113.   </div>
    114.   <div class="iot-title">
    115.       智能硬件
    116.   </div>
    117.   <div class="iot-xiangqing" style="border-top: 1px solid #ebebeb; margin-top: 0.35rem;">
    118.       <div class="testsss firsttest" style="border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;" >
    119.           <a href="">360智能摄像机</a>
    120.           <a href="">有家有TA 安心陪伴</a>
    121.           <a href=""><img src="./img/18.png" alt=""></a>
    122.       </div>
    123.       <div class="testsss" style="border-bottom: 1px solid #ebebeb;">
    124.           <a href="">360家庭防火墙</a>
    125.           <a href="">极速上网 安全无忧</a>
    126.           <a href=""><img src="//p3.ssl.qhimg.com/t0128f83364e8c9d4be.png" alt=""></a>
    127.       </div>
    128.       <div class="testsss" style="border-bottom: 1px solid #ebebeb;">
    129.           <a href="">360儿童手表</a>
    130.           <a href="">为爱守护 乐享生活</a>
    131.           <a href=""><img src="//p0.ssl.qhimg.com/t010035192a7645472c.png" alt=""></a>
    132.       </div>
    133.       <div class="testsss" style="border-bottom: 1px solid #ebebeb; border-right:1px solid #ebebeb ;">
    134.           <a href="">360行车记录仪</a>
    135.           <a href="">安全驾驶 为您保驾护航</a>
    136.           <a href=""><img src="//p3.ssl.qhimg.com/t01d3e53e82813eec78.png" alt=""></a>
    137.       </div>
    138.       <div class="testsss" style="border-bottom: 1px solid #ebebeb;">
    139.           <a href="">360扫地机器人</a>
    140.           <a href="">解放双手 智享生活</a>
    141.           <a href=""><img src="//p5.ssl.qhimg.com/t012fa14e716336e657.png" alt=""></a>
    142.       </div>
    143.       <div class="testsss" style="border-bottom: 1px solid #ebebeb; border-right:1px solid #ebebeb ; border-bottom: 10px solid #EBEBEB;">
    144.           <a href="">360生态链</a>
    145.           <a href="">生态互联 牵手未来</a>
    146.           <a href=""><img src="//p1.ssl.qhimg.com/t01a44368ac0c2055a4.png" alt=""></a>
    147.       </div>
    148.       <div class="testsss imgdaohang" style="border-bottom: 1px solid #ebebeb; border-bottom: 10px solid #EBEBEB;">
    149.           <a href="" style="color: #ABABAB; text-align: center;">点击查看</a>
    150.           <a href="">更多商品</a>
    151.       </div>
    152.   </div>
    153.   <div style="margin-top: 0.2rem;"></div>
    154.   <div class="user-title" >
    155.       用户服务
    156.   </div>
    157.   <div class="user-fuwu">
    158.       <div class="te1">
    159.           <a href="">360搜索</a>
    160.       </div>
    161.       <div class="te1">
    162.           <a href="">360导航</a>
    163.       </div>
    164.       <div class="te1">
    165.           <a href="">安全客</a>
    166.       </div>
    167.   </div>
    168.   <div style="border-bottom: 10px solid #ebebeb;"></div>
    169.   <input type="text" placeholder="搜一下" class="sousuokuang">
    170.   <div class="sousuolan">
    171.       <input type="submit" class="sousuoanniu" value="搜一下">
    172.       <img src="./img/13.png" alt="" class="sousuotupian">
    173.   </div>
    174.   <div style="margin-top:0.5rem"></div>
    175.   <div class="user-daohang">
    176.       <div>
    177.           <a href="">登录</a>
    178.       </div>
    179.       <div style="border-right: 1px solid #767676;"></div>
    180.       <div>
    181.           <a href="">注册</a>
    182.       </div>
    183.       <div style="border-right: 1px solid #767676;"></div>
    184.       <div>
    185.           <a href="">电脑版</a>
    186.       </div>
    187.       <div style="border-right: 1px solid #767676;"></div>
    188.       <div>
    189.           <a href="">360商城</a>
    190.       </div>
    191.   </div>
    192.   <div class="dibutest"></div>
    193.   <div class="dibu-daohang">
    194.       <p style="padding-top: 0.15rem;">Copyright©2005-2022 360.cn 版权所有 360互联网安全中心</p>
    195.       <p style="text-align: center;"><a href="">北京举报中心</a></p>
    196.       <div class="daohang-beianbei">
    197.           <p style="text-align: center;"><a href="">京ICP证080047号[京ICP备08010314号-6]</a></p>
    198.           <p style="text-align: center;"><a href="">京网文〔2020〕6051-1195号</a></p>
    199.           <p style="text-align: center;"><a href="">（总）网出证（京）字第281号</a></p>
    200.           <p style="text-align: center;"><a href="">工商营业执照</a></p>
    201.           <p style="text-align: center;"><img src="//p.ssl.qhmsg.com/t01d8eda6e551cf2615.png" alt="" class="jingdongan"><a href="">京公网安备 11000002002063号</a></p>
    202.           <p style="text-align: center;"><a href="">违法和不良信息举报电话：010-58541935</a></p>
    203.       </div>
    204.   </div>
    205. </body>
    206. </html>

    3.CSS代码

    1.reset.css

    ```css
  • {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    }

html {
font-size: calc(100vw / 3.75);
}

body {
font-size: 0.13rem;
/ margin: auto;
padding: 0 0.10rem; /
overflow-y: auto;
background-color: #FFFFFF;
min-height: 2560px;
}

body img {
width: 100%;
}

li {
list-style: none;
}

a {
text-decoration: none;
}

  1. ##2.style.css
  2. ```css
  3. header {
  4.     display: grid;
  5.     top: 0px;
  6.     left: 0px;
  7.     right: 0px;
  8.     background-color:#23AC38;
  9.     grid-auto-rows: 0.45rem;
  10.     grid-template-columns:1rem 0.50rem;
  11.     place-items: center;
  12.     place-content: space-between;
  13. }
  15. header >a img {
  16.     padding-left: 0.1rem;
  17. }
  19. header >a:last-of-type {
  20.     font-size: 0.20rem;
  21.     color: #FFFFFF;
  22. }
  24. body .center .centerf {
  25.     display: grid;
  26.     grid-template-columns: repeat(4,1fr);
  27.     place-items: center;
  28. }
  30. body .center .centerf a {
  31.     display: grid;
  32.     padding-top: 0.1rem;
  33.     color: #333333;
  34. }
  36. body .centerk {
  37.     margin-top: 0.2rem;
  38.     border-bottom: 10px solid #EBEBEB;
  39. }
  41. .handgame {
  42.     display: grid;
  43.     grid-template-columns: repeat(1,1fr);
  44.     font-size: 0.23rem;
  45.     margin-top: 0.3rem;
  46.     margin-left: 0.15rem;
  47. }
  49. .content-game {
  50.     display: grid;
  51.     grid-template-columns: repeat(4,1fr);
  52.     grid-template-rows: repeat(2,1fr);
  53.     /* grid-auto-rows: 0.5rem; */
  54.     /* place-items: center; */
  55.     gap: 0.2rem 0.2rem;
  56. }
  58. .content-game li {
  59.     display: grid;
  60.     place-items: center;
  61. }
  63. .content-game li >a:nth-of-type(2){
  64.     color: #333333;
  65.     padding-top: 0.05rem;
  66.     padding-bottom: 0.05rem;
  67. }
  69. .content-game li >a:last-of-type {
  70.     background-color:#DEF3E1;
  71.     color: #23ac38;
  72.     border-radius: 0.30rem;
  73.     font-size: 0.16rem;
  74.     padding-top: 0.05rem;
  75.     text-align: center;
  76.     width: 0.5rem;
  77. }
  79. .content-game li >span {
  80.     color: #cdcdcd;
  81. }
  83. .gamexiangxi {
  84.     margin-top: 0.20rem;
  85. }
  87. .content-game li:nth-of-type(1n+4) img{
  88.     width: 90%;
  89.     padding-left: 0.1rem;
  90.     /* background-color: red; */
  91. }
  93. .content-game {
  94.     margin-bottom: 0.5rem;
  95. }
  97. .xiangmu {
  98.     display: grid;
  99.     grid-template-columns: repeat(4,1fr);
  100.     gap: 0.1rem 0.05rem;
  101.     margin-left: 0.1rem;
  102.     margin-right: 0.1rem;
  103.     place-items: center;
  104. }
  106. .testtest >a {
  107.     color: #333333;
  108.     font-size: 0.15rem;
  109.     width: 1rem;
  111. }
  113. .testtest > img {
  114.     width: 20%;
  115. }
  117. .testtest {
  118.     height: 0.5rem;
  119.     border: 0.01rem solid #F2F2F2;
  120.     background-color: #F8F8F8;
  121.     padding-top: 0.14rem;
  123. }
  125. .iot-title {
  126.     display: grid;
  127.     grid-template-columns: repeat(1,1fr);
  128.     font-size: 0.23rem;
  129.     margin-top: 0.3rem;
  130.     margin-left: 0.15rem;
  131. }
  133. .iot-xiangqing {
  134.     display: grid;
  135.     grid-template-columns: repeat(2,1fr);
  136.     grid-template-rows: repeat(4,1fr);
  137.     grid-row: 1 / span 2;
  138.     /* border: 1px solid red; */
  139. }
  141. .testsss > a:first-of-type {
  142.     color: #333333;
  143.     font-size: 0.16rem;
  144.     padding-top: 0.2rem;
  145.     padding-left: 0.15rem;
  146.     padding-bottom: 0.15rem;
  148. }
  150. .testsss > a:nth-of-type(2) {
  151.     color: #999999;
  152.     font-size: 0.14rem;
  153.     padding-left: 0.15rem;
  154.     /* padding-bottom: 0.05rem; */
  155. }
  157. .testsss {
  158.     display: grid;
  159.     /* width: 70%; */
  160.     place-items: center;
  161.     place-content:center;
  162.     padding-left: auto;
  163.     padding-right: auto;
  164.     /* border: 1px solid red; */
  165. }
  167. .firsttest {
  168.     grid-area: 1 / 1 / span 2 / span 1 ;
  169. }
  171. .imgdaohang {
  172.     background-color: #F8F8F8;
  173. }
  175. .user-title {
  176.     display: grid;
  177.     grid-template-columns: repeat(1,1fr);
  178.     font-size: 0.23rem;
  179.     margin-top: 0.3rem;
  180.     margin-left: 0.15rem;
  181.     margin-bottom: 0.20rem;
  182. }
  184. .user-fuwu {
  185.     display:grid;
  186.     grid-template-columns: repeat(3,1fr);
  187.     height: 0.5rem;
  188.     place-items: center;
  189.     gap: 0 0.1rem;
  190.     margin-left: 0.04rem;
  191.     margin-right: 0.04rem;
  192.     margin-bottom: 0.2rem;
  193. }
  195. .te1 >a {
  196.     color: #333;
  197.     font-size: 0.16rem;
  198.     padding-left: 0.15rem;
  199.     padding-right: 0.15rem;
  200. }
  202. .te1 {
  203.     background-color:#F8F8F8;
  204.     height: 0.5rem;
  205.     width: 1rem;
  206.     border: 0.01rem solid #F2F2F2;;
  207.     padding-top: 0.14rem;
  208. }
  210. .sousuokuang {
  211.     padding-left: 0.08rem;
  212.     height: 0.45rem;
  213.     width: 2.9rem;
  214.     margin-left: 0.1rem;
  215.     margin-top: 0.6rem;
  216.     border: 2px solid #57D47E;
  217.     position: relative;
  218. }
  220. .sousuoanniu {
  221.     height: 0.45rem;
  222.     width: 0.8rem;
  223.     background-color:#00be3c;
  224.     color: #fff;
  225.     border: none;
  226.     position: absolute;
  227.     margin-top: -0.45rem;
  228.     margin-left: 2.9rem;
  229. }
  232. .sousuotupian {
  233.     width: 8%;
  234.     position: absolute;
  235.     margin-top: -0.36rem;
  236.     margin-left: 2.46rem;
  237. }
  240. .user-daohang {
  241.     display: flex;
  242.     place-content:space-evenly;
  243.     width: 2.5rem;
  244.     margin: 0 auto;
  245. }
  247. .user-daohang > div >a {
  248.     color: #333;
  249. }
  251. .dibutest {
  252.     margin-bottom: 0.4rem;
  253. }
  255. .dibu-daohang {
  256.     height: 2.5rem;
  257.     background-color:#F6F6F6;
  258. }
  260. .dibu-daohang > p:first-of-type {
  261.     font-size: 0.14rem;
  262.     text-align: center;
  263. }
  265. .dibu-daohang > p:nth-of-type(2) > a {
  266.     color: #999;
  267.     font-size: 0.14rem;
  269. }
  271. .daohang-beianbei > p >a {
  272.     color:#333;
  273.     font-size: 0.14rem;
  274.     margin-top: 0.06rem;
  275.     display: block;
  276. }
  278. .jingdongan {
  279.     width: 5%;
  280.     position: absolute;
  281.     margin-left: -1.25rem;
  282. }
上一条：0729Json常用api下一条：类数组与纯数组，dom遍历与常用的API
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多