【CSS】常见 CSS 布局

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.rhkb.cn/news/169213.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【JVM系列】- 探索·运行时数据区的私有结构

【JVM系列】- 探索·运行时数据区的私有结构

探索运行时数据区的私有结构 文章目录 探索运行时数据区的私有结构运行时数据区的结构与概念认识线程了解守护线程和普通线程JVM系统线程 程序计数器&#xff08;PC寄存器&#xff09;概述PC寄存器的特点PC寄存器的作用 透过案例了解寄存器为什么需要用PC寄存器来存放字节码的指…
阅读更多...
随机森林算法（Random Forest）的二分类问题

随机森林算法（Random Forest）的二分类问题

二分类问题 1. 数据导入2. RF模型构建2.1 调参&#xff1a;mtry和ntree2.2 运行模型 3. 模型测试4.绘制混淆矩阵5.绘制ROC曲线6. 参考 1. 数据导入 library(dplyr) #数据处理使用 library(data.table) #数据读取使用 library(randomForest) #RF模型使用 library(caret) # 调参…
阅读更多...
河南工业大学人工智能与大数据学院学子在第三届“火焰杯”软件测试开发选拔赛中 取得佳绩

河南工业大学人工智能与大数据学院学子在第三届“火焰杯”软件测试开发选拔赛中 取得佳绩

近日&#xff0c;第三届“火焰杯”软件测试开发选拔赛落下帷幕&#xff0c;我校人工智能与大数据学院选派的多名参赛选手在王雪涛老师的指导下&#xff0c;经过激烈的角逐&#xff0c;取得优异成绩。其中&#xff0c;何鸿彬&#xff0c;贾文聪获得决赛二等奖&#xff0c;王静宇…
阅读更多...
【前段基础入门之】=＞CSS3新增渐变颜色属性

【前段基础入门之】=＞CSS3新增渐变颜色属性

导语&#xff1a; CSS3 新增了&#xff0c;渐变色 的解决方案&#xff0c;这使得我们可以绘制出更加生动的炫酷的的配色效果 线性渐变 多个颜色之间的渐变&#xff0c; 默认从上到下渐变 background-image: linear-gradient(red,yellow,green); /*默认从上到下渐变*/默认从上…
阅读更多...
常用Web安全扫描工具汇整

常用Web安全扫描工具汇整

漏洞扫描是一种安全检测行为&#xff0c;更是一类重要的网络安全技术&#xff0c;它能够有效提高网络的安全性&#xff0c;而且漏洞扫描属于主动的防范措施&#xff0c;可以很好地避免黑客攻击行为&#xff0c;做到防患于未然。 1、AWVS Acunetix Web Vulnerability Scanner&a…
阅读更多...
javaEE -5（8000字详解多线程）

javaEE -5（8000字详解多线程）

一&#xff1a;JUC(java.util.concurrent) 的常见类 1.1 ReentrantLock 可重入互斥锁. 和 synchronized 定位类似, 都是用来实现互斥效果, 保证线程安全&#xff0c;ReentrantLock 也是可重入锁. “Reentrant” 这个单词的原意就是 “可重入” ReentrantLock 的用法&#xf…
阅读更多...
Java实现连接SQL Server解决方案及代码

Java实现连接SQL Server解决方案及代码

下面展示了连接SQL Server数据库的整个流程&#xff1a; 加载数据库驱动建立数据库连接执行SQL语句处理结果关闭连接 在连接之前&#xff0c;前提是确保数据库成功的下载&#xff0c;创建&#xff0c;配置好账号密码。 运行成功的代码&#xff1a; import java.sql.*;publi…
阅读更多...
【1024一起敲代码！】C#mysql/Sqlserver图书借阅管理系统期末设计源代码

【1024一起敲代码！】C#mysql/Sqlserver图书借阅管理系统期末设计源代码

本系统自带7800字报告,有两个版本&#xff0c;Mysql版本、Sqlserver版本&#xff0c; 介绍 架构设计主要体现在代码层的架构和窗体层调用的架构。 在窗体中&#xff0c;由Program.cs为入口&#xff0c;启动后直接调用LoginForm.cs进入登陆界面&#xff0c;登陆成功后进入主菜…
阅读更多...
docker-compose安装ES7.14和Kibana7.14(有账号密码)

docker-compose安装ES7.14和Kibana7.14(有账号密码)

一、docker-compose安装ES7.14.0和kibana7.14.0 1、下载镜像 1.1、ES镜像 docker pull elasticsearch:7.14.0 1.2、kibana镜像 docker pull kibana:7.14.0 2、docker-compose安装ES和kibana 2.1、创建配置文件目录和文件 #创建目录 mkdir -p /home/es-kibana/config mkdir…
阅读更多...
【JAVA学习笔记】40 - 抽象类、模版设计模式（抽象类的使用）

【JAVA学习笔记】40 - 抽象类、模版设计模式（抽象类的使用）

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter10/src/com/yinhai/abstract_ 一、抽象类的引入 很多时候在创建类的时候有一个父类&#xff0c;比如animal类&#xff0c;他的子类会有各种方法&#xff0c;为了复用需要进行方法的重写&…
阅读更多...
UML(Unified Modeling Language)统一建模语言,及工具介绍、使用

UML(Unified Modeling Language)统一建模语言,及工具介绍、使用

1. UML介绍&#xff1a; UML&#xff08;Unified Modeling Language&#xff09;统一建模语言。是一种图形化语言。 在UML 2.5 中共包含14种图形&#xff1a;类图、用例图、活动图、对象图、时序图、交互概述图、包图、配置文件图、部署图、组件图、组合结构图、状态机图、通…
阅读更多...
Day07 Stream流递归Map集合Collections可变参数

Day07 Stream流递归Map集合Collections可变参数

Stream 也叫Stream流&#xff0c;是Jdk8开始新增的一套API (java.util.stream.*)&#xff0c;可以用于操作集合或者数组的数据。 Stream流大量的结合了Lambda的语法风格来编程&#xff0c;提供了一种更加强大&#xff0c;更加简单的方式操作 public class Demo1 {public stati…
阅读更多...
真空室的内表面加工

真空室的内表面加工

真空室和部件的内表面是在高真空和超高真空下实现工作压力的重要因素。必须在该条件下进行加工&#xff0c;以最小化有效表面&#xff0c;并产生具有最小解吸率的表面。 真空室和部件的表面往往是在焊接和机械加工后经过精细玻璃珠喷砂的。具有限定直径的高压玻璃珠被吹到表面…
阅读更多...
跟着NatureMetabolism学作图：R语言ggplot2转录组差异表达火山图

跟着NatureMetabolism学作图：R语言ggplot2转录组差异表达火山图

论文 Independent phenotypic plasticity axes define distinct obesity sub-types https://www.nature.com/articles/s42255-022-00629-2#Sec15 s42255-022-00629-2.pdf 论文中没有公开代码&#xff0c;但是所有作图数据都公开了&#xff0c;我们可以试着用论文中提供的数据…
阅读更多...
一百九十二、Flume——Flume数据流监控工具Ganglia单机版安装

一百九十二、Flume——Flume数据流监控工具Ganglia单机版安装

一、目的 在安装好Flume之后&#xff0c;需要用一个工具可以对Flume数据传输进行实时监控&#xff0c;这就是Ganglia 二、Ganglia介绍 Ganglia 由 gmond、gmetad 和 gweb 三部分组成。 &#xff08;一&#xff09;第一部分——gmond gmond&#xff08;Ganglia Monitoring Da…
阅读更多...
群晖synology DSM 7.2设置钉钉Webhooks通知

群晖synology DSM 7.2设置钉钉Webhooks通知

现在越来越多的小伙伴都有了自己的Nas系统&#xff0c;为了更加方便的接收Nas的消息&#xff0c;这篇文章带着大家一起配置一个钉钉&#xff08;机器人&#xff09;即时消息通知 首先登录钉钉的开放平台&#xff1a;开发者后台统一登录 - 钉钉统一身份认证 1.创建一个机器人&…
阅读更多...
MYSQL(索引+SQL优化)

MYSQL(索引+SQL优化)

索引: 索引是帮助MYSQL高效获取数据的排好序的数据结构 1)假设现在进行查询数据&#xff0c;select * from user where userID89 2)没有索引是一行一行从MYSQL进行查询的&#xff0c;还有就是数据的记录都是存储在MYSQL磁盘上面的&#xff0c;比如说插入数据的时候是向磁盘上面…
阅读更多...
十三水中各种牌型判断LUA版

十三水中各种牌型判断LUA版

近期回归程序行业&#xff0c;由于业务需求需要做十三水游戏&#xff0c;什么是十三水就不在多讲&#xff0c;下面是判断十三水牌型的方法&#xff08;带大小王&#xff09; GetSSSPaiType {}; local this GetSSSPaiType; local huaseTable {}; local numTable {}; functi…
阅读更多...
逐字稿 | 视频理解论文串讲（下）【论文精读】

逐字稿 | 视频理解论文串讲（下）【论文精读】

1 为什么研究者这么想把这个双流网络替换掉&#xff0c;想用3D 卷积神经网络来做&#xff1f; 大家好&#xff0c;上次我们讲完了上半部分&#xff0c;就是 2D 网络和一些双流网络以及。它们的。变体。今天我们就来讲一下下半部分&#xff0c;就是 3D 网络和 video Transformer…
阅读更多...
Java 控制台 进度条

Java 控制台 进度条

Java 控制台 进度条 progress-bar简介效果图使用介绍 progress-bar 简介 gitee链接: https://gitee.com/sincere-jxx/progress-bar main分支 进度条颜色可变&#xff0c;绿色&#xff08;默认&#xff09;&#xff0c;红色&#xff0c;黄色&#xff0c;蓝色等 长度50&#x…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023