休闲时光的小代码-----用div格式制作田字格

来源:互联网 发布:js字符串包含某个字符 编辑:程序博客网 时间:2024/04/29 10:54
    <!doctype html>
    <html>
    <head>
    
    <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
     <meta name="description" content="浮动布局">
     <style type="text/css">
     #lside{
float:left;
background-color:green;
height:100px;
width:100px;
}
#rside{
float:left;
background-color:red;
height:100px;
width:100px;
}
#com{
background-color:yellow;
width:100px;
height:100px;
float:left;
clear:left;    <!--取消浮动布局-->
}
#comdown{
background-color:blue;
width:100px;
height:100px;
float:left;
}
     
     </style>
            
    <title>浮动布局</title>
    </head>
    
    <body>
    <!--往左飘--><!--产生并排的两个-->
    
    <div>
        <div id="lside">我是左</div>
        <div id="rside">我是右</div>
    </div>
    <div>   
        <div id="com">我是左下</div>
        <div id="comdown">我右下</div>
    </div>
    </body>
    </html>
1 0
原创粉丝点击