div结合css布局bbs首页(div+css布局入门)

下面就是“div结合css布局bbs首页(div+css布局入门)”的完整攻略：

常用的布局方式

在进行类似bbs首页的布局时，常用的有以下几种方式：

表格布局（table）
DIV+CSS布局
Flexbox布局
Grid布局

其中表格布局比较简单，这里我主要介绍DIV+CSS布局的实现。

DIV+CSS布局的特点

DIV+CSS布局的特点是使用 HTML 的 div 元素和 CSS 样式做布局。相比之前表格布局，在网页应用中，div布局更加灵活，可以适应不同的手机、笔记本和PC 等设备屏幕的尺寸大小。使用CSS进行样式定义，能够使网页美观明朗，易于维护。

使用DIV+CSS布局实现bbs首页

实现bbs首页的布局需要进行以下几个步骤：

使用 div 元素对布局进行划分
使用CSS进行样式定义，对不同的 div 元素进行排版和美化
合适的定位和浮动，安排div元素的位置和高度

下面是一个简单的DIV+CSS布局的示例，实现了一个网站的首页布局：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIV+CSS布局示例</title>
<style type="text/css">
.container {
    width: 1000px;
    margin: 0 auto;
}

// 定义左导航栏的样式
.left-nav {
    width: 200px;
    float: left;
    background-color: #eee;
}

// 定义右侧内容区域的样式
.content {
    width: 800px;
    float: left;
    background-color: #fff;
    padding: 20px;
}

// 定义底部区域的样式
.footer {
    clear: both;
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
    <div class="left-nav">
        <ul>
            <li>导航1</li>
            <li>导航2</li>
            <li>导航3</li>
        </ul>
    </div>
    <div class="content">
        <h2>欢迎来到BBS网站首页</h2>
        <p>这里是BBS网站的内容，包括各种帖子和讨论。</p>
    </div>
</div>
<div class="footer">
    © 2021 BBS网站. All Rights Reserved.
</div>
</body>
</html>

在上述代码中，我们定义了 .container 作为包含整个网站的外容器，使用 margin: 0 auto; 将其水平居中，并且使用 width: 1000px; 制定其宽度为 1000px，以保证在不同屏幕尺寸下的显示效果。

在 .container 里面，我们定义了左导航栏的样式 .left-nav，使用 float: left; 来将其向左浮动，占据网页的 1/5 宽度，使用 width: 200px; 来保证其宽度的大小。此外，定义了右侧内容区域的样式 .content，使用同样方式，使用 float: left; 把其向左浮动，占据网页的 4/5 宽度，定义了 background-color: #fff; 来将其背景色设为白色、 padding: 20px 来增加与相邻元素之间留白的大小。

最后我们定义了底部区域的样式 .footer ，使用 clear: both; 来清除浮动，使得底部内容正确布局，定义了 margin-top: 20px; 来将其与其他元素相隔一段距离，增强美观性与结构。

示例2：使用DIV+CSS布局实现Fex网站首页

下面是一个更为复杂的DIV+CSS网站布局案例，是Fex网站的首页布局。实际上这是“Fex”是一家博客网站，其名称为“前端网”，在这上面每篇博客的深入剖析经验、教程、新资源让人眼花缭乱。礼貌性质上，其框架和思路和一些技术类网站一样。以下代码实现了Fex网站主页的左右布局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fex网站首页</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .header {
            height: 60px;
            border-bottom: 1px solid #ccc;
            line-height: 60px;
        }

        .logo {
            float: left;
            font-size: 30px;
            font-weight: bold;
            padding-left: 20px;
        }

        .nav {
            float: right;
        }

        .nav li {
            float: left;
            list-style: none;
            margin-left: 30px;
        }

        .nav li a {
            color: #333;
            text-decoration: none;
        }

        .nav li a:hover {
            color: #f60;
        }

        .banner {
            height: 400px;
            background-color: #f9f9f9;
        }

        .container .left {
            width: 720px;
            height: 500px;
            float: left;
            margin-right: 20px;
        }

        .container .left .title {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .container .left .item {
            width: 350px;
            height: 200px;
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
            border: 1px solid #d5d5d5;
            overflow: hidden;
        }

        .container .left .item .imgbox {
            width: 350px;
            height: 140px;
            overflow: hidden;
        }

        .container .left .item .imgbox img {
            width: 100%;
        }

        .container .left .item .title {
            font-size: 16px;
            margin-top: 5px;
            margin-bottom: 5px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .container .left .item .desc {
            font-size: 14px;
            color: #999;
            margin-top: 5px;
            margin-bottom: 5px;
            height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .container .left .item .link {
            width: 100%;
            display: block;
            text-align: center;
            margin-top: 15px;
        }

        .container .right {
            width: 240px;
            height: 500px;
            float: left;
        }

        .container .right .item {
            width: 200px;
            height: 80px;
            margin-bottom: 10px;
            border: 1px solid #d5d5d5;
            overflow: hidden;
        }

        .container .right .item .imgbox {
            width: 80px;
            height: 80px;
            float: left;
            overflow: hidden;
        }

        .container .right .item .imgbox img {
            width: 100%;
        }

        .container .right .item .title {
            font-size: 14px;
            margin-left: 90px;
            margin-top: -40px;
        }

        .footer {
            height: 50px;
            line-height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            font-size: 14px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">FEX</div>
            <ul class="nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">前端技术</a></li>
                <li><a href="#">其它技术</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
        <div class="banner"></div>
        <div class="left">
            <div class="title">前端技术文章推荐</div>
            <div class="item">
                <div class="imgbox"><img src="https://s1.ax1x.com/2020/08/01/aSWVD1.jpg" alt=""></div>
                <div class="title">前端编码规范：HTML</div>
                <div class="desc">HTML代码是一个WEB文档的“门面”，行业内流传着大量的编码规范。这里我们提供了一份相对普遍的编码规范……</div>
                <div class="link"><a href="#">查看详情</a></div>
            </div>
            <div class="item">
                <div class="imgbox"><img src="https://s1.ax1x.com/2020/08/01/aSWDsO.jpg" alt=""></div>
                <div class="title">浏览器渲染原理及案例：Composite vs Paint Event</div>               
                <div class="desc">想要写出高性能的网站，必须要了解浏览器的渲染原理。而Webkit和Blink风头鹊起，也促进了理解Web技术的布局和渲染……</div>
                <div class="link"><a href="#">查看详情</a></div>
            </div>
            <div class="item">
                <div class="imgbox"><img src="https://s1.ax1x.com/2020/08/01/aSWcfs.jpg" alt=""></div>
                <div class="title">前端工程化实践：开发框架</div>               
                <div class="desc">随着前端的竞争变得愈加激烈，个人观点是，开箱即用是现代框架的关键。为解决前端规模化开发与维护问题，前端框架成为了广大团队的开发首选……</div>
                <div class="link"><a href="#">查看详情</a></div>
            </div>
        </div>
        <div class="right">
            <div class="title">热门文章排行</div>
            <div class="item">
                <div class="imgbox"><img src="https://s1.ax1x.com/2020/08/01/aSWMdK.jpg" alt=""></div>
                <div class="title">如何学好Web前端开发</div>
            </div>
            <div class="item">
                <div class="imgbox"><img src="https://s1.ax1x.com/2020/08/01/aSWMdK.jpg" alt=""></div>
                <div class="title">20个你需要知道前端工程化的概念</div>
            </div>
            <div class="item">
                <div class="imgbox"><img src="https://s1.ax1x.com/2020/08/01/aSWMdK.jpg" alt=""></div>
                <div class="title">一个模拟聊天室的实例</div>
            </div>
            <div class="item">
                <div class="imgbox"><img src="https://s1.ax1x.com/2020/08/01/aSWMdK.jpg" alt=""></div>
                <div class="title">5个实用的JavaScript小技巧</div>
            </div>
            <div class="item">
                <div class="imgbox"><img src="https://s1.ax1x.com/2020/08/01/aSWMdK.jpg" alt=""></div>
                <div class="title">编写可读的JavaScript代码技巧</div>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="footer">&COPY; 2021 FEX Inc. All Rights Reserved.</div>
    </div>
</body>
</html>

在上述的Fex网站代码中，我们同样定义了一个 .container 作为网站内容的整体外容器，使用 width: 1200px; 和 margin: 0 auto; 将其限定在网页中央，并且定义了 .header 来表示网站头部， .banner 来表示网站的全站SSR banner， .left 来表示左栏目，.right 来表示右栏目，.footer 来表示网站脚注底部。

在左栏目中，我们定义了栏目标题 .title，几个具体的文章展示区域，包括块 .item 和子块 .imgbox, .title, .desc, .link 等，使用 float: left; 来使其在web 页面中本该在一行显示。

同时，在右栏目中，我们定义了 .item，以实现热门文章的展示。

在这个布局中，当我们调整页面大小时，左右两栏也会相应改变大小，这是因为在 .left 和 .right 中，我们都使用了 width 进行了限定，并定义了 float: left; 就使得它在左侧浮动。同时，还使用了一些盒模型相关的技巧，使其实现左侧栏目的美观，具体实现上述技巧可以在代码中参考到。通过这些、就可以完成一个较为复杂的网站布局了。

以上就是“div结合css布局bbs首页(div+css布局入门)”的完整攻略，居然涵盖了在开发过程中的两个示例。希望对你有所帮助，谢谢！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：div结合css布局bbs首页(div+css布局入门) - Python技术站

div结合css布局bbs首页(div+css布局入门)

常用的布局方式

DIV+CSS布局的特点

使用DIV+CSS布局实现bbs首页

示例2：使用DIV+CSS布局实现Fex网站首页

相关文章