目录
一.拆解效果
所以内置浏览器选择
二.逐步实现
（1）基础框架
css/comm.css
@charset "utf-8";
/* 公共CSS文件 */
/* 初始化 */
*{
margin: 0;
padding: 0;
list-style-type: none;
}index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>city-test</title>
<link rel="stylesheet" href="css/comm.css">
</head>
<body>
<div id="app">
</div>
<script src="js/vue.js"></script>
</body>
</html>（2）上中下三部分
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>city-test</title>
<link rel="stylesheet" href="css/comm.css">
</head>
<body>
<div id="app">
<div class="nav-bar">上</div>
<div class="content-box">中</div>
<div class="tab-bar">下</div>
</div>
<script src="js/vue.js"></script>
</body>
</html>@charset "utf-8";
/* 公共CSS文件 */
/* 初始化 */
*{
margin: 0;
padding: 0;
list-style-type: none;
}
/* 设置APP为全屏盒子 */
#app{
/* vw:viewport width视口宽度单位 1vw=1/100视口宽度*/
width: 100vw;
/* vh:viewport height视口高度单位 1vh=1/100视口高度*/
height: 100vh;
}
.nav-bar{
height: 45px;
background-color:#F7504d ;
font-size: 18px;
}
.content-box{
background-color: blue;
}
.tab-bar{
height: 55px;
background-color: yellow;
}
（3）实现中间铺满
首先#app弹性布局，会出现以下效果，因为弹性盒子里面的元素默认横排
改变为列向flex-direction: column，并把中间flex:1
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>city-test</title>
<link rel="stylesheet" href="css/comm.css">
</head>
<body>
<div id="app">
<div class="nav-bar">上</div>
<div class="content-box">中</div>
<div class="tab-bar">下</div>
</div>
<script src="js/vue.js"></script>
</body>
</html>@charset "utf-8";
/* 公共CSS文件 */
/* 初始化 */
*{
margin: 0;
padding: 0;
list-style-type: none;
}
/* 设置APP为全屏盒子 */
#app{
/* vw:viewport width视口宽度单位 1vw=1/100视口宽度*/
width: 100vw;
/* vh:viewport height视口高度单位 1vh=1/100视口高度*/
height: 100vh;
display:flex;
flex-direction: column;
}
.nav-bar{
height: 45px;
background-color:#F7504d ;
font-size: 18px;
}
.content-box{
background-color: blue;
/* 占满弹性盒子剩下的空间 */
flex:1;
}
.tab-bar{
height: 55px;
background-color: yellow;
}
（4）实现上面部分
上下左右居中，为体现弹性布局，不采用text-align: center
字体变白色，同时背景色是主色调，为以后便于快速修改，可以定义变量--primaryColor
在css里面要定义变量 我们就在前面写--
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>city-test</title>
<link rel="stylesheet" href="css/comm.css">
</head>
<body>
<div id="app">
<div class="nav-bar">城市影院</div>
<div class="content-box">中</div>
<div class="tab-bar">下</div>
</div>
<script src="js/vue.js"></script>
</body>
</html>@charset "utf-8";
/* 公共CSS文件 */
/* 初始化 */
*{
margin: 0;
padding: 0;
list-style-type: none;
}
:root{
/* 在css里面要定义变量 我们就在前面写-- */
--primaryColor:#F7504d;
}
/* 设置APP为全屏盒子 */
#app{
/* vw:viewport width视口宽度单位 1vw=1/100视口宽度*/
width: 100vw;
/* vh:viewport height视口高度单位 1vh=1/100视口高度*/
height: 100vh;
display:flex;
flex-direction: column;
}
.nav-bar{
height: 45px;
/* 背景 */
background-color: var(--primaryColor);
/* 字体颜色 */
color: white;
font-size: 18px;
font-weight: bold;
/* 弹性 */
display: flex;
/* 弹性主轴居中 */
justify-content: center;
/* 弹性副轴居中 */
align-items: center;
}
.content-box{
background-color: blue;
/* 占满弹性盒子剩下的空间 */
flex:1;
}
.tab-bar{
height: 55px;
background-color: yellow;
}
（5）实现下面部分
可见也要设置弹性盒子，可以tab-bar里display: flex;默认横排
justify-content:space-around;水平方向平均分配，两边留有空隙
li中再display: flex;
/* 弹性主轴居中 */
justify-content: center;
/* 弹性副轴居中 */
align-items: center;
一些css,再加阴影box-shadow
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>city-test</title>
<link rel="stylesheet" href="css/comm.css">
</head>
<body>
<div id="app">
<div class="nav-bar">城市影院</div>
<div class="content-box">中</div>
<ul class="tab-bar">
<li>影片</li>
<li>影院</li>
<li>排片</li>
<li>我的</li>
</ul>
</div>
<script src="js/vue.js"></script>
</body>
</html>@charset "utf-8";
/* 公共CSS文件 */
/* 初始化 */
*{
margin: 0;
padding: 0;
list-style-type: none;
}
:root{
/* 在css里面要定义变量 我们就在前面写-- */
--primaryColor:#F7504d;
}
/* 设置APP为全屏盒子 */
#app{
/* vw:viewport width视口宽度单位 1vw=1/100视口宽度*/
width: 100vw;
/* vh:viewport height视口高度单位 1vh=1/100视口高度*/
height: 100vh;
display:flex;
flex-direction: column;
}
.nav-bar{
height: 45px;
/* 背景 */
background-color: var(--primaryColor);
/* 字体颜色 */
color: white;
font-size: 18px;
font-weight: bold;
/* 弹性 */
display: flex;
/* 弹性主轴居中 */
justify-content: center;
/* 弹性副轴居中 */
align-items: center;
}
.content-box{
background-color: blue;
/* 占满弹性盒子剩下的空间 */
flex:1;
}
.tab-bar{
height: 55px;
/* 弹性盒子默认横排 */
display: flex;
justify-content:space-around;
/* 阴影 */
box-shadow: 0px -10px 20px #E1E1E1;
}
.tab-bar li{
width: 55px;
height: 55px;
/* 网页最小的字体只能到12像素 */
font-size: 12px;
color: #333333;
display: flex;
/* 弹性主轴居中 */
justify-content: center;
/* 弹性副轴居中 */
align-items: center;
}（6）实现中间部分
<ul class="movie-type">
<li class="active">
再写具体的css代码
movie-type中display: flex;
其余控制字体大小等等
横线
子绝父相，子绝对定位，父相对定位
三.最终代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>城市影院APP</title>
<link rel="stylesheet" href="./css/comm.css">
<style>
.movie-type{
/* 弹性盒子默认横排 */
display: flex;
height: 45px;
border-bottom: 1px solid #e1e1e1;
font-size: 12px;
font-weight: bold;
color: #666666;
}
.movie-type li{
height: 100%;
padding: 0px 15px;
display: flex;
/* 副轴 */
align-items: center;
}
.movie-type li.active{
font-size: 14px;
color: black;
position: relative;
}
/* after伪类 */
.movie-type li.active::after{
content: "";
display: block;
height: 2px;
width: 20px;
background-color: var(--primaryColor);
/* 子绝父相 */
position: absolute;
bottom: 0;
left:0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="app">
<div class="nav-bar">城市影院</div>
<div class="content-box">
<ul class="movie-type">
<li class="active">热映</li>
<li>待映</li>
<li>经典电影</li>
</ul>
</div>
<ul class="tab-bar">
<li>影片</li>
<li>影院</li>
<li>排片</li>
<li>我的</li>
</ul>
</div>
</body>
<script src="./js/vue.js"></script>
</html>
<!--
页面切割
1.流式切割 pc多
2.弹式切割 移动端多
-->
@charset "utf-8";
/* 公共CSS文件 */
/* 初始化 */
*{
margin: 0;
padding: 0;
list-style-type: none;
}
:root{
/* 在css里面要定义变量 我们就在前面写-- */
--primaryColor:#F7504d;
}
/* 设置APP为全屏盒子 */
#app{
width: 100vw;
height:100vh;
/* 弹性盒子 里面的元素默认横排 */
display:flex;
/* 改变元素排列方向默认 row横向 */
flex-direction: column;
}
.nav-bar{
height: 45px;
/* 背景 */
background-color: var(--primaryColor);
/* 字体颜色 */
color: white;
font-size: 18px;
font-weight: bold;
/* 弹性 */
display: flex;
/* 弹性主轴居中 */
justify-content: center;
/* 弹性副轴居中 */
align-items: center;
}
.tab-bar{
height: 55px;
/* 弹性盒子默认横排 */
display: flex;
justify-content:space-around;
/* 阴影 */
box-shadow: 0px -10px 20px #E1E1E1;
}
.content-box{
/* 占满弹性盒子剩下的空间 */
flex: 1;
overflow: auto;
}
.tab-bar li{
width: 55px;
height: 55px;
/* 网页最小的字体只能到12像素 */
font-size: 12px;
color: #333333;
display: flex;
/* 弹性主轴居中 */
justify-content: center;
/* 弹性副轴居中 */
align-items: center;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
