不是你的小迷妹 2019-04-13 16:36 采纳率: 100%
浏览 299
已采纳

CSS框架 此图如何实现的？

图片说明

web入门级小白不是很懂 百度了半天也不知所以然
是用border、padding、margin组合还是table做的呀？

  • 写回答

2条回答 默认 最新

  • 我只配被骂 2019-04-17 09:49
    关注
    </head>
   <style>
       /*居中对齐*/
       *{
           padding: 0px;
           margin: 0px auto;
       }
       /*最外面的背景颜色*/
       body{
           background: #793AFF;
       }
       /*所有盒子*/
       div{
           padding: 10px 40px;
           margin-top: 20px;
           width: 80%;
       }
       /*第一个盒子*/
       div:nth-child(1){
           background: #FFDD00;
       }
       /*第二个盒子*/
       div:nth-child(2){
           background: #A60002;
       }
       /*第二个盒子里面的全部div*/
       div>div{
           width: 25%;
           height: 500px;
           display: inline-block;
       }
       div>div:nth-child(2){
           background: #BF7B7C;
           margin-right: 20px;
       }
       div>div:nth-child(3){
           background: #639F4B;
           margin-right: 20px;
       }
       div>div:nth-child(4){
           background: #2025EB;
       }
       /*第三个盒子*/
       div:nth-child(3){
           background: #CD3300;
       }
   </style>
<body>


   <div>
     #header
   </div>
   <div>
   #maincontent<br>
        <div>#sidebar</div>
        <div>#content</div>
        <div>#sidebar2</div>
   </div>
   <div>
    #footer
   </div>
</body>

    我直接打出来了 下图

    图片说明
    还望采纳

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥50 如何增强飞上天的树莓派的热点信号强度，以使得笔记本可以在地面实现远程桌面连接
  • ¥15 MCNP里如何定义多个源？
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控：网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏