H5简单案例app首页

	
	
	
	
	


	

		

			

				
			
			

			
京东好物
			
25
		
	
	

		

		

			

		
		
登录

	
	

		

			
		

	
	

		

		

		

	
	

		
			京东超市
		京东超市
		京东超市
		京东超市
		京东超市
		京东超市
		京东超市
		京东超市
		京东超市
		京东超市

	

.body {
width:100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system,Helvetica,sans-serif;
color: red;
line-height: 1.5;
}
.app {
height: 45px;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	vertical-align: top;
}
.app ul li {
	float: left;
	height: 45px;
	background-color: #333333;
line-height: 45px;
text-align: center;
}
.app ul li:nth-child(1) {
width: 8%;

}
.app ul li img {
	width: 10px;
}
.app ul li:nth-child(2) {
	width: 17%;
background-color: blue;
}
.app ul li:nth-child(3) {
	width: 50%;
background-color: 
}
.app ul li:nth-child(4) {
	width: 25%;
background-color: red;
}

/*搜索*/
.search-wrap {
	position: fixed;

	min-width: 320px;
	max-width: 640px;
	width: 100%;
	overflow: hidden;
	height: 44px;
}
.search-btn {
position: absolute;
	left:: 0;
	top: 0;
	width: 40px;
	height: 44px;
	background-color: red;
}
.search-login {
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 44px;
	background-color: purple;
}
.search {
	position: relative;
	height: 30px;
	background-color: gray;
	margin: 0 50px;
	border-radius: 15px;
	margin-top: 7px;
}
.jd-icon {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 5px;
	left:5px;
	background:url(../images/killpest.png);
	background-size: 20px 20px;
}
/*主题*/
.maincontent {

}

.slide {

}
.slide img {
	width: 100%;

}

.ckybrand div {
	float: left;
	width: 33.33%;
}
.ckybrand div img {
	width: 100%;
}
.categary{

}
.categary a {
float: left;
width: 20%;
text-align: center;;
}
.categary a img {
width: 40px;
margin: 10px 0;
}
.categary a span {
	display: block;
}

 

 

练习二：

	
	
	
	
	


	

		

		
	
	

		
	
	

		

			
			
			景点
		
		
		

			
			
			景点
		
		
		

			
			
			景点
		
		
		

			
			
			景点
		
		
		

			
			
			景点
		
		
	

.body {
widt:100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system,Helvetica,sans-serif;
color: red;
line-height: 1.5;
overflow: hidden;
-webkit-tap-highlight-color:transparent;
}
.search-index {
	display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 44px;
background-color: pink;
min-width: 320px;
max-width: 640px;

}
ul {
list-style: none;
margin:0;
padding: 0;
}

div {
	box-sizing: border-box;
}
.search {
flex: 1;
height: 26px;
border: 1px solid red;
margin:6px 10px
}

.user {
	width: 44px;
	height: 44px;
	background-color: red;
}
.banner {
margin-top: 44px;
}
.banner img {
	width:100%;
}

.local-nav {
	display: flex;
/*flex-direction: row;
justify-content: space-around;*/
	background-color: gray;
	height: 64px;
	margin:3px 4px;

}
.local-nav  li {
	flex:1;
}

.local-nav  a {
display: flex;
flex-direction: column;
align-items: center;
}
.local-nav-icon {
width: 32px;
height: 32px;
background-color: pink;
}