daima

最新推荐文章于 2024-11-05 11:58:24 发布

Fengwangq

最新推荐文章于 2024-11-05 11:58:24 发布

阅读量66

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/Fengwangq/article/details/121351483

版权

HTML CSS 布局定位样式设计

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           .a1{
               width: 1200px;
               height: 600px;
               margin: 50px auto; /* 水平居中 */
               border: 1px solid red;
           }
           .a2{
               position: fixed;
               right: 20px;
               top: 200px;
               width: 80px;
               height: 249px;
               border: 1px solid red;
           }
           .b1{
               width: 100%;
               height: 60px;
               border: 1px solid green;
           }
           .b2{
               position: relative;
               width: 100%;
               height: 540px;
               border: 1px solid #008000;
           }
           .c1{
               width: 150px;
               height: 100%;
               border: 1px solid blue;
           }
           .c2{
               position: absolute;
               top: 0;
               right: 0;
               width: 1050px;
               height: 100%;
               border: 1px solid blue;
           }
       </style>
   </head>
   <body>
       
       <div class="a1">
           
           <div class="b1"></div>
           

           
           <div class="b2">
               
               <div class="c1"></div>
               
               
               <div class="c2"></div>
               
           </div>
           
       </div>
       

       
       <div class="a2"></div>
       
   </body>
</html>