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

CSS框架 此图如何实现的?

图片说明

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

  • 写回答

2条回答 默认 最新

  • 我只配被骂 2019-04-17 01: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条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 IEd中开关量采样信号通道设计
  • ¥45 字符串操作——数组越界问题
  • ¥15 Loss下降到0.08时不在下降调整学习率也没用
  • ¥15 QT+FFmpeg使用GPU加速解码
  • ¥15 为什么投影机用酷喵播放电影放一段时间就播放不下去了?提示发生未知故障,有什么解决办法吗?
  • ¥15 来个会搭建付费网站的有偿
  • ¥100 有能够实现人机模式的c/c++代码,有图片背景等,能够直接进行游戏
  • ¥20 校园网认证openwrt插件
  • ¥15 以AT89C51单片机芯片为核心来制作一个简易计算器,外部由4*4矩阵键盘和一个LCD1602字符型液晶显示屏构成,内部由一块AT89C51单片机构成,通过软件编程可实现简单加减乘除。
  • ¥15 求GCMS辅导数据分析
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部