bootp屏幕隐藏与显示

最新推荐文章于 2024-02-29 10:49:33 发布

kkdejw

最新推荐文章于 2024-02-29 10:49:33 发布

阅读量150

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/kkdejw/article/details/125075370

版权

中等及以上在这里插入图片描述
中等以下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<div class="header  ">header</div>
		<div class="main">
			<div class="f-item d-md-none d-sm-none d-xs-none" >item1</div>
			<div class="f-item">item2</div>	
			<div class="f-item d-md-none d-sm-none d-xs-none">item3</div>	
		
		</div>
		<div class="footer">footer</div>	
			<style type="text/css">
				.header,.footer{
					height: 130px;
					background-color: lightcyan;
				}
				.main{
					display: flex;
					min-height: 400px;
					
					
				}
				.main>.f-item:first-of-type,.main>.f-item:last-of-type{
					background-color: lawngreen;
					width: 100px;
					flex:0 0 auto;
				}
				.main>.f-item:nth-of-type(2){
					width: 400px;
					
					flex: 1 1 auto;
				}
				*{
					padding: 0;
					margin: 0;
				}
				
			</style>
	</body>
</html>