<div></div>使用案例

大多数网站可以使用

或者 元素来创建多列。但是,table标签是不建议作为布局工具使用的,因为表格不是布局工具
div 元素是用于分组 HTML 元素的块级元素。div默认就是垂直平铺(垂直排列);水平的需要加style="float:left"

加上style="float:left"的样式
代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><div></div>使用案例</title>
</head>
<body>

<div id="container" style="width:500px">

    <div id="header" style="background-color:#ff4800" align="center">
        <h1 style="margin-bottom:0">
            系统界面设计
        </h1>
    </div>

    <div id="menu" style="background-color:#00b2ff;height:200px;width:100px;float:left;" align="center">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容在这里
    </div>

    <div id="footer" style="background-color:#ff6200;clear:both;text-align:center;">
        版权@zwb.com
    </div>

</div>

</body>
</html>

结果展示:
<div></div>使用案例_第1张图片
<div></div>使用案例_第2张图片
不加上style="float:left"的样式:

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><div></div>使用案例</title>
</head>
<body>

<div id="container" style="width:500px">

    <div id="header" style="background-color:#ff4800" align="center">
        <h1 style="margin-bottom:0">
            系统界面设计
        </h1>
    </div>

    <div id="menu" style="background-color:#00b2ff;height:200px;width:100px;float:left;" align="center">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容在这里
    </div>

    <div id="footer" style="background-color:#ff6200;clear:both;text-align:center;">
        版权@zwb.com
    </div>

</div>

</body>
</html>

结果展示:
<div></div>使用案例_第3张图片

你可能感兴趣的:(前端,javascript,html)