菜单 搜索
首页 前端知识 CSS基础—网页布局（做出你心爱的网页）

CSS基础—网页布局（做出你心爱的网页）

2025-03-23 11:03:32 前端知识 前端哥 642 245 我要收藏

1、两列布局

（1）概念

                经典两列布局是指一种网页布局方式，其中一列宽度固定，另一列宽度自适应。‌ 这种布局方式在网页设计中非常常见，因为它能够提供良好的视觉效果和用户体验。

如图所示：

                页面顶部放置一个大的导航或广告条，左边是主页示意栏，右边则是具体内容或文章，下面还有点赞栏

                此类网页布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，即header区域、container区域和footer区域。其中，container又包含mainBox（主要内容区域）和sideBox（侧边栏）

        示意图如下：

图源网络

 （2）实现方法

                利用我们之前学习的CSS盒子模型的浮动属性（float） ，将元素向左或向右浮动，另一个元素则自动环绕在其周围，从而实现两列布局

eg：

 运行代码：

<head>
    <style>
        nav ul{
            height:30px;  /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
            background-color: aquamarine;
                }
        nav ul li{
            margin-right: 20px;
            float:left;
                }
        #contact{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            position: fixed;
            left:1100px;
            top:500px;
                }
        article{
            width: 70%;
            height: 500px;
            background-color: aqua;
            border: 2px black solid;
            float: left;
                }
        aside{
            width: 25%;
            height: 500px;
            background-color: paleturquoise;
            border: 2px black solid;
            float: left;
            margin-left: 2%;
             }
        footer{
            width: 100%;
            height: 10%;
            background-color: blue;
            border: 2px black solid;
            }
    
    </style>
</head>  
<body>  
    <header>  
        <h1 align="center">栗子七的网页</h1>  
        <p align="center">欢迎观看</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>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="C:\Users\栗子\Desktop\web前端开发技术\xg.png" alt="文章配图"                 
                        width="200" height="200">  
                <p>小狗祝福大家<a href="#">点击这里有惊喜</a></p>  
            </article>  
            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>爱好</th>  
                        <th>特长</th>  
                    </tr>  
                    <tr>  
                        <td>看小说</td>  
                        <td><a href="C:\Users\栗子\Desktop\web前端开发技术\html\总结小练    
                             习.html">详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>追剧</td>  
                        <td><a href="C:\Users\栗子\Desktop\web前端开发技术\html\总结小练 
                                 习.html">详情</a></td>  
                    </tr>  
                </table>  
            </aside>  
            <div style="clear: both;"></div>
        </section>  
        <section id="contact">  
            <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>  
    <hr>  
    <footer>  
        <p>版权所有 &copy; 栗子七</p>  
    </footer>  
</body>  
复制

仅供大家参考

2、三列布局 

                经典三列布局是指一种页面布局方式，其中包含三列，左右两列宽度固定，中间一列宽度自适应。‌ 这种布局方式在许多网站的首页中广泛应用。 

                对于三列布局，浏览者的注意力最容易集中在中间栏的信息区域，其次才是左、右两侧的信息 

三列布局示意图：

图源网络

eg:

运行代码：

<head> 
    <style>
        nav ul{
            height:30px; 
            background-color: #D1C5C6;
                }
        nav ul li{
            margin-right: 20px;
            float:left;
                }
        #contact{
            width: 220px;
            height: 160px;
            background-color: rgb(240, 209, 215);
            border: 2px black solid;
            position: fixed;
            left:1100px;
            top:500px;
            text-align:center
                }
        section{
            width:1500px;
                }
        article{
            width: 450px;
            height: 520px;
             background-color:pink;
              float: left;
              text-align:center
                }
        #d1{
            width: 600px;
            height: 520px;
             background-color:palevioletred;
              float: left;
              text-align:center
            }
        aside{
            width: 450px;
            height: 520px;
            background-color:pink;
            float:right;
            text-align:center
            }
        footer{
                width: 100%;
                height:30px; 
                background-color:plum;
                text-align:center
            }
    </style>
</head>
<body>   
    <header >  
        <h1 align="center">栗子七的网页</h1>  
        <p align="center">欢迎观看</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>  
    <main>  
        <section>  
            <article >  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <!-- <br><br><br> -->
            </article>  
            <nav id="d1">
                <img src="C:\Users\栗子\Desktop\web前端开发技术\xg.png" alt="文章配图" 
                          width="200" height="200">  
                <p><a href="https://gdyfvccm.edu.cn/">点击这里有惊喜</a></p>  
            </nav>
            <aside>  
                <h3 >侧边栏</h3>  
                <p >侧边栏内容，如快速链接、广告等。</p>  
                <table border="1" id="h1">  
                        <tr>  
                            <th>爱好</th>  
                            <th>特长</th>  
                        </tr>  
                        <tr>  
                            <td>看小说</td>  
                            <td><a href="#">详情</a></td>  
                        </tr>  
                        <tr>  
                            <td>追剧</td>  
                            <td><a href="#">详情</a></td>  
                        </tr>  
                </table>  
            </aside>  
        </section>  
        <section id="contact">  
            <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>  
    <hr>  
    <div style="clear: both;"></div>
</main>  
    <footer>  
        版权所有 &copy; 栗子七
    </footer>  
</body>  
复制

 大家可以运行感受一下

3、 多行多列布局

                多行多列布局是一种网页布局方式，可以将内容分为多个列进行展示，在水平方向上进行排列。‌ 这种布局方式允许内容在不同的列中展示，使得页面看起来更加丰富和有层次感。多行多列布局在各大电商网站和素材网站中非常常见

实例：

 

eg： 

运行代码：

<head>
    <style>
        .container{
            width: 50%;
            background-color: #97d3eb;
            border: 1px black solid;
        }
        .container ul{
            margin: 0;
            padding: 0;
        }
        .container ul li{
            list-style: none;
 
            width: 20%;
            height: 150px;
            background-color: pink;
            border: 2px palevioletred solid;
            margin-right: 2%;
            margin-bottom: 2%;
            float: left;
        }
    </style>
</head>
<body>
    <section class="container">
        <ul class="clear_ele">  
            <li></li>
            <li></li>
            <li></li>
            <li></li>
 
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
 <div style="clear: both;"></div>
    </section>
</body>
复制

几列布局都相似的，大家可以动手试试多加几列的效果

4、百分比布局

（1）概念 

        上面的网页各个板块都是精准地定位，会让编写者十分头疼具体位置到底是多少，需一个个尝试才能达到我们想要的效果，为了使这种问题解决，我们可以使用百分比布局

                在网页设计中，百分比布局是一种非常灵活的布局方式。它可以让网页元素根据浏览器窗口的大小自动调整尺寸，从而适应不同的屏幕尺寸和设备 

（2）优势 

  • 响应式设计

                        百分比布局能够使网页在不同尺寸的屏幕上都能良好地显示，无需为每个设备单独设计布局。

  •  灵活性

                可以轻松地调整元素的大小和位置，以适应不同的布局需求。

  • 易于维护

                当需要修改网页布局时，只需要调整百分比值，而不需要修改每个元素的固定尺寸。

 （3）语法格式

<style>

        section{

                width: 100%;

                        }

</style>

 学会这个内容加上之前学习的内容，大家可以做出自己喜欢的网页了！

转载请注明出处或者链接地址：https://www.qianduange.cn//article/24235.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【Linux笔记】基础IO(上)

2025-03-27 13:03:40

Windows11离线安装wsl2(适用于 Linux 的 Windows 子系统)和Ubuntu

2025-03-27 13:03:39

Linux 服务器运维常用命令大全

2025-03-27 13:03:38

深入了解 Ubuntu 中的 build-essential：开发者的必备工具

2025-03-27 13:03:36

RagFlow Docker Desktop Ollama DeepSeek-R1本地部署自己的本地AI大模型工具

2025-03-27 13:03:35

Linux 学习必杀技：从菜鸟到高手的蜕变密码

2025-03-27 13:03:35

Trae AI 全新功能 SSHremote助力开发者个人产品打造，高效构建全栈应用

2025-03-27 13:03:34

Python Selenium全栈指南：从自动化入门到企业级实战

2025-03-27 13:03:33

Spring Cloud之负载均衡之LoadBalance

2025-03-27 13:03:33

【一篇搞定配置】一篇带你从配置到使用（PyCharm远程）完成服务器运行项目（配置、使用一条龙）【全网最详细版】

2025-03-27 13:03:33

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
浏览器升级提示：您的浏览器版本较低，建议您立即升级为知了极速浏览器，极速、安全、简约，上网速度更快！立即下载
复制成功！