HTML 布局

最新推荐文章于 2024-09-05 23:16:39 发布

咳咳呀

最新推荐文章于 2024-09-05 23:16:39 发布

阅读量169

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45031640/article/details/89943897

版权

HTML 布局

html 、css

HTML CSS+DIV 实现整体布局

网页的布局对网站的建设非常的重要，网站常常以多列显示内容，所以请谨慎设计您的网页布局！

图片：
在这里插入图片描述

HTML布局 -使用 <div> 元素

<div>元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

实例：

<!DOCTYPE html>

<title>布局</title>

<div class="header">
    <div class="header_l">250*100</div>
    <div class="header_r">150*50</div>
    <div class="header_b">640*50</div>
    <div class="clear"></div>
</div>

<div class="middle">
    <div class="middle_l">320*400</div>

    <div class="middle_r">

        <div class="middle_r_t">400*200</div>
        <div class="middle_r_r">240*350</div>
        <div class="middle_r_m">400*140</div>
        <div class="clear"></div>
        <div class="middle_r_b">650*40</div>

    </div>

    <div class="clear"></div>
</div>

<div class="bottom">980*40</div>

css

<style>
    .clear{
        clear: both;
    }

    .header{
        width: 980px;
        height: 100px;
        margin: 0 auto 10px auto;
        text-align: center;
    }

    .header .header_l{
        width: 250px;
        height: 100px;
        float: left;
        background: pink;
    }

    .header .header_r{
        width: 150px;
        height: 50px;
        float: right;
        background: rgb(36, 120, 216);
    }

    .header .header_b{
        width: 640px;
        height: 50px;
        float: right;
        background:purple;
    }

    .middle{
        width: 980px;
        height: 400px;
        margin: 0 auto 10px auto;
        text-align: center;
        background: lightblue;
    }

    .middle .middle_l{
        width: 320px;
        height: 400px;
        background: yellow;
        float: left;
    }

    .middle .middle_r{
        width: 650px;
        height: 400px;
        float: right;
        background: salmon;
    }

    .middle .middle_r .middle_r_t{
        width: 400px;
        height: 200px;
        float: left;
        background: seagreen;
        margin: 0 10px 10px 0;
    }

    .middle .middle_r .middle_r_r{
        width: 240px;
        height: 350px;
        float: right;
        background: red;
    }

    .middle .middle_r .middle_r_m{
        width: 400px;
        height: 140px;
        float: left;
        background: slateblue;
        margin: 0 10px 10px 0;
    }

    

    .middle .middle_r .middle_r_b{
        width: 650px;
        height: 40px;
        background: sienna;
    }

    .bottom{
        width: 980px;
        height: 40px;
        text-align: center;
        margin: 0 auto ;
        background: springgreen;
    }

</style>

效果图
在这里插入图片描述

HTML标签

div
span

HTML布局的好处

虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。
使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

如有不足，请多多指教！

咳咳呀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML 布局

HTML 布局html 、cssHTML CSS+DIV 实现整体布局网页的布局对网站的建设非常的重要，网站常常以多列显示内容，所以请谨慎设计您的网页布局！图片：HTML布局 -使用 <div> 元素<div>元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。实例：<!DOCTYPE html> <title&...
复制链接

扫一扫