码迷,mamicode.com
首页 > Web开发 > 详细

HTML 盒子模式的相关问题

时间:2017-04-02 09:51:52      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:显示   htm   set   ide   class   color   utf-8   lang   float   

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>document</title>
        <style type="text/css">

        .header,.main,.footer{
          
          width:500px;
        }
        .header,.footer{
            height:100px;      //盒子模型 要是不给height 高度 ;将不显示;只有设置高度才有图像出来 
            background:#000;
        }
        .main{
            height: 300px;     //内嵌的盒子 也不继承 height ,也需要独立设置高度
            background-color: #eee;
             margin:10px 0;    
        }
        .main .content{
               width:300px;
               height:300px;   
               background:orange;
               float:left;
        }
      .main  .sidebar{
           width:190px;
           height:300px;
           background:green;
       float:right;
       }
        </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="main">
        <div class="content"></div>
        <div class="sidebar"></div>
    </div>
    <div class="footer"></div>
    </body>
</html>

 

HTML 盒子模式的相关问题

标签:显示   htm   set   ide   class   color   utf-8   lang   float   

原文地址:http://www.cnblogs.com/yimian/p/6658230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!