html 布局

制定浮动之后,需要把height width最好定下,以免出现奇怪的现象

父元素高度没有设置,就是0px 

其子元素如果浮动。再高也不会撑开父元素的高度,

注意会把紧挨着的下面元素向上被 浮动的子元素覆盖。

 

用记事本 文件保存编码和charset编码不一样。浏览器按照charset解释。注意乱码!
id用数字取名字。显示不了要表示的效果,浏览器不读取渲染效果。
不声明docutype直接后果是:不同浏览器可能渲染的效果不同。低版本IE渲染,会有问题!得不到预期的效果!

 

 

html 布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    
    <style type="text/css">
        #container{
            margin:0 auto;
            width:1004px;
            background:gray;
        }
        
        #header{
            height:120px;
            background:orange;
        }
        
        #main{
            height:600px;
            background:green;
        }
        
        #lefts{
            float:left;
            height:600px;
            width:700px;
            background:pink;
        }
        
        #ls{
            float:left;
            height:290px;
            width:340px;
            margin:5px 5px 5px 5px;
            background:#0066CC;
        }
    
        
        #rights{
            float:right;
            height:600px;
            width:304px;
            background:purple;
        }
        
        #rs{
            height:296px;
            width:300px;
            margin:2px 2px 4px 2px;
            background:#ACD6FF;
        }
        
        
        #footer{
            height:120px;
            background:blue;
            color:#FFFFFF;
        }
    </style>
    
</head>
<body>
    <div id="container">
         <div id="header">HEADER</div>
         <div id="main">
                <div id="lefts">
                    <div id="ls">1</div>
                    <div id="ls">2</div>
                    <div id="ls">3</div>
                    <div id="ls">4</div>
                </div>
                <div id="rights">
                    <div id="rs">5</div>
                    <div id="rs">6</div>
                </div>
         </div>
         <div id="footer">FOOTER</div>
    </div>
</body>
</html>
html 布局

 

 

 

html 布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    
    <style type="text/css">
        #container{
            margin:0 auto;
            width:1004px;
            background:gray;
        }
        
        #header{
            height:120px;
            background:orange;
        }
        
        #main{
            height:600px;
            background:green;
        }
        
        #lefts{
            float:left;
            height:600px;
            width:700px;
            background:pink;
        }
        
        #ls1{
            float:left;
            height:290px;
            width:340px;
            margin:5px 5px 5px 5px;
            background:#0066CC;
        }
        
        #ls2{
            float:left;
            height:290px;
            width:340px;
            margin:5px 5px 5px 5px;
            background:#00AEAE;
        }
        
        #ls3{
            float:left;
            height:290px;
            width:340px;
            margin:5px 5px 5px 5px;
            background:#02C874;
            clear:both;
        }
        
        #ls4{
            float:left;
            height:290px;
            width:340px;
            margin:5px 5px 5px 5px;
            background:#00BB00;
        }
        
        #rights{
            float:right;
            height:600px;
            width:304px;
            background:purple;
        }
        
        #rs1{
            height:296px;
            width:300px;
            margin:2px 2px 4px 2px;
            background:#ACD6FF;
        }
        
        #rs2{
            height:296px;
            width:300px;
            margin:2px 2px 2px 2px;
            background:#CAFFFF;
        }
        
        #footer{
            height:120px;
            background:blue;
            color:#FFFFFF;
        }
    </style>
    
</head>
<body>
    <div id="container">
         <div id="header">HEADER</div>
         <div id="main">
                <div id="lefts">
                    <div id="ls1">1</div>
                    <div id="ls2">2</div>
                    <div id="ls3">3</div>
                    <div id="ls4">4</div>
                </div>
                <div id="rights">
                    <div id="rs1">5</div>
                    <div id="rs2">6</div>
                </div>
         </div>
         <div id="footer">FOOTER</div>
    </div>
</body>
</html>
html 布局

 

 

 

 

 

 

 

 

html 布局,布布扣,bubuko.com

html 布局

上一篇:海康威视频监控设备Web查看系统(一):概要篇


下一篇:ASP.NET Core WebApi AspNetCoreRateLimit 限流中间件学习