<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="../src/index.css">
<title>頁面佈局</title>
<style>
/* 頭部導航條 */
.tt-header{
position: fixed;
box-sizing: border-box;
left: 0;
right: 0;
height: 2.3rem;
top: 0;
z-index: 200;
border-bottom: 1px solid #ddd;
}
/* 內容區 */
.tt-content{
box-sizing: border-box;
position: relative;
overflow-y: auto;
/* padding-top: 2.3rem;
padding-bottom: 2.5rem; */
}
/* 根據header和navbar自動適應內容區高度,即有.tt-header時纔會有 padding-top: 2.3rem; 有.tt-navbar時纔會有 padding-top: 2.5rem;從而實現自適應*/
.tt-header ~ .tt-content{
padding-top: 2.3rem;
}
.tt-navbar ~ .tt-content{
padding-bottom: 2.5rem;
}
/* 底部導航欄 */
.tt-navbar{
position: fixed;
box-sizing: border-box;
bottom: 0;
width: 100%;
left: 0;
right: 0;
height: 2.5rem;
border-top: 1px solid #ddd;
z-index: 200;
}
/* 頁面蒙版 */
.tt-mask{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
z-index: 300;
}
</style>
</head>
<body>
<div class="tt-header">
標題欄
</div>
<div class="tt-navbar">
導航欄
</div>
<div class="tt-content">
內容區
</div>
<!-- 頁面蒙版 -->
<div class="tt-mask"></div>
</body>
</html>
/*
*common.css：通用樣式
*/
/* 屏幕寬度在340px至410px時，基準尺寸使用20px */
html{
font-size: 20px;
}
/* 屏幕寬度小於340px時，基準尺寸使用18px */
@media (max-width: 340px){
html{
font-size: 18px;
}
}
/* 屏幕寬度大於410px時，基準尺寸使用22px */
@media (min-width: 410px){
html{
font-size: 22px;
}
}
/* body默認樣式 */
body{
background: #f8f8f8;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;/**設置可以在ios上元素滾動帶有彈性，滾動更順滑，旨在webkit內核瀏覽器上有效**/
}
/**彈性佈局類**/
.fixed{
position: fixed;
}
.position_lr_0{
right: 0;
left: 0;
}
.position_tb_0{
top: 0;
bottom: 0;
}
/**居中定位**/
.position_center{
position: fixed;
width: 300px;
height: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*
*reset.css：重置樣式文件
*/
/* 1.去掉所有元素的內外邊距 */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, img, ul, li, form, label, input,
table, tbody, tfoot, thead, tr, th, td,
audio, video {
margin: 0;
padding: 0;
}
/* 2.統一全局字體 */
body {
font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei"
}
/* 3.列表元素去掉默認的列表樣式 */
ol, ul {
list-style: none;
}
/* 4.Table元素的邊框摺疊 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 5.去掉默認的下劃線 */
a{
text-decoration: none;
}
/* 6去掉input自帶的邊緣效果和背景顏色 */
input{
outline: none;
background: none;
}
/* index.css引入重置樣式和通用樣式以及字體圖標 */
@import './reset.css';
@import './common.css';
如頭部導航的開發，實現左 中 右的佈局：
<div class="tt-header">
<div class="left"><i class="fa fa-chevron-left"></i> 返回</div>
<div class="title">我是標題</div>
<div class="right"><i class="fa fa-ellipsis-h"></i></div>
</div>
<style>
/* 頭部導航條 */
.tt-header{
+ display: flex;
position: fixed;
box-sizing: border-box;
width: 100%;
max-width: 640px;
height: 2.3rem;
+ line-height: 2.3rem;
+ text-align: center;
top: 0;
z-index: 200;
border-bottom: 1px solid #ddd;
+ background: #f8f8f8;
}
/* 左側功能區 */
.tt-header > .left{
flex-basis: 3rem;
text-align: center;
flex-shrink: 0;
}
/* 中間標題部分,超出省略 */
.tt-header > .title{
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 右側功能區 */
.tt-header > .right{
flex-basis: 3rem;
flex-shrink: 0;
}
</style>
底部導航的開發：
<div class="tt-navbar">
<a class="navbar-item">
<i class="fa fa-home icon"></i>
<span class="name">首頁</span>
</a>
<a class="navbar-item active">
<i class="fa fa-list icon"></i>
<span class="name">分類</span>
</a>
<a class="navbar-item">
<i class="fa fa-search icon"></i>
<span class="name">發現</span>
</a>
<a class="navbar-item">
<i class="fa fa-user-o icon"></i>
<span class="name">我的</span>
</a>
</div>
<style>
/* 底部導航欄 */
.tt-navbar{
+ display: flex;
position: fixed;
box-sizing: border-box;
bottom: 0;
width: 100%;
max-width: 640px;
height: 2.5rem;
border-top: 1px solid #ddd;
z-index: 200;
+ background: #f8f8f8;
+ text-align: center;
}
/* 導航項目 */
.tt-navbar > .navbar-item{
flex: 1;
color: #808080;
}
/* 被選中的樣式 */
.tt-navbar > .navbar-item.active{
color: #09BB07;
}
/* 導航圖標 */
.tt-navbar > .navbar-item > .icon{
padding: .3rem 0 .1rem;
font-size: 1.1rem;
}
/* 導航名稱 */
.tt-navbar > .navbar-item > .name{
display: block;
font-size: .5rem;
}
</style>