HTML网页布局方式有哪些

发布网友

我来回答

共1个回答

热心网友

常用到的有下面几种，供参考：

高度和宽度都自适应的圆角矩形

两列布局

三列布局

浮动布局

例如两列布局实现：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>练习使用HTML</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>

    <body>
        
        <div id="d1">
            <span>DIV</span>
        </div>
        <div id="d2">
            <span>DIV</span>
        </div>
        <div id="d3">
            <span>DIV</span>
        </div>
    </body>

</html>

css文件：

#d1{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}
#d2{
    position: absolute;
    margin-left: 100px;
    width: 500px;
    height: 100px;
    background-color: blue;
}
#d3{
    position: absolute;
    margin-top: 100px;
    width: 600px;
    height: 100px;
    background-color: yellow;
}

效果：

全部栏目

HTML网页布局方式有哪些