html5 css练习定位布局

最新推荐文章于 2022-08-08 16:59:39 发布

weixin_34246551

最新推荐文章于 2022-08-08 16:59:39 发布

阅读量337

点赞数

原文链接：http://www.cnblogs.com/houweidong/p/9757011.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>浮动布局</title>
   <link rel="stylesheet" type="text/css" href="st1.css">
</head>
<body>
<header>头部内容</header>
<aside>侧栏导航</aside>
<section>主体内容</section>
<footer>底部</footer>
</body>
</html>

/*定位布局*/
*{
   margin: 0;
   padding: 0;
}
body{
   width: 960px;
   margin: 0 auto;
   position: relative;
}
header{
   width: 960px;
   height: 150px;
   background: rgba(0,0,0,0.3);

}
aside{
   width: 200px;
   height: 500px;
   background: rgba(200,20,20,0.8);

}
section{
   width: 760px;
   height: 500px;
   background: rgba(20,200,20,0.8);
   position: absolute;
   right: 0;
   top: 150px;
}
footer{
   width: 960px;
   height: 150px;
   background: rgba(60,60,60,0.6);
}