移动端第十七章弹性盒子布局

最新推荐文章于 2024-05-30 15:19:04 发布

LW0512

最新推荐文章于 2024-05-30 15:19:04 发布

阅读量192

点赞数 1

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108935861

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

本文详细探讨了移动端的弹性盒子布局，通过实例图展示了其工作原理，并提供了具体的代码实现，帮助开发者理解如何在移动端实现灵活的响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹性盒子布局

实例图:
在这里插入图片描述
具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!--下载-->
		<div class="header_warp">
			<div class="logo_wrap">
				<div class="logo">
					<img src="img/1.png" alt="" />
				</div>
				<div class="logo_t">
					<p>新人送168元购物礼包</p>
					<p>下载考拉APP领取</p>
				</div>
			</div>
			<div class="down">下载领取</div>
		</div>
		<!--主题内容-->
		<div class="content_wrap">
			<!--搜索框-->
			<div class="search_warp">
				<div class="search">
					<span class="fdj"></span>
					<span class="inp">面膜</span>
				</div>
				<div class="login_btn">登录/注册</div>
			</div>
			<!--轮播-->
			<div class="banner">
				<img src="img/3.png"/>
			</div>
			<!--导航-->
			<nav class="nav_wrap">
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
				<a href="#">
					<img src="img/5.png"/>
				</a>
			</nav>
			<!--新人专享-->
			<div class="new_peop">
				<div class="peop_l">
					<img src="img/1.gif"/>
				</div>
				<div class="peop_r">
					<div>
						<img src="img/2.gif"/>
					</div>
					<div>
						<img src="img/3.gif"/>
					</div>
				</div>
			</div>
			<!--必买-->
			<div class="block">
				<div class="block_l">
					<div class="block_l_t">
						<p>必买清单</p>
						<p>什么值得买</p>
					</div>
					<div class="block_l_jpg">
						<img src="img/1.webp"/>
						<img src="img/0.jpg"/>	
					</div>
				</div>
				<div class="block_l">
					<div class="block_l_t">
						<p>必买清单</p>
						<p>什么值得买</p>
					</div>
					<div class="block_l_jpg">
						<img src="img/1.webp"/>
						<img src="img/0.jpg"/>	
					</div>
				</div>
			</div>
			<!--为你推荐-->
			<div class="ban_sub">
				<img src="img/tit.png"/>
			</div>
			<div class="cont_warp">
				<div class="cont_s">
					<div class="cont_img">
						<img src="img/1.webp"/>
					</div>
					<div class="cont_t">
						<p>SHISEIDO 资生堂 安热沙小金瓶防晒露 SPF50+PA++++60毫升 防水防汗</p>
					</div>
					<p class="mony">￥123</p>
				</div>
				<div class="cont_s">
					<div class="cont_img">
						<img src="img/1.webp"/>
					</div>
					<div class="cont_t">
						<p>SHISEIDO 资生堂 安热沙小金瓶防晒露 SPF50+PA++++60毫升 防水防汗</p>
					</div>
					<p class="mony">￥123</p>
				</div>
				<div class="cont_s">
					<div class="cont_img">
						<img src="img/1.webp"/>
					</div>
					<div class="cont_t">
						<p>SHISEIDO 资生堂 安热沙小金瓶防晒露 SPF50+PA++++60毫升 防水防汗</p>
					</div>
					<p class="mony">￥123</p>
				</div>
				<div class="cont_s">
					<div class="cont_img">
						<img src="img/1.webp"/>
					</div>
					<div class="cont_t">
						<p>SHISEIDO 资生堂 安热沙小金瓶防晒露 SPF50+PA++++60毫升 防水防汗</p>
					</div>
					<p class="mony">￥123</p>
				</div>
				<div class="cont_s">
					<div class="cont_img">
						<img src="img/1.webp"/>
					</div>
					<div class="cont_t">
						<p>SHISEIDO 资生堂 安热沙小金瓶防晒露 SPF50+PA++++60毫升 防水防汗</p>
					</div>
					<p class="mony">￥123</p>
				</div>
				<div class="cont_s">
					<div class="cont_img">
						<img src="img/1.webp"/>
					</div>
					<div class="cont_t">
						<p>SHISEIDO 资生堂 安热沙小金瓶防晒露 SPF50+PA++++60毫升 防水防汗</p>
					</div>
					<p class="mony">￥123</p>
				</div>
				<div class="cont_s">
					<div class="cont_img">
						<img src="img/1.webp"/>
					</div>
					<div class="cont_t">
						<p>SHISEIDO 资生堂 安热沙小金瓶防晒露 SPF50+PA++++60毫升 防水防汗</p>
					</div>
					<p class="mony">￥123</p>
				</div>
				<div class="cont_s">
					<div class="cont_img">
						<img src="img/1.webp"/>
					</div>
					<div class="cont_t">
						<p>SHISEIDO 资生堂 安热沙小金瓶防晒露 SPF50+PA++++60毫升 防水防汗</p>
					</div>
					<p class="mony">￥123</p>
				</div>
			</div>
			
		</div>
		<!--底部导航-->
		<div class="footer">
			<a href="#">
				<span>
					<img src="img/f1.png" alt="" />
				</span>
				
			</a>
			<a href="#">
				<span>
					<img src="img/f1.png" alt="" />
				</span>
				
			</a>
			<a href="#">
				<span>
					<img src="img/f1.png" alt="" />
				</span>
				
			</a>
			<a href="#">
				<span>
					<img src="img/f1.png" alt="" />
				</span>
				
			</a>
			
		</div>
	</body>
</html>