城市影院拆解一

目录

一.拆解效果 

 二.逐步实现

（1）基础框架

 （2）上中下三部分

 （3）实现中间铺满

（4）实现上面部分

（5）实现下面部分

（6）实现中间部分

 三.最终代码

---

一.拆解效果 

所以内置浏览器选择

  

 二.逐步实现

（1）基础框架

css/comm.css 

@charset "utf-8";
/* 公共CSS文件 */
/* 初始化 */
*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

index.html 

 （2）上中下三部分

	
	
	
	
	



	

		
上
		
中
		
下
	
	

@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

	
	
	
	
	



	

		
上
		
中
		
下
	
	

@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里面要定义变量 我们就在前面写--

 

	
	
	
	
	



	

		
城市影院
		
中
		
下
	
	

@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

	
	
	
	
	



	

		
城市影院
		
中
		

			
影片
			
影院
			
排片
			
我的
		
	
	

@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）实现中间部分

•  

  再写具体的css代码

movie-type中display: flex;

其余控制字体大小等等

 

 

横线

子绝父相，子绝对定位，父相对定位 

 三.最终代码

	
		
		
		
		
		
		
	
	
		

			
城市影院
			

				

					
热映
					
待映
					
经典电影
				
			
			

				
影片
				
影院
				
排片
				
我的
			
		
	
	

@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;
}