html 布局

2022-08-10 16:14:10

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

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

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

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

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

<!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>

<!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 布局,布布扣,bubuko.com

html 布局

码农公寓

相关文章