zoukankan      html  css  js  c++  java
  • WEB前端第二十一课——移动端页面

    知识点记录:

    1.flex-flow属性用于设置灵活项目的布局方式,是 flex-direction 和 flex-wrap的复合属性,书写格式 flex-flow:direction  wrap

      flex-direction属性值:

        flex-flow:row,伸缩项目在flexbox中 由左向右水平排列,row-reverse为相反方向

        flex-flow:column,伸缩项目在flexbox中 由上向下垂直排列。column-reverse为相反方向

      flex-wrap属性值:

        nowrap,灵活项目不拆行或拆列

        wrap,灵活项目在必要的时候拆行或拆列

        wrap-reverse,灵活项目必要时候按照相反顺序拆行或拆列

    2.设置元素水平垂直居中

      一种情况,元素有明确的高度

        ① 绝对定位+ 负margin,元素属性值设置:position: absolute;left:50%;top:50%;margin-left: -w/2(元素宽度一半);margin-top: -h/2(元素高度一半);

        ② 仅适用绝对定位,元素属性值设置:position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;

      二种情况,元素没有确定的高度

        ① 绝对定位+ transform,元素属性值设置:position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);

        ② 模拟 table布局,父元素属性设置:display:table;,子元素属性设置:display:table-cell;text-align:center;vertical-align:middle;,table在布局方面通常不推荐使用

        ③ 使用伪元素创建居中内容

    3.弹性盒子的宽度通常使用百分比进行设置,不设置固定高度,由内容填充后自动撑开,元素内灵活项目默认水平排列

    /*>>>>>>>>>>>>>>JS代码<<<<<<<<<<<<<<<*/
    var click=document.getElementById("click");
    var imgBox=document.getElementById("imgBox");
    var li=click.getElementsByTagName("li");
    
    function change(i){
       if(i==0){
            imgBox.src="../images/chuangPic/banner1.png"
       }else if(i==1){
           imgBox.src="../images/chuangPic/banner2.jpg"
       }else if(i==2){
           imgBox.src="../images/chuangPic/banner3.jpg"
       }else if(i==3){
           imgBox.src="../images/chuangPic/banner4.jpg"
       }else if(i==4){
           imgBox.src="../images/chuangPic/banner5.jpg"
       }
    }
    /*>>>>>>>>>>>>>>>>CSS代码<<<<<<<<<<<<<<<<*/
    body{
        margin: 0;
        padding: 0;
    }
    /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>导航栏设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
    .nav{
         100%;
        height: 50px;
        background-color: rgb(0,127,95);
        display: flex;
        position: fixed;
        z-index: 9;
    }
    .city{
         80px;
        height: 50px;
        font-size: 18px;
        color: #ffffff;
        background-color: #ff6700;
        line-height: 50px;
        text-align: center;
    }
    .city a{
        color: #ffffff;
        text-decoration: none;
    }
    .head{
        height: 50px;
        line-height: 50px;
        color: #ffffff;
        font-size: 20px;
        letter-spacing: 2px;
        flex-grow: 1;
        text-align: center;
    }
    .search button{
         50px;
        height: 50px;
        color: #ffffff;
        font-size: 24px;
        line-height: 50px;
        background-color: rgba(0,0,0,0);
        border: 0;
        cursor: pointer;
    }
    /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>轮播图设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
    .carousel{
         100%;
        position: relative;
    }
    .carousel img{
         100%;
    }
    .click{
         100%;
        height: 5%;
        bottom: 5%;
        position: absolute;
    }
    .click ul{
         60%;
        height: 100%;
        margin: 0 auto;
        padding: 0;
        display: flex;
        justify-content: space-between;
    }
    .click ul>li{
        list-style-type: none;
         18%;
        height: 100%;
        background-color: rgb(0,127,95);
    }
    /*>>>>>>>>>>>>>>>>html代码<<<<<<<<<<<<<<<<<*/
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-with, initial-scale=1">
        <title>移动端</title>
        <link rel="stylesheet" href="css/chuangstyle.css"/>
        <link rel="stylesheet" href="css/chuangicon/iconfont.css">
    </head>
    <body>
        <div class="nav">
            <div class="city">成都 <a href="#" class="iconfont">�</a></div>
            <div class="head">纵横千里点餐系统</div>
            <div class="search">
                <button class="iconfont">�</button>
            </div>
        </div>
        <div class="carousel">
            <img src="images/chuangpic/banner1.png" alt="" id="imgBox"/>
            <div class="click">
                <ul id="click">
                    <li onclick="change(0)"></li>
                    <li onclick="change(1)"></li>
                    <li onclick="change(2)"></li>
                    <li onclick="change(3)"></li>
                    <li onclick="change(4)"></li>
                </ul>
            </div>
        </div>
        <script src="css/index.js"></script>
    </body>
    </html>
    

      

  • 相关阅读:
    Effective Java 19 Use interfaces only to define types
    Effective Java 18 Prefer interfaces to abstract classes
    Effective Java 17 Design and document for inheritance or else prohibit it
    Effective Java 16 Favor composition over inheritance
    Effective Java 15 Minimize mutability
    Effective Java 14 In public classes, use accessor methods, not public fields
    Effective Java 13 Minimize the accessibility of classes and members
    Effective Java 12 Consider implementing Comparable
    sencha touch SortableList 的使用
    sencha touch dataview 中添加 button 等复杂布局并添加监听事件
  • 原文地址:https://www.cnblogs.com/husa/p/13488231.html
Copyright © 2011-2022 走看看