zoukankan      html  css  js  c++  java
  • 创建手机端可滑动效果

     很多时候因为手机尺寸原因无法显示所有想显示的信息,可采用此方法解决(注:多数用于菜单按钮)

     ViewPort <meta>标记用于指定用户是否可以缩放Web页面

     ViewPort <meta>标记还表示文档针对移动设备进行了优化

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta charset="utf-8" />
        <title>布局</title>
        <style>
            html {
                320px;
            }

            body {
                320px;
            }

            #wrapper {
                position: fixed;
                top: 0;
                left: 0;
                100%;
                overflow: scroll;
            }

                #wrapper ul {
                    padding: 0;
                    1290px;
                    height: 60px;
                    font-size: 0;
                }

                    #wrapper ul li {
                        display: inline-block;
                        95px;
                        height: 60px;
                        color: #fff;
                        font-size: 12px;
                        list-style-type: none;
                        background-color: red;
                    }

                        #wrapper ul li.active {
                            background-color: blue;
                        }
        </style>


    </head>
    <body>

        <div id="wrapper">
            <ul class="j-nav">
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
                <li>导航5</li>
                <li class="j-spe">导航6</li>
                <li>导航7</li>
                <li>导航8</li>
                <li>导航9</li>
                <li>导航10</li>
                <li>导航11</li>
                <li>导航12</li>
                <li>导航13</li>
            </ul>
            <ul class="j-nav">
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
                <li>导航5</li>
                <li class="j-spe">导航6</li>
                <li>导航7</li>
                <li>导航8</li>
                <li>导航9</li>
                <li>导航10</li>
                <li>导航11</li>
                <li>导航12</li>
                <li>导航13</li>
            </ul>
        </div>

    </body>
    </html>

  • 相关阅读:
    13 数据库主从
    12 数据备份
    11 锁机制
    12 日志
    10 索引(二)
    09 索引
    update kernel 3.10-3.12
    haproxy para config
    mysql slave to master
    storage disk
  • 原文地址:https://www.cnblogs.com/lichaoloveliangying/p/6762589.html
Copyright © 2011-2022 走看看