• H5如何实现一行三列布局


    <!DOCTYPE html><html lang="en"><head>
            <meta charset="UTF-8">
            <title>Document</title>
            <meta content="yes" name="apple-mobile-web-app-capable">
            <meta content="yes" name="apple-touch-fullscreen">
            <meta content="telephone=no" name="format-detection">
            <meta content="black" name="apple-mobile-web-app-status-bar-style">
            <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
            <link rel="stylesheet" type="text/css" href="css/mobile.common.css">
            <style type="text/css">
                    .list_icons
    { margin-top: 3.333333%; padding-left: 3.33333% }
                    .list_icons li
    { width: 30%; background: #fff; float: left; margin: 0 3% 3% 0;border: 1px solid #dadfe9;padding-bottom: 0.900rem;}
                    .list_icons span
    { display: block; width: 1.120rem; height: 1.355rem; margin: 0 auto; margin-top: 0.900rem; }
                    .list_icons i
    {font-size: 0.747rem; color: #4a4a4a; text-align: center; font-style: normal;display: block; padding-top: 0.500rem; margin: 0 auto;}
            
    </style></head><body>
            <ul class="list_icons clearfix">
           <li>
                <span style="padding-top: 0.230rem;"><img src="images/1_ssd.png"/></span>
                <i>时速达</i>
           </li>
           <li>
                <span style="padding-top: 0.230rem;"><img src="images/2_fl.png"/></span>
                <i>福利</i>
           </li>
           <li>
                <span style=" 1.067rem; padding-top: 0.255rem;"><img src="images/3_tm.png"/></span>
                <i>特卖</i>
           </li>
           <li>
                <span style=" 0.827rem"><img src="images/4_hfcz.png"/></span>
                <i>话费充值</i>
           </li>

           <li>
                <span style=" 1.360rem"><img src="images/5_jtbj.png"/></span>
                <i>家庭保洁</i>
           </li>
       </ul>

    </body></html>
  • 相关阅读:
    使用Redis实现分布式锁
    SpringBoot 定时任务的使用
    HTTP请求调试软件 Postman
    ElasticSearch的安装
    全文搜索 简介
    SpringBoot整合Redis
    Git 操作远程仓库(Github)
    Git的使用
    Git 简介、下载安装、配置
    Vue 商城的一些小demo(后台添加商品、前台购物车、本地存储的使用)
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/5478261.html
Copyright © 2020-2023  润新知