CSS3 实现网页弹性布局适应移动端

最新推荐文章于 2024-05-06 19:42:56 发布

RETURN100ERRORS

最新推荐文章于 2024-05-06 19:42:56 发布

阅读量537

点赞数 1

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/RETURN100ERRORS/article/details/123772655

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

要实现适应移动端布局
需要掌握以下css3特性
1 、 flex
2 、@media screen and

自己测试的源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style>
		*{
			padding: 0;
			margin: 0;
			color: white;
			box-sizing: border-box;
		}
		header{
			width: 100%;
			padding: 15px 100px;
			background-color: #5B639C;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			min-width: 300px;
		}
		.title{
			color: white;
			line-height: 30px;
			font-size: 30px;
		}
		
		header ul li{
			display: inline-block;
			color: white;
			padding: 0 30px;
		}
		
		header input{
			background-color: transparent;
			border: 1px solid #F0F2F5;
			padding: 10px 10px;
		}
		
		.phone-select{
			width: 50px;
			display: none;

		}
		
		.phone-select > span{
			width: 50px;
			display: inline-block;
			font-weight: bold;
			border-bottom: white solid 3px ;
			
		}
		
		.Rotation-map{
			height: 50vh;
			width: 100%;
			background-color: salmon;
		}
		
		.phone-ul{
			display: none;
			background-color: #5B639C;
			position: absolute;
			top: 100%;
			left: 0;
			min-width: 300px;
		}
		.phone-ul li{
			display: block;
			line-height: 30px;
			padding: 10px 10px;
		}
		
		.context{
			display: flex;
			justify-content: space-around;
			width: 100%;
			align-content: center;
		}
		.context-box{
			margin-top: 20px;
			width: 500px;
			margin-right: 3px;
			height: 30vh;
			background-color: #00FFFF;
		}
		
		.footer{
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 40px;
			background-color: #000000;
		}
		
		
	</style>
	
	<!-- 响应式布局 -->
	<style>
		@media screen and (max-width:900px){
			header>ul{
				display: none;
			}
			
			header{
				padding: 10px 10px;
				justify-content: space-between;
			}
			
			.phone-select{
				position: relative;
				display: block;
				cursor: pointer;
			}	
			
			.context{
				flex-wrap: wrap;
			}
			
			.context-box{
				width: 97%;
			}

		}
	</style>
	<body>
		<header>
			<div class="phone-select" onclick="showPhoneUl()">
				<span></span>
				<span></span>
				<div class="phone-ul">
					<ul>
						<li>
							<a href="#"> 首页 </a>
						</li>
						<li>
							<a href="#"> 购买商品 </a>
						</li>
						
						<li>
							<a href="#"> 购物车 </a>
						</li>
						
						<li>
							<a href="#"> 登录/注册 </a>
						</li>
					</ul>
				</div>
			</div>
			
		   <div class="title">
				<span> XX网 </span>
           </div>
			
			<ul>
				<li>
					<a href="#"> 首页 </a>
				</li>
				<li>
					<a href="#"> 购买商品 </a>
				</li>
				
				<li>
					<a href="#"> 购物车 </a>
				</li>
				
				<li>
					<a href="#"> 登录/注册 </a>
				</li>
			</ul>
			
			<input type="text" placeholder="Search" name="search" />
			
			
		</header>
		
		<div class="Rotation-map">
			这是轮播图
		</div>
		
		<div class="context">
			<div class="context-box"></div>
			<div class="context-box"></div>
			<div class="context-box"></div>
		</div>
		
		<footer class="footer">
			<span> AHPU </span>
		</footer>
					
	</body>
	
	<script>
		function showPhoneUl(){
		    let ul = document.getElementsByClassName("phone-ul")[0];
			ul.style["display"] = ul.style["display"] === "" ? "block":"";
		
		}
	</script>
</html>

RETURN100ERRORS

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 实现网页弹性布局适应移动端

要实现适应移动端布局需要掌握以下css3特性1 、 flex2 、@media screen and自己测试的源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </h
复制链接

扫一扫