JavaWeb8——利用 CSS 和 DIV 网页布局

姜满月

已于 2022-03-22 15:24:03 修改

阅读量2.7k

点赞数 10

分类专栏： trush 文章标签： java css

于 2022-03-21 22:13:20 首次发布

本文链接：https://blog.csdn.net/qq_51184516/article/details/123627572

版权

trush 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

文章目录

1. DIV + CSS 布局
2. 网页布局框架示例
- 2.1 main.css
- 2.2 index.html
3. float 与 clear

1. DIV + CSS 布局

在开始设计一个网站时，首先要对网页进行布局，一个好的布局，可以加快开发进度。
DIV + CSS 布局是网页 HTML 通过div 标签以及 css 样式代码开发制作的网页的统称。
DIV + CSS 布局的网页更易维护，网页打开更快。
DIV + CSS 布局相对于表格，框架有以下优势：

1. 使用页面加载更快速。
2. 使修改设计时更有效率且费用更低。
3. 更有利于搜索引擎的搜索。
4. 节约成本，降低宽带带来的费用。
5. 使整个站点保持视觉的一致性。
6. 使站点更容易被其他设备访问。

2. 网页布局框架示例

首先在网站更目录下新建 HTML 页，命名为 index.html
在 CSS 目录下新建一个 CSS 文件。命名为 main.css

2.1 main.css

body {
    background-color: white;

    /* pt : 绝对长度。px : 相对长队 */
    font-size: 10pt;

    /* 设置字体 */
    font-family: Arial;

    /* 
    因为每个浏览器中对html标签的默认外边距和内边距的值不同，
    为了达到让主流浏览器设置出来的布局显示相同，
    则需要把html中所有标签的padding,margin都设置为0； 
    */ 
    margin: 0;  padding: 0;
    
    color: #333333;
}

#wapper {
    width: 960px;
    margin: 0;  padding: 0;
    background-color: #09460F;
}

#header {
    width: 960px;  height: 130px;
    padding-top: 5px;
    background-color: #C3BB1F;

    /* 
    1. 不允许有浮动对象 
    2. 元素两边都不允许由浮动的元素
    */
    clear: both;
}

#logo {
    width: 960px;  height: 100px;
    background-color: #4DC5D6;
}

#topmenu {
    width: 960px;  height: 30px;
    background-color: #F9630D;

    /* 
    1. 浮动 
    2. 移至父元素的左侧
    */
    float: left;
}

#content {
    width: 960px;  height: 500px;
    background-color: #F7AE16;

    clear: both;
}

#leftmenu {
    width: 200px;  height: 500px;
    padding-bottom: 10px;
    background-color: #CCCCCC;

    float: left;

    /* 指文本行基线之间的距离，不同字体，基线位置不同。 */
    line-height: 14pt;
}

#centercontent {
    width: 600px;  height: 500px;
    padding-bottom: 10px;
    background-color: #C59A6F;

    float: left;
    line-height: 14pt;
}

#rightsider {
    width: 160px;  height: 500px;
    padding-bottom: 10px;
    background-color: #FAF93C;

    float: left;
    line-height: 14pt;
}

#footer {
    width: 960px;  height: 30px;
    padding-bottom: 10px;
    background-color: #EE88CD;

    clear: both;
    line-height: 14pt;

    /* 文本排列到中间 */
    text-align: center;
}

2.2 index.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.0">
    <title>网页框架布局</title>
    <link rel="stylesheet" type="text/css" href="./CSS/mian.css">
</head>

<body>
    <center>
        <div id="wapper">
            <div id="header">
                <div id="logo">网站图片</div>
                <div id="topmenu">网站顶部导航</div>
            </div>
            <div id="content">
                <div id="leftmenu">网站左边的导航栏</div>
                <div id="centercontent">网站主体内容</div>
                <div id="rightsider">网站右边的导航栏</div>
            </div>
            <div id="footer">网站版权声明</div>
        </div>
    </center>
</body>

</html>

在这里插入图片描述

3. float 与 clear

网页文档流布局

- 网页文档一般都是自上而下的。
- float 可以改变为流方向，如左对齐。
- float 属性把一个网页元素（div）移动到网页的其他块（div）的某一边。
- 任何显示在浮动元素下方的 HTML 都在网页中上移，并环绕在浮动周围。

float 的属性有 3 种

1. left : 移至父元素中的左侧
2. right : 移至父元素中的右侧
3. none : 默认。会显示于它在文档中出现的位置

clear 的属性有 4 种

1. left : 不允许元素左边有浮动的元素
2. right : 不允许元素右边有浮动的元素
3. both : 不允许元素两边有浮动的元素
4. none : 允许元素两边有浮动的元素

float 与 clear 用法示例

<!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>float 与 clear 用法示例</title>
    <style>
        img {
            width: 100px;
            height: 100px;
            float: left;
            margin-left: 10px;
            margin-bottom: 10px;
        }

        p.id1 {
            font-size: 34px;
            float: right;
            border: 3px solid yellow;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <img src="../HTML文件/素材图片/javaweb_log.jpg">
        <p class="id1">
            我是设置的右浮动的 p文本内容
        </p>
        <!-- <div style="clear: left;"></div> -->
        <div style="background-color: green; width: 800px;">
            <h2>
                第三个元素...
                我没有设置浮动，前面两个都设置浮动
            </h2>
        </div>
    </div>
</body>

</html>

在这里插入图片描述

取消注释

姜满月

关注

10
点赞
踩
66

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb8——利用 CSS 和 DIV 网页布局

文章目录1. DIV + CSS 布局2. 网页布局框架示例1. DIV + CSS 布局在开始设计一个网站时，首先要对网页进行布局，一个好的布局，可以加快开发进度。DIV + CSS 布局是网页 HTML 通过div 标签以及 css 样式代码开发制作的网页的统称。DIV + CSS 布局的网页更易维护，网页打开更快。DIV + CSS 布局相对于表格，框架有以下优势：1. 使用页面加载更快速。2. 使修改设计时更有效率且费用更低。3. 更有利于搜索引擎的搜索。4. 节约成本，降低宽
复制链接

扫一扫