网页的第二种复杂的布局

最新推荐文章于 2021-09-23 16:03:59 发布

御裔宸

最新推荐文章于 2021-09-23 16:03:59 发布

阅读量345

点赞数

分类专栏： css知识点文章标签：有点复杂的布局

本文链接：https://blog.csdn.net/shisjieshoufu/article/details/79200324

版权

css知识点专栏收录该内容

25 篇文章 1 订阅

订阅专栏

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
   lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
   charset= 
  "utf-8" 
  > 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
  *{ 
 
  margin: 
   0; 
 
  padding: 
  0; 
 
               } 
 
  .box{ 
 
  width: 
   980px; 
 
  height: 
   700px; 
 
  background-color: 
   #D2E9F4; 
 
  margin: 
   0 
  auto; 
 
               } 
 
  .header{ 
 
  height: 
  50px; 
 
  background-color: 
   black; 
 
               } 
 
  .content{ 
 
  height: 
   600px; 
 
  background-color: 
   #46F3B6; 
 
               } 
 
  .l-cont{ 
 
  width: 
   100px; 
 
  height: 
   600px; 
 
  background-color: 
   #780ED7; 
 
  float: 
   left; 
 
               } 
 
  .m-cont{ 
 
  width: 
   780px; 
 
  height: 
   600px; 
 
  background-color: 
  #CBE923; 
 
  float: 
   left; 
 
               } 
 
  .r-cont{ 
 
  width: 
   100px; 
 
  height: 
   600px; 
 
  background-color: 
   blue; 
 
  float: 
   left; 
 
               } 
 
  .top{ 
 
  height: 
  300px; 
 
  background-color: 
   #F25D0F; 
 
               } 
 
  .bot{ 
 
  height: 
   300px; 
 
  background-color: 
   #126812; 
 
               } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  class= 
  "box" 
  > 
 
  < 
  div 
  class= 
  "header" 
  ></ 
  div 
  > 
 
  < 
  div 
  class= 
  "content" 
  > 
 
  < 
  div 
  class= 
  "l-cont" 
  ></ 
  div 
  >   
 
  < 
  div 
  class= 
  "m-cont" 
  > 
 
  <!-- 这下面都是流布局，不是那个浮动，所以有时候在 
 
  css上面不需要设置，左或者右。 
 
  只需要颜色与设置高度 --> 
 
  < 
  div 
  class= 
  "top" 
  ></ 
  div 
  > 
 
  < 
  div 
  class= 
  "bot" 
  ></ 
  div 
  > 
 
  </ 
  div 
  >   
 
  < 
  div 
  class= 
  "r-cont" 
  ></ 
  div 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "footer" 
  ></ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >