<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.root{
width: 90%;
margin: 0 auto;
border: 2px solid blue;
}
ul{
width: 160px;
float: left;
border: 1px solid pink;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
.right p{
padding: 20px;
margin-left: 202px;
border:1px solid green;
}
/*媒介查询*/
@media only screen and (max-width:700px ) {
ul{
float: none;
width: 100%;
height: 40px;
padding: 0;
}
ul li{
float: left;
list-style: none;
padding: 10px;
padding-left: 20px;
}
.right p{
margin:0;
}
}
</style>
</head>
<body>
<div class="root">
<ul>
<li><a href="###">导航1</a></li>
<li><a href="###">导航2</a></li>
<li><a href="###">导航3</a></li>
<li><a href="###">导航4</a></li>
</ul>
<div class="right">
<p>这是一个响应式布局练习，通过缩放浏览器窗口大小来观看实际效果</p>
<p>这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....
这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字....这是一段酱油文字.... </p>
</div>
</div>
</body>
</html>
网友评论