css盒子模型的应用

最新推荐文章于 2022-06-27 07:30:25 发布

最酷程序员

最新推荐文章于 2022-06-27 07:30:25 发布

阅读量185

点赞数

分类专栏：简单页面布局文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_45863735/article/details/103053428

版权

简单页面布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用css做简单的页面布局

今天用css做了一个简单的页面布局，大家可以参考一下代码，进行修改，完善页面的布局。
html代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css盒子模型应用</title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <div class="top">
          <div class="top_content"></div>
    </div>
    <div class="body">
          <div class="body_img"></div>
          <div class="body_no"></div>
          <div class="body_content">
            
          </div>
    </div>
    <div class="footing">
        <div class="footing_content"></div>
        <div class="footing_subnav"></div>
    </div>
    </body>
</html>

css代码如下：

*{
    margin: 0px;
    padding: 0px;
}
.top{
    width: 100%;
    height: 50px;
    background-color: black;
}
.top_content{
    width: 75%;
    height: 50px;
    margin: 0px auto;
    background-color: blue;
}
.body{
    margin: 20px auto;
    width: 75%;
    height: 1500px;
    background-color: blanchedalmond;
}
.body_img{
    width: 100%;
    height: 400px;
    background-color: yellow;
}
.body_content{
    width: 100%;
    height: 1100px;
    background-color: brown;
}
.body_no{
    width: 100%;
    height: 50px;
    background-color: aquamarine;
}
.footing{
    width: 75%;
    height: 400px;
    background-color: indigo;
    margin: 0px auto;
}
.footing_content{
    width: 100%;
    height: 330px;
    background-color: darkseagreen;
}
.footing_subnav{
    width: 100%;
    height: 70px;
    background-color: black;
}

主要是对css样式的深刻了解，对css中div属性的布局，网页布局基本包括三个部分，head、body、footing，再把这三个部分继续分成多个div层，在对每层进行样式修改，就能达到你想要的页面效果。
以上是小编今天写代码内容。希望对大家写代码有所帮助，谢谢大家。

最酷程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型的应用

用css做简单的页面布局今天用css做了一个简单的页面布局，大家可以参考一下代码，进行修改，完善页面的布局。html代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>css盒子模型应用</title> ...
复制链接

扫一扫