一個簡單的手機端頁面佈局

時間 2019-11-14

標籤一個簡單手機頁面佈局简体版

原文原文鏈接

一個簡單的手機端頁面的佈局
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
        <div class="box">
            <div class="header"></div>
            <div class="main"></div>
            <div class="footer"></div>
        </div>
</body>
</html>

css

@import url("m_reset.css");
.wh(@w,@h){
  width:@w;
  height:@h;
}
.box{
  .wh(100%,100%);
  .b(green);
  display:-webkit-box;/*定義一個彈性盒*/
  -webkit-box-orient:vertical;/*將彈性盒設置爲垂直*/}
.header{
  .wh(100%,43px);.b(yellow);
}
.main{
  -webkit-box-flex:1;/*內容整體分爲一份*/
  overflow:scroll;/*滾動條*/
  .b(blue);

}
.footer{
  .wh(100%,43px);.b(red)

}

相關標籤/搜索