使用div与CSS实现网页布局_divcss制作一个网页布局代码-CSDN博客

本文链接：https://blog.csdn.net/m0_69801663/article/details/129233400

文章展示了如何使用VSCode创建HTML和CSS文件，并编写代码实现页面布局。HTML部分包含多个div元素，CSS部分定义了不同ID的样式，用于画图布局，创建了一个1000px*500px的结构，包括不同颜色和尺寸的块状元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vscode创建文件夹

在文件夹里面创建text.html和text.css文件

在text文件输入如下代码：

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tt1</title>
    <link rel="stylesheet" type="text/css" href="text.css">
</head>
<body>
    <div id="z">
        <div id="a"></div>
            <div id="d">
               <div id="e"></div>
               <div id="f">
                   <div id="g"></div>
                   <div id="h"></div>
               </div>
               <div id="c">
                   <div id="l"></div>
                   <div id="j"></div>
                   <div id="k"></div>
               </div>
            </div>
        <div id="b"></div>    
    </div>
</body>
</html>

用css画图布局输入如下代码：

#z{width:1000px;height:500px;margin: 0 auto;}
#a{background-color:
 red;width: 1000px;height: 90px;margin-bottom: 10px;}
#d{width:1000px;height:300px;background-color: brown;}
#e{width:240px;height:300px;float: left;background-color:gray;margin-right:10px;}
#c{width:500px;height:300px;background-color:salmon;float:right;}
#f{width:240px;height:300px;float:right;margin-left: 10px;}
#b{background-color:gold;width: 1000px;height: 90px;margin-top: 10px;}
#g{width:115px;height:300px;margin-right: 5px;background-color: pink;float: left;}
#h{width:115px;height:300px;margin-left:5px;background-color:yellow;float: right;}
#l{width:500px;height:100px;background-color:hotpink;margin-bottom: 50px;}
#j{width:220px;height:150px;background-color:black;margin-left: 15px;float: left;}
#k{width:220px;height:150px;background-color:blue;margin-left: 15px;margin-right: 30px;float: right;}

点击Ctrl+s保存，然后运行，得到如图所示：