div加css完成经典布局

最新推荐文章于 2023-03-25 17:26:45 发布

原创最新推荐文章于 2023-03-25 17:26:45 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #布局

css 同时被 3 个专栏收录

2 篇文章

订阅专栏

html

1 篇文章

订阅专栏

布局

1 篇文章

订阅专栏

本文通过一个实战案例介绍了如何使用HTML和CSS实现基本的网页布局。包括顶部、导航、左右两侧内容区域及底部等部分的布局技巧，并针对块级元素、内联块元素的特点进行了详细说明。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>div布局练习</title>
    <style>
        .header {
            height: 100px;
            background-color:#E0ECFE;
        }
        .nav {
            height: 100px;
            background-color: aqua;
        }
        .left {
            height: 700px;
            width: 50%;
            display: inline-block;
            background-color: bisque;
        }
        .right {
            height: 700px;
            width: 49%;
            display: inline-block;
            background-color: blueviolet;
        }
        .footer {
            height: 100px;
            background-color: #D0D0D0;
        }
        
    </style>
</head>
<body style="height: 100%;"> 
    <div class="header"></div>
    <div class="nav"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>



    <!-- 
        知识点：
        块级元素的宽度是整个浏览器页面的宽度
        子div继承不到父div的宽和高，子div的宽和高会拓展父div的宽和高
        利用inline-block时，注意宽度之和不能是100%，因为inline-block存在误差，若是100%会超出整个页面的宽度
     -->
</body> 
</html>

还不成熟，之后会继续改正。