百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

CSS网页布局基础教程

myzbx 2024-12-01 18:23 25 浏览

网页布局基础教程

网页的布局有很多种方式，一般分为以下几个部分：

  • 头部区域部分
  • 菜单导航区域部分
  • 内容区域部分
  • 底部区域部分

网页头部区域部分

头部区域部分位于整个网页的顶部，一般用于设置网页的标题或者网页的图标：

实例如下：





部分代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS网页布局教程</title>
    <style>
        body {
            margin: 0;
        }

        /* 头部样式 */
        .header {
            background-color:darkslategrey;
            padding: 25px;
            text-align: center;
        }
        h1
        {
            color: aliceblue;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>头部区域部分</h1>
</div>

</body>
</html>

菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：




实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 网页布局 </title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        /* 头部样式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /* 导航条 */
        .topnav {
            overflow: hidden;
            background-color:midnightblue;
        }

        /* 导航链接 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 链接 - 修改颜色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>

<div class="header">
    <h1>头部区域</h1>
</div>

<div class="topnav">
    <a href="#">导航链接</a>
    <a href="#">导航链接</a>
    <a href="#">导航链接</a>
</div>

</body>
</html>

内容区域

内容区域一般形式（根据屏幕分辨率和舒适的视觉体验）:

  • 1 例：用于移动端
  • 2 例：用于平板设备
  • 3 例：用于 PC 桌面设备


创建一个响应式布局PC和以设备有不一样的布局，如下：





实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 网页布局(runoob.com)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        /* 头部样式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /* 导航条 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 导航链接 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 链接 - 修改颜色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 创建三个不相等的列 */
        .column {
            float: left;
            padding: 10px;
        }

        /* 左右两侧宽度 */
        .column.side {
            width: 25%;
        }

        /* 中间区域宽度 */
        .column.middle {
            width: 50%;
        }

        /* 列后面清除浮动 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 响应式布局 - 宽度小于600px时设置上下布局 */
        @media screen and (max-width: 600px) {
            .column.side, .column.middle {
                width: 100%;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <h1>头部区域</h1>
    <p>重置浏览器大小查看效果。</p>
</div>

<div class="topnav">
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
</div>

<div class="row">
    <div class="column side">
        <h2>左侧栏</h2>
        <p>网页布局教程 - 网页布局教程</p>
    </div>

    <div class="column middle">
        <h2>主区域内容</h2>
        <p>网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程</p>
        <p>网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程网页布局教程 - 网页布局教程</p>
    </div>

    <div class="column side">
        <h2>右侧栏</h2>
        <p>网页布局教程 - 网页布局教程</p>
    </div>
</div>

</body>
</html>

底部区域部门

底部区域部分在网页的最下方，一般包含版权信息，爬虫信息和联系方式等。




实例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 网页布局 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        /* 头部样式 */
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /* 导航条 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 导航链接 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 链接 - 修改颜色 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 创建三个相等的列 */
        .column {
            float: left;
            padding: 10px;
        }

        /* 左右两侧宽度 */
        .column.side {
            width: 25%;
        }

        /* 中间区域宽度 */
        .column.middle {
            width: 50%;
        }

        /* 列后面清除浮动 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 响应式布局 - 宽度小于600px时设置上下布局 */
        @media screen and (max-width: 600px) {
            .column.side, .column.middle {
                width: 100%;
            }
        }

        /* 底部样式 */
        .footer {
            background-color:black;
            padding: 10px;
            text-align: center;
        }
        p
        {
        color:white;
        }
    </style>
</head>
<body>

<div class="header">
    <h1>头部区域</h1>
    <p>重置浏览器大小查看效果。</p>
</div>

<div class="topnav">
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
</div>

<div class="row">
    <div class="column side">
        <h2>左侧栏</h2>
        <p>菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>

    <div class="column middle">
        <h2>主区域内容</h2>
        <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
        <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>

    <div class="column side">
        <h2>右侧栏</h2>
        <p>菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>
</div>

<div class="footer">
    <p>底部区域</p>
</div>

</body>
</html>

下次详细讲解另一种响应式网页的实现，感谢点赞助力！


相关推荐

vue 基础-组件中事件的触发和监听

前言《vue基础》系列是再次回炉vue记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）vue中单纯的事件调用，你一定不陌生...

JMH基准测试和JMH-Visual-chart可视化

原文地址：https://github.com/Sayi/sayi.github.com/issues/68如何度量一段代码的性能，换种实现方式会有更佳的性能表现吗？你或许想知道fastjson是否正...

一文轻松看懂丰田汽车的电路图（丰田车电路图识读技巧）

丰田汽车电路图符号、含义丰田汽车电路图识读说明电路图中字母是注释标号，其各部分的含义如下：注释标号A：表示系统标题，在电路图上方用横线划分，区域内用文字和系统符号表示下方电路系统的名称。注释标号B：表...

杭州高级中学发文言文版校庆公告引热议——全文932字，74处注释

阅读提示校方回应：我们期待以这种‘复古’的方式引起公众注意，也算是为树立起大众的文化自信、唤起大众对传统文化的关注作出一点贡献。5月14日，杭州高级中学官方微信发布了一篇文言文版的校庆公告。几个小...

Python 和 JS 有什么相似?（python和js哪个快）

Python是一门运用很广泛的语言，自动化脚本、爬虫，甚至在深度学习领域也都有Python的身影。作为一名前端开发者，也了解ES6中的很多特性借鉴自Python(比如默认参数、解构赋值、...

阿里卖家 Flutter for Web 工程实践

作者：马坤乐(坤吾)Flutter自2015年初次亮相以来，经过了多年的发展已经相当成熟，在阿里、美团、拼多多等互联网公司都有广泛的应用。在ICBU阿里卖家上90+%的新业务使用Flu...

诗经275思文押韵、注释、古音、今韵

诗经275-1思文押韵（备注：□=非韵、■=i韵、●=o/u韵、◆=ng韵、=i/o二象性）「」1.思文后稷，克配彼天。立我烝民，莫菲尔极。贻我来牟，帝命率育。无此疆尔界，陈常于时夏。□□□■，...

SolidWorks中常用命令快捷键（solidworks有哪些快捷键）

1.A：中心线2.B：镜向3.C：画圆4.D：智能标柱尺寸5.E：删除6.F：草图倒圆角7.G：画直线8.H：从装配制作工程9.I：等距实体10.J：从装配制作装配11.K：多边形12.L：延伸13....

第一章、TS语言简介（tsl语言）

TypeScript（简称TS）是微软公司开发的一种基于JavaScript（简称JS）语言的编程语言。它的目的并不是创造一种全新语言，而是增强JavaScript的功能，使其更适合多人合...

为什么要用JMH?何时应该用?（日本jmh地面分析图网站）

if快还是switch快？HashMap的初始化size要不要指定，指定之后性能可以提高多少？各种序列化方法哪个耗时更短？无论出自何种原因需要进行性能评估，量化指标总是必要的。在大部分场合...

雅虎“YSlow - 23 条规则”详尽阐释

以下乃是雅虎“YSlow-23条规则”的详尽阐释，旨在优化网页之性能以及用户之体验，乃是结合技术之原理与实践之方法梳理而成：1.减少HTTP请求次数说明：每一次HTTP请求皆会增添延迟...

JavaScript 运算符（js ~运算符）

JavaScript运算符JS变量JS算数JavaScript运算符实例向变量赋值，并把它们相加：varx=7;//向x赋值5vary=8;//向y赋值2...

在Notebook中使用Sublime Text 快捷键

编程派微信号：codingpy前几天，我在公众号上发布了两篇译文，对JupyterNotebook做了一些基础性的介绍。虽然说比较基础，而且第二篇阅读量并不高，但是我认为对于其他对于Noteb...

晨光静好时!2 道 JS 与 TS 面试题解析，开启惬意学习日

当第一缕晨光温柔地唤醒窗台的绿植，泡上一杯清香四溢的茉莉花茶，坐在洒满阳光的角落。此刻，放下对面试的焦虑，让我们像聊生活趣事般，轻松拆解两道JavaScript和TypeScript的高频面试...

2024年CSPJ题目解析，语法基本功&gt;算法!

前言：每次有家长来找我们咨询报课，说孩子学了一年了，竞赛成绩不理想，问怎么才能强化，提升，我们经过一番询问，发现这类孩子普遍都是在算法上已经花了非常多的时间了，但是语法根本不过关。对这种孩子我们普遍建...

一周热门
最近发表
标签列表