逼自己看完！！CSS布局技术之——两列布局

标签：50px 207 color 布局 height background 两列 margin CSS

看完你就又多学了一点了！

两列布局样式

CSS3中提供了多列布局的支持，可以将文本内容以多列的形式进行排列。通过设置列数和间距等属性，可以控制列布局的样式。

很多网站都有些共同的特点，如页面顶部放置一个大的导航栏或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等；一般情况下，此类页面布局的两列都有固定的宽度，而且从内容上很容易区分主要内容和侧边栏。页面布局整体分为上、中、下3个部分，即 header 区域、container 区域和 footer 区域。其中，container 又包含 mainBox （主要内容区域）和 sideBox（侧边栏）

下面来看看经典的三行两列宽度固定布局：

其代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header{
            height: 50px;
            border: 2px black solid;
            background-color: gray;
            text-align: center;
            line-height: 50px;
            margin-bottom: 10px;
        }
        #container{
            height: 600px;
            width: 100%;
            border: 2px black solid;
            background-color: gray;
            text-align: center;
            margin-bottom: 10px;
            float: left;
        }
        #mainBox{
            height: 500px;
            width: 60%;
            border: 2px black solid;
            background-color: rgb(207, 207, 207);
            text-align: center;
            line-height: 500px;
            margin: 50px 10px;
            float: left;
        }
        #sideBox{
            height: 500px;
            width: 35%;
            border: 2px black solid;
            background-color: rgb(207, 207, 207);
            text-align: center;
            line-height: 500px;
            margin: 50px 10px;
            float: left;
        }
        footer{
            height: 50px;
            border: 2px black solid;
            background-color: gray;
            text-align: center;
            line-height: 50px;
            margin-bottom: 10px;
            clear: both;
        }
    </style>
</head>
<body>
    <header>
        header
    </header>
    <main id="container">
        <div id="mainBox">mainBox</div>
        <div id="sideBox">sideBox</div>
    </main>
    <footer>
        footer
    </footer>
</body>
</html>

以上使用浮动制作的两列布局

下面还可以运用行内块元素display： inline-block;属性也可以制作出相同的效果：

其CSS代码为：

<style>
        header{
            height: 50px;
            border: 2px black solid;
            background-color: gray;
            text-align: center;
            line-height: 50px;
            margin-bottom: 10px;
        }
        #container{
            height: 600px;
            width: 100%;
            border: 2px black solid;
            background-color: gray;
            text-align: center;
            margin-bottom: 10px;
        }
        #mainBox{
            height: 500px;
            width: 60%;
            border: 2px black solid;
            background-color: rgb(207, 207, 207);
            text-align: center;
            line-height: 500px;
            margin: 50px 10px;
            /* 盒子展示属性 */
            display: inline-block;
        }
        #sideBox{
            height: 500px;
            width: 35%;
            border: 2px black solid;
            background-color: rgb(207, 207, 207);
            text-align: center;
            line-height: 500px;
            margin: 50px 10px;
            /* 盒子展示属性 */
            display: inline-block;
        }
        footer{
            height: 50px;
            border: 2px black solid;
            background-color: gray;
            text-align: center;
            line-height: 50px;
            margin-bottom: 10px;
        }
    </style>

下面使用绝对定位也可以做出两列布局效果：

其代码为：

<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>典型的网页结构示例</title>  
    <style>
        nav{
            height: 30px;
            background-color: aquamarine;
            margin-top: 0px;
        }

        li{
            float: left;
            margin-right: 100px;
        }
        #section1{
            position: fixed;
            right: 50px;
            bottom: 100px;
            background-color: pink;
            border: 2px rgb(255, 88, 116) solid;
            padding: 5px;
        }
        aside{
            height: 500px;
            position: absolute;
            right: 0px;
            background-color: rgb(192, 255, 141);
        }
        #section2{
            width: 70%;
            height: 500px; 
            position: absolute;
            background-color: beige;
        }
        footer{
            width: 100%;
            background-color: gold;
            position: absolute;
            bottom: 0px;
        }
    </style> 
</head>  

<body>  
  
    <header>  
        <h1 align="center">广东云浮中医药职业学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr> <!-- 水平分割线 -->  
        <nav>  
            <ul type="none">  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于我们</a></li>  
                <li><a href="#">学生风采</a></li>  
                <li><a href="#">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr> <!-- 水平分割线 -->  
   
    <main>  
        <section id="section2">  
            <h2>最新文章</h2>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  
                <p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  

            <br>
              
        </section>  
        <aside>  
            <h3>侧边栏</h3>  
            <p>侧边栏内容，如快速链接、广告等。</p>  
            <table border="1">  
                <tr>  
                    <th>专业</th>  
                    <th>链接</th>  
                </tr>  
                <tr>  
                    <td>计算机应用技术</td>  
                    <td><a href="专业A详情页.html">专业A详情</a></td>  
                </tr>  
                <tr>  
                    <td>数字媒体技术</td>  
                    <td><a href="专业B详情页.html">专业B详情</a></td>  
                </tr>  
            </table>  
        </aside> 
        <section id="section1">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
    </main>  
  
    <footer>  
        <hr> <!-- 水平分割线 -->  
        <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>  


</html>

当然还有更多的方法可以做出两列布局效果，比如相对定位等等...方法多种多样！！！去尝试更多的方法吧！

标签：50px,207,color,布局,height,background,两列,margin,CSS
From： https://blog.csdn.net/2302_81399643/article/details/143050815

逼自己看完！！CSS布局技术之——两列布局

两列布局样式

下面来看看经典的三行两列宽度固定布局：

相关文章

赞助商

阅读排行