zoukankan      html  css  js  c++  java
  • 手机端两栏布局

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-touch-fullscreen" content="yes"/>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="msapplication-tap-highlight" content="no"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <title>测试html</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .goods {
                display: -ms-flexbox;
                display: flex;
                width: 100%;
                overflow: hidden;
            }
    
            .goods .menu-wrapper {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 80px;
                flex: 0 0 80px;
                width: 80px;
                background: #7de2ff;
            }
    
            .goods .foods-wrapper {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
        </style>
    
    </head>
    <body>
    <div class="goods">
        <div class="menu-wrapper">
            <ul>
                <li><span>热销榜</span></li>
                <li><span>热销榜</span></li>
                <li><span>热销榜</span></li>
                <li><span>热销榜</span></li>
                <li><span>热销榜</span></li>
                <li><span>热销榜</span></li>
                <li><span>热销榜</span></li>
            </ul>
        </div>
        <div class="foods-wrapper">
            <ul>
                <li>
                    <div class="content"><h2 class="name">皮蛋瘦肉粥</h2>
                        <p class="desc">咸粥</p>
                        <div class="extra"><span class="count">月售229份</span><span>好评率100%</span></div>
                        <div class="price"><span class="now">¥10</span> <span class="old">¥14</span></div>
                    </div>
                </li>
                <li>
                    <div class="content"><h2 class="name">皮蛋瘦肉粥</h2>
                        <p class="desc">咸粥</p>
                        <div class="extra"><span class="count">月售229份</span><span>好评率100%</span></div>
                        <div class="price"><span class="now">¥10</span> <span class="old">¥14</span></div>
                    </div>
                </li>
                <li>
                    <div class="content"><h2 class="name">皮蛋瘦肉粥</h2>
                        <p class="desc">咸粥</p>
                        <div class="extra"><span class="count">月售229份</span><span>好评率100%</span></div>
                        <div class="price"><span class="now">¥10</span> <span class="old">¥14</span></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    </body>
    
    </html>

  • 相关阅读:
    SSH Config 那些你所知道和不知道的事 (转)
    解决npm ERR! Unexpected end of JSON input while parsing near的方法
    ES查询-term VS match (转)
    ES查询-match VS match_phrase
    安装使用aria2下载百度网盘内容(转)
    基于CSS3鼠标滑过放大突出效果
    基于jQuery的新浪游戏首页幻灯片
    基于animation.css实现动画旋转特效
    基于jQuery左右滑动切换特效
    基于html5顶部导航3D翻转展开特效
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7297780.html
Copyright © 2011-2022 走看看