• 创建手机端可滑动效果


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

     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>

  • 相关阅读:
    龙威零式_团队项目例会记录_12
    龙威零式_团队项目例会记录_11
    龙威零式_团队项目例会记录_10
    个人项目--词频统计
    四人小组-----车辆管理系统+员工管理
    效能分析
    结对编程体会
    累计进度条 PSP 饼图
    词频统计更新
    四人项目设计
  • 原文地址:https://www.cnblogs.com/lichaoloveliangying/p/6762589.html
Copyright © 2020-2023  润新知