响应式布局demo，理解响应式布局

最新推荐文章于 2023-05-15 20:13:36 发布

人间清醒小仙女

最新推荐文章于 2023-05-15 20:13:36 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/weixin_45631278/article/details/106665563

版权

<html>
    <head>
        <meta charset="UTF-8">
        <title>响应式布局</title>
        <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
        <meta name="format-detection" content="telephone=no,email=no"/>
				<!-- <link rel="stylesheet" type="text/css" href="css/mo2.css"/> -->
		</head>
		<style>
*{
	margin: 0px;
	padding: 0px;
	font-family: "微软雅黑";
}
#head,
#foot,
#main
{
	height: 100px;
	width: 1200px;
	/*width: 85%;*/
	background-color: goldenrod;
	text-align: center;
	font-size: 48px;
	line-height: 100px;
	margin: 0 auto;
}
#head div{
	display: none;
	font-size: 20px;
	height: 30px;
	width: 100px;
	background-color: green;
	float: right;
	line-height: 30px;
	margin-top: 35px;
}
#head ul{
	width: 80%;
}
#head ul li{
	width: 20%;
	float: left;
	text-align: center;
	list-style: none;font-size: 20px;
}
#main{
	height: auto;
	margin: 10px auto;
	overflow: hidden;
}
.left,
.center,
.right{
	height: 600px;
	line-height: 600px;
	float: left;
	width: 20%;
	background-color: red
}
.center{
	width: 60%;
	border-left: 10px solid #FFF;
	border-right: 10px solid #FFF;
	box-sizing: border-box;
}
@media only screen and (max-width: 1200px) {
	#head,
	#foot,
	#main{
	width: 100%;
	}
}
@media only screen and (max-width: 980px) {
	.right{
			display: none;
	}
	.left{
			width: 30%;
	}
	.center{
			width: 70%;
			border-right: hidden;
	}
}
@media only screen and (max-width: 640px) {
	.left,
	.center,
	.right{
			width: 100%;
			display: block;
			height: 200px;
			line-height: 200px;
	}
	.center{
			border: hidden;
			border-top: 10px  solid #FFFFFF;
			border-bottom: 10px solid #FFFFFF;
			height: 600px;
			line-height: 600px;
	}
	#head ul{
			display: none;
	}
	#head div{
			display: block;
	}
}
</style>
    <body>
        <div>
            <header id="head">
                <ul>
                    <li>header1</li>
                    <li>header2</li>
                    <li>header2</li>
                    <li>header2</li>
                    <li>header2</li>
                </ul>
                <div>icon</div>
            </header>
            <section id="main">
                <div class="left">
                    left
                </div>
                <div class="center">
                    center
                </div>
                <div class="right">
                    right
                </div>
            </section>
            <footer id="foot">
                footer
            </footer>
        </div>
    </body>
</html>

在这里插入图片描述

转载于https://blog.csdn.net/weixin_42529699/article/details/81285919

人间清醒小仙女

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
响应式布局demo，理解响应式布局

<html> <head> <meta charset="UTF-8"> <title>响应式布局</title> <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" /> <meta name="format-
复制链接

扫一扫