HTML 布局

最新推荐文章于 2024-11-09 21:24:41 发布

LDS7

最新推荐文章于 2024-11-09 21:24:41 发布

阅读量198

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/LDS123457/article/details/121706236

版权

网页布局对改善网站的外观非常重要。

请慎重设计您的网页布局。

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用div 元素来创建多列布局：

浮动布局

使用浮动来完成左中右三栏布局
float:left----左浮动
float:right----右浮动
tip：使用float浮动时，margin:0 auto;使块元素居中将会失效

<style>
    .box {
        width: 800px;
        height: 750px;
        background-color: #e0e0e1;
        margin: 20px auto auto;
    }

    .box1 {
        width: 200px;
        height: 700px;
        background-color: #5b5b5e;
        padding: 0;
        float: left;
        text-align: center;
    }

    .box2 {
        width: 595px;
        height: 330px;
        float: left;
        margin-left: 0.3em;
    }

    .box3 {
        width: 595px;
        height: 370px;
        float: left;
        margin-left: 0.3em;


    }

    .logo {
        color: aliceblue;
        font-size: 70px;
        font-weight: 700;
        margin-top: 10px;
    }

    .cat {
        color: aliceblue;
        margin-top: 10px;
        font-size: 15px;
    }

    .ul {
        margin-top: 50px;
    }

    .img {
        float: left;
        padding: 5px;
    }


</style>
<body>
<div class="box">

    <div class="box1">
        <div class="logo">logo</div>
        <div class="cat">某某猫摄影专辑</div>
        <div class="ul">
            <dl>
                <dt>网站首页</dt>
                <dt>咨询中心</dt>
                <dt>产品展示</dt>
                <dt>关于我们</dt>
                <dt>联系我们</dt>
            </dl>


        </div>

    </div>