百度周边案例弹性盒子

最新推荐文章于 2022-02-14 10:03:24 发布

神奇大叔

最新推荐文章于 2022-02-14 10:03:24 发布

阅读量171

点赞数

分类专栏：网页制作案例

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103110758

版权

网页制作案例专栏收录该内容

41 篇文章 3 订阅

订阅专栏

css文件

body{
	background-color: #F4F4F4;
}
.nav{
	width:100%;
	height: 75px;
	background-color: #ff4433;
	display: flex;
}
.arrow,.search{
	width:75px;
	height: 75px;
}
.arrow{
	background-image: url(img/百度箭头.jpg);
	background-repeat: no-repeat;
	background-size: 50px 70px;
}
.search{
	background-image: url(img/百度搜索.jpg);
	background-repeat: no-repeat;
	background-size: 50px 70px;
	
}
.title{
	height: 75px;	
	flex-grow: 1;
	font-size:20px;
	color:#fff;
	line-height: 75px;
	text-align: center;
}
.food{
	display: flex;
	background-color: #fff;
	height:200px;
	align-items: center;
}
.food div{
	width:40%;
	min-width:50px;
}

.menu{
	background-color: #fff;
}

.menu>div{
	display: flex;
}

.menu>div>div{
	flex-grow:1;
	border-right:1px solid #f2f4f5;
	margin: 30px;
}
.menu>div:first-child{
	border-bottom:solid 1px #F2F4F5 ;
}
.menu>div>div:last-child{
	border-right: none;
}

html文件

<html>
	<head>
		<meta charset="utf-8">
		<title>百度周边案例  弹性盒子</title>
		<link rel="stylesheet" href="2.css" />
	</head>
	<body>
		<div class="nav">
			<div class="arrow"></div>
			<div class="title"><span>周边<span></div>
			<div class="search"></div>
		</div>
		
		<div class="food">
			<div align="center"><img src="img/百度美食.jpg" alt="" /><br />
			</div>
			<div align="center"><img src="img/百度美食.jpg" alt="" /><br />
			</div>
			<div align="center"><img src="img/百度美食.jpg" alt="" /><br />

			</div>
			<div align="center"><img src="img/百度美食.jpg" alt="" /><br />
			</div>
			<div align="center"><img src="img/百度美食.jpg" alt="" /><br />

			</div>
		</div>
		
		<div class="menu">
			<div id="div01" >
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
			</div>
			
			<div >
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
				<div>
					<img src="img/百度小吃.jpg" alt="" />
				</div>
			</div>
		</div>
	</body>
</html>

效果图:
在这里插入图片描述

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度周边案例弹性盒子

css文件body{ background-color: #F4F4F4;}.nav{ width:100%; height: 75px; background-color: #ff4433; display: flex;}.arrow,.search{ width:75px; height: 75px;}.arrow{ background-image: url(i...
复制链接

扫一扫