【CSS】常见 CSS 布局

news2024/12/18 20:53:28

1. 响应式布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的响应式布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

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

        /* 导航样式 */
        nav {
            background-color: #f2f2f2;
            padding: 10px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 10px;
        }

        nav ul li a:hover {
            background-color: #ccc;
        }

        nav ul li a {
            color: #333;
            text-decoration: none;
            padding: 5px;
        }

        /* 主要内容样式 */
        main {
            padding: 20px;
        }

        section {
            margin-bottom: 20px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>响应式布局示例</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>欢迎来到我们的网站！</h2>
            <p>这是一个简单的响应式布局示例。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script>
    </script>
</body>

</html>

在这里插入图片描述

2. 块级布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的块级布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

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

        /* 主要内容样式 */
        main {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        section {
            flex-basis: 48%;
            background-color: #f2f2f2;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .left-section {
            /* order 规定 section 出现的先后顺序 */
            order: 1;
        }

        .right-section {
            order: 2;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>块级布局示例</h1>
    </header>
    <main>
        <section class="left-section">
            <h2>左侧区域</h2>
            <p>这是左侧区域的内容。</p>
        </section>
        <section class="right-section">
            <h2>右侧区域</h2>
            <p>这是右侧区域的内容。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

3. 流式布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的流式布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

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

        /* 内容区域样式 */
        #content {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }

        .box {
            flex-basis: 300px;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        <h1>流式布局示例</h1>
    </header>
    <div id="content">
        <div class="box">
            <h2>盒子 1</h2>
            <p>这是盒子 1 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 2</h2>
            <p>这是盒子 2 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 3</h2>
            <p>这是盒子 3 的内容。</p>
        </div>
        <div class="box">
            <h2>盒子 4</h2>
            <p>这是盒子 4 的内容。</p>
        </div>
    </div>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

4. 定位布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的定位布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: #f2f2f2;
        }

        /* 盒子样式 */
        .box {
            position: absolute;
            padding: 20px;
            background-color: #333;
            color: #fff;
        }

        #box1 {
            top: 20px;
            left: 20px;
        }

        #box2 {
            bottom: 20px;
            right: 20px;
        }

        #box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div id="container">
        <div
            id="box1"
            class="box"
        >盒子 1</div>
        <div
            id="box2"
            class="box"
        >盒子 2</div>
        <div
            id="box3"
            class="box"
        >盒子 3</div>
    </div>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

5. 多列布局

<!DOCTYPE html>
<html>

<head>
    <title>简单的多列布局</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        /* 列样式 */
        .column {
            flex-basis: 30%;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="column">
            <h2>列 1</h2>
            <p>这是列 1 的内容。</p>
        </div>
        <div class="column">
            <h2>列 2</h2>
            <p>这是列 2 的内容。</p>
        </div>
        <div class="column">
            <h2>列 3</h2>
            <p>这是列 3 的内容。</p>
        </div>
    </div>
    <script src="main.js"></script>
</body>

</html>

在这里插入图片描述

6. 网格布局

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1700px;
            height: 500px;
            border: 10px solid gray;
            margin: 100px auto;
            display: grid;
            /* 13 列，每列列宽为 100px */
            grid-template-columns: repeat(13, 100px);
            /* 4 行，每行高度为 100px */
            grid-template-rows: repeat(4, 100px);
            /* 单元格间距 垂直 水平 */
            grid-gap: 10px 10px;
            /* 整体网格居中 */
            place-content: center center;
        }

        .box>div {
            background: pink;
        }

        .box1 {
            /* 横向网格线起始位置 */
            grid-row: 1/3;
            /* 纵向网格线起始位置 */
            grid-column: 12/14;
        }

        .box2 {
            grid-row: 1/2;
            grid-column: 10/12;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
        <div>31</div>
        <div>32</div>
        <div>33</div>
        <div>34</div>
        <div>35</div>
        <div>36</div>
        <div>37</div>
        <div>38</div>
        <div>39</div>
        <div>40</div>
        <div>41</div>
        <div>42</div>
        <div>43</div>
        <div>44</div>
        <div>45</div>
        <div>46</div>
        <div>47</div>
        <div>48</div>
        <!-- <div>49</div> -->
        <!-- <div>50</div>
        <div>51</div>
        <div>52</div> -->
    </div>
</body>

</html>

在这里插入图片描述

7. 浮动布局

<!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>
        .nav {
            width: 100%;
            overflow: hidden;
        }

        .nav li {
            float: left;
            margin-right: 15px;
        }

        .nav li a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1121933.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C语言练习题】添加逗号

【C语言练习题】添加逗号

✨博客主页&#xff1a;小钱编程成长记 &#x1f388;博客专栏&#xff1a;C语言练习题 添加逗号 1. 题目2.讲解3.代码总结 1. 题目 牛客网在线OJ 2.讲解 因为数字位数可能不全是3的倍数&#xff0c;比如&#xff1a;23&#xff0c;445&#xff0c;555。所以我们从后向前进行&…
阅读更多...
“我有一个大胆的想法”？Meta AI 新技术让你的思维图像一览无余！

“我有一个大胆的想法”？Meta AI 新技术让你的思维图像一览无余！

夕小瑶科技说 原创 作者 | 付奶茶 大家之前是否想象过未来的技术进步会带来读脑器&#xff0c;计算界面是否有可能越过触摸屏、键盘进入我们思维内部读取我们脑袋中所想。尽管当前我们社会尚未达到这一阶段&#xff0c;但我们确实逐渐接近这一愿景&#xff01; 不久前&#x…
阅读更多...
DDR电源硬件设计要点

DDR电源硬件设计要点

一、DDR电源简介 1. 电源 DDR的电源可以分为三类： a、主电源VDD和VDDQ，主电源的要求是VDDQ=VDD，VDDQ是给IO buffer供电的电源，VDD是给但是一般的使用中都是把VDDQ和VDD合成一个电源使用。 有的芯片还有VDDL，是给DLL供电的，也和VDD使用同一电源即可。电源设计时，需要考…
阅读更多...
【PyTorch】深度学习实践 02 线性模型

【PyTorch】深度学习实践 02 线性模型

深度学习的准备过程 准备数据集选择模型模型训练进行推理预测 问题 对某种产品花费 x 个工时&#xff0c;即可得到 y 收益&#xff0c;现有 x 和 y 的对应表格如下&#xff1a; x &#xff08;hours&#xff09; y&#xff08;points&#xff09;12243648 求花费4个工时可得…
阅读更多...
回归预测 | MATLAB实现基于BP-Adaboost的BP神经网络结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于BP-Adaboost的BP神经网络结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于BP-Adaboost的BP神经网络结合AdaBoost多输入单输出回归预测 目录 回归预测 | MATLAB实现基于BP-Adaboost的BP神经网络结合AdaBoost多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于BP-Adaboost的BP…
阅读更多...
C# 程序运行无法加载 C++ DLL“xxx.dll”: 找不到指定的模块 Exception from HRESULT: 0x8007007E

C# 程序运行无法加载 C++ DLL“xxx.dll”: 找不到指定的模块 Exception from HRESULT: 0x8007007E

背景:由于公司需要集成期货公司的提供的DLL&#xff0c;在本地开发调试时运行正常&#xff0c;放到web服务器后运行提示找不到指定模块错误代码Exception from HRESULT: 0x8007007E 原因&#xff1a;可能是由于服务器的C:\Windows\SysWOW64系统文件夹下的模块有缺失。 排查 下载…
阅读更多...
剑指Offer || 054.把二叉搜索树转换为累加树

剑指Offer || 054.把二叉搜索树转换为累加树

题目 给定一个二叉搜索树&#xff0c;请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值之和。 提醒一下&#xff0c;二叉搜索树满足下列约束条件&#xff1a; 节点的左子树仅包含键 小于 节点键的节点。节点的右子树仅包含键 大于 节点键的节点。左右子树也…
阅读更多...
【FISCO-BCOS】十八、使用docker部署区块链

【FISCO-BCOS】十八、使用docker部署区块链

目录 前言&#xff1a; docker&#xff1a; 一、安装docker docker部署区块链&#xff1a; 一、 搭建单群组4节点区块链 二、启动区块链 三、检查容器 四. 查看节点 前言&#xff1a; 关于FISCOBCOS部署区块链的方式&#xff0c;我们已经学习过了很多种&#xff0c;如多群组部…
阅读更多...
Java代理

Java代理

一、代理模式 代理模式定义&#xff1a;为其他对象提供一种代理以控制对这个对象的访问。 上面类图中有一个订单接口类(OrderService)、一个订单实现类(OrderServiceImpl)&#xff0c;订单模块的业务相对复杂和重要&#xff0c;如果这时候要在方法执行前后加上日志&#xff0c…
阅读更多...
三种字符串格式化方法（%、format、f-string）

三种字符串格式化方法（%、format、f-string）

一、使用 % name 第一帅 print(我是宇宙无敌天下%s % name) age 18 print(我是宇宙无敌天下%s&#xff0c;我今年%d岁%(name,age)) price 5.99print(白心火龙果单价是%.1f元一斤%price)二、使用 format 在字符串中&#xff0c;使用{ }进行占位&#xff0c;然后在字符串后…
阅读更多...
关于编程生成的目标文件到底是怎么链接生成可执行文件的

关于编程生成的目标文件到底是怎么链接生成可执行文件的

以c/c程序为例&#xff0c;要想生成可执行文件&#xff0c;需要经过如下步骤&#xff1a; #mermaid-svg-u1JzuqIf7rGHTIIk {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-u1JzuqIf7rGHTIIk .error-icon{fill:#55222…
阅读更多...
SLAM从入门到精通（rviz自定义形状）

SLAM从入门到精通（rviz自定义形状）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 rviz作为很好的上位机调试工具&#xff0c;它本身可以显示很多的传感器数据。比如说lidar、map、tf、camera、点云这些&#xff0c;在rviz上面显示…
阅读更多...
Stable Diffusion新玩法火了！给几个词就能生成动图，连动图人物的表情和动作都能随意控制

Stable Diffusion新玩法火了！给几个词就能生成动图，连动图人物的表情和动作都能随意控制

夕小瑶科技说 原创 作者 | 小戏 单说大模型 AI 的发展对人们想象力释放的助力&#xff0c;基于 Stable Diffusion 模型的方法首当其冲。透过文本描述到图像生成技术&#xff0c;大模型为我们的想象力打开了一个恢弘的梦幻世界。透过点滴文字&#xff0c;就有可能重现禁锢在我们…
阅读更多...
【Java 进阶篇】深入浅出：Bootstrap 轮播图

【Java 进阶篇】深入浅出：Bootstrap 轮播图

在现代网页设计中&#xff0c;轮播图是一个常见的元素。它们可以用于展示图片、广告、新闻、产品或任何您希望吸引用户注意力的内容。要实现一个轮播图&#xff0c;您通常需要一些复杂的HTML、CSS和JavaScript代码&#xff0c;这对于初学者来说可能会感到困难。但幸运的是&…
阅读更多...
HWUI源码剖析（二） - 终于讲清楚OpenGL渲染的MVP矩阵的来龙去脉

HWUI源码剖析（二） - 终于讲清楚OpenGL渲染的MVP矩阵的来龙去脉

概述 研究android8.1 HWUI源码的过程中，发现OpenGL是绕不过的一个知识点，不理解OpenGL的绘制基础，必然无法很好的理解Hwui基本原理，同时熟悉OpenGL之后，HWUI也是一个非常优秀的OpenGL 2D渲染的代码，本文将介绍一下OpenGL绘制图形的重要原理，为学习HWUI源码扫清障碍，本…
阅读更多...
04、Python 爬取免费小说思路

04、Python 爬取免费小说思路

目录 Python 爬取免费小说思路代码解析爬取东西基本的四行代码：user-agent安装模块从 bs4 导入 BeautifulSoup ，查询某个标签开头的数据筛选遍历获取小说的章节名称每章小说的链接获取请求网址的响应获取小说的内容筛选内容整理内容爬取下载到指定文件夹完整代码：Python 爬取…
阅读更多...
HTML+CSS+JS+Django 实现前后端分离的科学计算器、利率计算器(附全部代码在gitcode链接)

HTML+CSS+JS+Django 实现前后端分离的科学计算器、利率计算器(附全部代码在gitcode链接)

&#x1f9ee;前后端分离计算器 &#x1f4da;git仓库链接和代码规范链接&#x1f4bc;PSP表格&#x1f387;成品展示&#x1f3c6;&#x1f3c6;科学计算器&#xff1a;1. 默认界面与页面切换2. 四则运算、取余、括号3. 清零Clear 回退Back4. 错误提示 Error5. 读取历史记录Hi…
阅读更多...
2023年【化工自动化控制仪表】最新解析及化工自动化控制仪表作业考试题库

2023年【化工自动化控制仪表】最新解析及化工自动化控制仪表作业考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 化工自动化控制仪表最新解析参考答案及化工自动化控制仪表考试试题解析是安全生产模拟考试一点通题库老师及化工自动化控制仪表操作证已考过的学员汇总&#xff0c;相对有效帮助化工自动化控制仪表作业考试题库学员顺…
阅读更多...
Linux进程（四）--进程地址空间（一）

Linux进程（四）--进程地址空间（一）

前言&#xff1a;在Linux中&#xff0c;每个正在运行的进程都有自己独立的虚拟地址空间&#xff0c;该虚拟地址空间是逻辑上的抽象&#xff0c;用于在进程间提供隔离和保护。它将进程的内存分配和访问从物理内存中分离出来&#xff0c;为每个进程提供了一个独立的地址空间。这究…
阅读更多...
【试题036】赋值运算符小例题2

【试题036】赋值运算符小例题2

1.题目&#xff1a;设int a0&#xff0c;b0&#xff0c;m0&#xff0c;n0;,执行(mab)/(nab)后m和n的值分别&#xff1f; 2.代码分析&#xff1a; int main() {//设int a0&#xff0c;b0&#xff0c;m0&#xff0c;n0;,执行(mab)/(nab)后m和n的值分别int a 0,b 0,m 0,n 0,…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023