173. div 页面分割

最新推荐文章于 2023-12-21 20:36:01 发布

weixin_33962621

最新推荐文章于 2023-12-21 20:36:01 发布

阅读量639

点赞数

原文链接：https://my.oschina.net/springMVCAndspring/blog/1921711

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. 效果

2. html代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>页面分割</title>
<style>
   *{
       margin:0;
       padding:0;
       list-style:none;
   }
   html,body{
       width:100%;
       height:100%;
       //background-color:#cfcfcf;
   }
   .top_Box{
           width:100%;
           height:298px;
           margin:auto;
       }
   .ones,.twos{
       display:inline-block;
       vertical-align:top;
   }
   /*870*436*/
   .top_Box .ones{
       width:800px;
       height:298px;
       border:1px solid #262C3E;
       // background-color:#0D1428;
   }
   /*655*436*/
   .top_Box .twos{
       width:462px;
       height:100%;
       border:1px solid #262C3E;
       // background-color:#0D1428;
       margin-left:14px;
   }

   .bottom_Box{
       width:100%;
       height:350px;
       margin-top:14px;
   }
   .fasts,.centers,.lasts{
       display:inline-block;
       vertical-align:top;
   }
   .bottom_Box .fasts{
       width:483px;
       height:100%;
       border:1px solid #262C3E;
   //   background-color:#0D1428;
   }
   .bottom_Box .centers{
       width: 298px;
       height:100%;
       border:1px solid #262C3E;
       // background-color:#0D1428;
       margin-left:14px;
   }
   .bottom_Box .lasts{
       width:462px;
       height:100%;
       border:1px solid #262C3E;
       // background-color:#0D1428;
       margin-left:14px;
   }
   .bottom_contes{
       width:1292px;
       margin:0px auto;
       color:white;
   }
</style>