利用html5新标签实现如下布局
利用html5新标签实现如下布局
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <header> header </header> <nav> nav </nav> <div id="content"> <aside> 侧边栏 </aside> <main> 文章 </main> <div class="clear"></div> </div> <footer> 底部 </footer> </body> </html>
css:
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 120px;
background-color: #FFC0CB;
}
nav{
width: 100%;
height: 60px;
background-color: #DAA520;
}
#content{
width: 100%;
height: auto;
}
#content aside{
height: 400px;
background-color: #FF0000;
float: left;
width: 60%;
}
#content main{
height: 400px;
background-color: #008000;
float: left;
width: 40%;
}
.clear{
clear: both;
}
footer{
width: 100%;
height: 90px;
background-color: #333333;
}
@media screen and (max-width: 480px) {
#content aside{
float: none;
width: auto;
}
#content main{
float: none;
width: auto;
}
}
还没有留言，还不快点抢沙发？