【CSS】常见 CSS 布局

news/2024/12/21 22:17:55/

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"><divid="box1"class="box">盒子 1</div><divid="box2"class="box">盒子 2</div><divid="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"><metaname="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"><metaname="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.ppmy.cn/news/1170206.html

相关文章

Android快速滑动条/快速滑块/快速滚动条标准实现，Java

Android快速滑动条/快速滑块/快速滚动条标准实现，Java

Android水平和垂直方向的快速滑动条/快速滑块/快滑滚动条/快滑滚动块标准实现&#xff0c;Java /** Copyright 2018 The Android Open Source Project** Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in com…
阅读更多...
Go学习第四章——程序流程控制

Go学习第四章——程序流程控制

Go学习第四章——程序流程控制 1 分支结构1.1 单分支1.2 双分支1.3 多分支1.4 switch分支 2 循环结构2.1 for循环2.2 while和dowhile的实现2.3 经典案例——打印金字塔2.4 经典案例——打印九九乘法表 3 跳转控制语句3.1 break3.2 continue3.3 goto3.4 return 流程控制的作用&a…
阅读更多...
《数据结构与算法之美》读书笔记1

《数据结构与算法之美》读书笔记1

Java的学习 方法参数多态&#xff08;向上和向下转型&#xff09; 向上转型&#xff1a; class Text{public static void main(String[] args) {Animals people1 new NiuMa();people1.eat1();//调用继承后公共部分的方法&#xff0c;没重写调用没重写的&#xff0c;重写了调…
阅读更多...
Go学习第三章——运算符与进制

Go学习第三章——运算符与进制

Go学习第三章——运算符与进制 1 算术运算符2 关系运算符3 逻辑运算符4 赋值运算符5 其他运算符5.1 位运算符5.2 跟指针有关的运算符 6 运算符的优先级7 获取用户终端输入8 进制转换8.1 进制基本使用8.2 进制之间的转换8.3 原码 反码 补码8.4 位运算符详解 运算符是—种特殊的符…
阅读更多...
LabVIEW中PID控制的的高级功能

LabVIEW中PID控制的的高级功能

LabVIEW中PID控制的的高级功能 比例-积分-微分&#xff08;PID&#xff09;控制占当今控制和自动化应用的90%以上&#xff0c;主要是因为它是一种有效且简单的解决方案。虽然PID算法最初用于线性、时不变系统&#xff0c;但现在已经发展到控制具有复杂动力学的系统。在现实世界…
阅读更多...
springBoot--web--路径匹配

springBoot--web--路径匹配

路径匹配 前言在配置文件中配置路径匹配结果 前言 spring5.3之后加入了更多的请求路径匹配的实现策略 以前只支持antPathMatcher策略&#xff0c;现在提供了PathPatternParse策略&#xff0c;并且可以让我们指定到底使用哪种策略 PathPatternParser: 在jmh基准测试下&#xff…
阅读更多...
人工智能、机器学习、深度学习的区别

人工智能、机器学习、深度学习的区别

人工智能涵盖范围最广&#xff0c;它包含了机器学习&#xff1b;而机器学习是人工智能的重要研究内容&#xff0c;它又包含了深度学习。 人工智能&#xff08;AI&#xff09; 人工智能是一门以计算机科学为基础&#xff0c;融合了数学、神经学、心理学、控制学等多个科目的交…
阅读更多...
【计算机毕设选题推荐】口腔助手小程序SpringBoot+Vue+小程序

【计算机毕设选题推荐】口腔助手小程序SpringBoot+Vue+小程序

前言&#xff1a;我是IT源码社&#xff0c;从事计算机开发行业数年&#xff0c;专注Java领域&#xff0c;专业提供程序设计开发、源码分享、技术指导讲解、定制和毕业设计服务 项目名 基于SpringBoot的口腔助手小程序 技术栈 SpringBootVue小程序MySQLMaven 文章目录 一、口腔…
阅读更多...
最新文章

Copyright @ 2022~2023