欢迎光临
我的个人博客网站

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{     width: 100%;     height: 50px;     background-color: rgb(0,127,95);     display: flex;     position: fixed;     z-index: 9; } .city{     width: 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{     width: 50px;     height: 50px;     color: #ffffff;     font-size: 24px;     line-height: 50px;     background-color: rgba(0,0,0,0);     border: 0;     cursor: pointer; } /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>轮播图设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/ .carousel{     width: 100%;     position: relative; } .carousel img{     width: 100%; } .click{     width: 100%;     height: 5%;     bottom: 5%;     position: absolute; } .click ul{     width: 60%;     height: 100%;     margin: 0 auto;     padding: 0;     display: flex;     justify-content: space-between; } .click ul>li{     list-style-type: none;     width: 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> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第二十一课——移动端页面
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

==========================
Warning: stripos(): Offset not contained in string in /www/wwwroot/www.ztsky.cn/wp-content/plugins/wp-autopost-pro/wp-autopost-function.php on line 5381
====================================================
Warning: curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when an open_basedir is set in /www/wwwroot/www.ztsky.cn/wp-content/plugins/wp-autopost-pro/wp-autopost-function.php on line 8764