百度周边案例弹性盒子

ゞ浴缸里的玫瑰 2021-07-24 19:56 322阅读 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(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>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/d0f580c1fbab44eda053260798ab80ee.png