网页前端：DIV静态页面布局

sky-stars

已于 2024-08-27 20:31:56 修改

阅读量1.9k

点赞数 2

分类专栏：网页前端文章标签： html css html5

于 2021-11-22 00:24:24 首次发布

本文链接：https://blog.csdn.net/qq_51917985/article/details/121463303

版权

网页前端专栏收录该内容

7 篇文章

订阅专栏

本文通过实战演练，详细解析了如何使用DIV进行静态页面布局，并巩固CSS层叠样式表的应用，包括盒模型、浮动、清除浮动和响应式设计。通过实例演示，提升对DIV组织结构和工作原理的掌握，以及CSS样式的灵活运用。

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

前言

实验目的：
（1）加深对 DIV 的基本概念、基本组织结构以及基本工作原理的理解；
（2）进一步掌握层叠样式表的使用方法。 
实验内容：
按照附件要求完成实验内容。网页布局严格按照要求完成，网页内容主题可以自行安排。

具体操作

DIV静态页面布局.css

* {
    box-sizing: border-box;
}

.code img{
    float: left;
    width: 12%;
    height: 12%;
    border:1px solid black;
}
.code1{
    float: left;
    width: 70%;
    padding-left: 10%;
}

.header, .footer {
    background-color: grey;
    color: white;
    padding: 10px;
    text-align: center;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.content {
    float: left;
    width: 33.33%;
    padding: 30px;
}

DIV静态页面布局.html

<!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">
    <title>Title</title>
    <link rel="stylesheet" href="../css/DIV静态页面布局.css">
</head>
<body>
<div class="code">
    <img src="../image/qrcode.png" alt="二维码">
</div>

<div class="code1">

<div class="header">
    <h1>上海</h1>
</div>

<div class="clearfix">
    <div class="content">
        <h1>城市</h1>
        <p> 上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
        </p>
    </div>
    <div class="content">
        <h1>城市</h1>
        <p> 上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
        </p>
    </div>
    <div class="content">
        <h1>城市</h1>
        <p> 上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
            上海是中华人民共和国四个直辖市之一。欢迎来到上海！
        </p>
    </div>
</div>

<div class="footer">
    <p>上海欢迎您！</p>
</div>
</div>
</body>
</html>

目录结构
在这里插入图片描述
实验结果

总结

（1）加深对 DIV 的基本概念、基本组织结构以及基本工作原理的理解；
（2）进一步掌握层叠样式表的使用方法。