一个非常简单的布局
响应式页面布局，可以适应多种不同的端，PC端跟移动端间切换时给用户带来良好的体验
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-seale=1">
<link rel="stylesheet" href="xiangyingshi.css" type="text/css">
<title>模板页</title>
</head>
<body >
<div id="head" ></div>
<div id="con" >
<div id="left" ></div>
<div id="main" ></div>
<div id="right"></div>
</div>
<div id="foot" >
<div>
<p id="p">hello html</p>
</div>
</div>
</body>
</html>
css文件：
*{
margin:0px;
padding: 0px;
}
@media screen and (min-width: 960px){
#head,
#con,
#foot{
width:960px;
margin: 0px auto;
}
#head{
background-color: #808080;
height:100px;
}
#con{
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#left,
#main,
#right{
float: left;
height:500px;
}
#left{
background-color: #8cea00;
width: 225px;
}
#main{
background-color: #fff800;
width:500px;
margin-left: 5px;
margin-right: 5px;
}
#right{
background-color: #408080;
width:225px;
}
#foot{
background-color: #808080;
height: 100px;
}
}
@media screen and (min-width: 670px) and (max-width: 960px){
#head,
#con,
#foot{
width:670px;
margin: 0px auto;
}
#head{
background-color: #808080;
height:100px;
}
#con{
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#left,
#main,
#right{
float: left;
height:500px;
}
#left{
background-color: #8cea00;
width: 185px;
}
#main{
background-color: #fff800;
width:480px;
margin-left: 5px;
}
#right{
display: none ;
}
#foot{
background-color: #808080;
height: 100px;
}
}
@media screen and (max-width: 670px){
#head,
#con,
#foot{
width:480px;
margin: 0px auto;
}
#head{
background-color: #808080;
height:100px;
}
#con{
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#left,
#main,
#right{
width:480px;
}
#left{
background-color: #8cea00;
height:100px;
}
#main{
background-color: #fff800;
height:300px;
}
#right{
height:100px;
background-color: #408080;
}
#foot{
background-color: #808080;
height: 100px;
}
}
|
|
收藏
淘帖
踩
