响应式页面布局

最新推荐文章于 2023-09-26 22:47:59 发布

青柠97

最新推荐文章于 2023-09-26 22:47:59 发布

阅读量132

点赞数

文章标签：响应式页面布局

本文链接：https://blog.csdn.net/a1997bcd/article/details/103387746

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/pc.css">
<link rel="stylesheet" type="text/css" href="css/ipad.css">
<link rel="stylesheet" type="text/css" href="css/shouji.css">
<style>


</style>
</head>

<body>
<header>
 我是头部
</header>
<nav>
我是导航
</nav>
<aside>
我是侧边拦
</aside>
<section>
我是空白区域
</section>
<footer>
我是页脚
</footer>
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*手机端*/
@media screen and (max-width: 375px){
	*{color:red}
	body{ height:800px}
	header{width:100%; background:red;height:10%}
	nav{ display:none;}
	aside{width:100%; background:#FF6; height:50%;}
	section{width:100%; height:30%; background:#09c;}
	footer{width:100%; height:10%; background:#93C}
	}

@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 1024px){
	*{color:red}
	body{ height:800px}
	header{width:100%; background:green;height:10%}
	nav{width:100%; background:#9F3;}
	aside{width:100%; background:#FF6; height:50%;}
	section{width:100%; height:30%; background:#09c;}
	footer{width:100%; height:10%; background:#93C}
	}

,

@charset "utf-8";
/* CSS Document */
/*pc端*/
header{width:100%; height:100px; background:#FCF}
nav{ width:100%; height:50px; background:#FFC;}
aside{width:30%; height:400px; background:#C9F; float:left;}
section{width:70%; height:400px; background:#9C6; float:right}
footer{clear:both; width:100%; height:100px; background:#09c;}

青柠97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式页面布局

<!doctype html><html><head><meta charset="utf-8"><title>响应式布局</title><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /&g...
复制链接

扫一扫