当前位置： 首页 > news >正文

CSS中常见的两列布局、三列布局、百分比和多行多列布局！

news 2025/7/9 15:34:17

 

目录

一、两列布局 

1、前言：

2. 两列布局的常见用法

 两列布局的元素示例：

代码运行后如下：

二、三列布局

1.前言

2. 三列布局的常见用法

三列布局的元素示例：

代码运行后如下：

三、多行多列

1.前言

2，多行多列布局的常见用法

 多行多列布局的元素示例：

四、百分比布局

代码运行后如下： 

五、综合练习

代码运行后如下：

# 实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、<Flexbox>和<Grid>布局。#

一、两列布局 

1、前言：

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

 

2. 两列布局的常见用法

  •  两列布局的元素示例：

<!DOCTYPE html>  
<html lang="zh">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>典型的网页结构示例:带横向导航栏</title>  <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:1200px;top:450px;}main{width: 1604px;}aside{           width: 35%;height: 450PX;background-color: green;float: right;}article{/* width:100% */width: 65%;height: 450px;background-color: gray;float: left;}footer{width: 1600px;height: 50px;background-color:blue;/* float: left; */border: 2px black solid;}</style>
</head>  <body>  <header>  <h1 align="center">广东云浮中医药职业学院</h1>  <p align="center">欢迎来到: <ins>计算机学院</ins></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="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  <p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  </article>  <aside>  <h3>侧边栏</h3>  <p>侧边栏内容，如快速链接、广告等。</p>  <table border="1">  <tr>  <th>专业</th>  <th>链接</th>  </tr>  <tr>  <td>计算机应用技术</td>  <td><a href="专业A详情页.html">专业A详情</a></td>  </tr>  <tr>  <td>数字媒体技术</td>  <td><a href="专业B详情页.html">专业B详情</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>  <div style="clear: both;"></div></main>  <footer>  <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  </footer>  </body>  </html>
  • 代码运行后如下：

 

 

二、三列布局

1.前言

  • 三列布局由3个独立的而成，仅比两列布局多了一项内容，最终是基于两列布局结构演变出来。
  • 页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。
  •  container又包含mainBox（主要内容区域）、SubsideBox（次要内容区）、sideBox区域（侧边栏）

2. 三列布局的常见用法

  • 三列布局的元素示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>section{width: 1600px;height: 1000px;}#div1{width: 15%;height: 800px;background-color: rgb(224, 169, 41);float: left;}#div2{width: 23%;height: 800px;background-color: rgb(26, 114, 237);float: right;}#div3{width: 60%;height: 800px;background-color:rgb(186, 239, 71);margin-left: 16%;margin-right: 15%;float: none;}</style>
</head>
<body><section><div id="div1">盒子1</div><div id="div2">盒子2</div><div id="div3">盒子3</div></section> </body>
</html>
代码运行后如下：

三、多行多列

1.前言

  • 多行多列常见于页面主要内容区域使用，将页面内容分成多行和多列的方式排列。
  • 常用于<float>元素设置，float：left 、 float：right,使元素向左移，向右移。

2，多行多列布局的常见用法

  •  多行多列布局的元素示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>section{width: 90%;height: 50%;border: 4px black solid;background-color: gray;position: absolute;}div{width: 15%;height: 100px;background-color: aqua;border: 5px solid #000;margin-bottom: 5px;float: left;margin-right: 2%;margin-top: 2%;}</style>
</head>
<body><section class="class_ele"> <div id="div1">盒子1</div><div id="div2">盒子2</div><div id="div3">盒子3</div><div id="div4">盒子4</div><div id="div5">盒子5</div><div id="div1">盒子6</div><div id="div2">盒子7</div><div id="div3">盒子8</div><div id="div4">盒子9</div><div id="div5">盒子10</div></section> <!-- <footer>网页页脚</footer> --></body>
</html>

代码运行后如下：

四、百分比布局

  • 在自适应网页设计中常见百分比布局，同个页面可以根据屏幕大小，自动调整内容布局。
  • 百分比用法：例如 width：100% 、height : 100
<!DOCTYPE html>  
<html lang="zh">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>网页布局综合练习</title>  <style>      #div1{background-image: url(./top.jpg);background-size: 100%;height: 150PX;}#img1{position: relative;top: 20px;left: 100px;}#b{position: relative;left: 350px;bottom: 50%;}#img2{position: relative;left: 200px ;bottom: 20px;}</style></head>  <body>  <header>  <section class="container1"><div id="div1"><img  id= "img1" src="./logo.png" alt="" width="650PX" height="150PX"><b id="b">计算机学院</b> <img id="img2" src="./logo2.png" alt=""></div></section></header>  <nav> </nav><main><section></section></main>   <footer></footer>
</body>  </html>
代码运行后如下： 

五、综合练习

1、综合练习案例分析

  • 综合练习包含了三列布局，多行多列布局的结合。
<!DOCTYPE html>  
<html lang="zh">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>网页布局综合练习</title>  <style>      #div1{background-image: url(./top.jpg);background-size: 100%;height: 150PX;}#img1{position: relative;top: 20px;left: 100px;}#b{position: relative;left: 350px;bottom: 50%;}#img2{position: relative;left: 200px ;bottom: 20px;}#div2{position: relative;}nav ul{height:30px;background-color:rgb(21, 67, 21);} nav ul li{margin-right: 20px;float:left;}.clear_ele a:link{color: rgb(189, 232, 232);}.clear_ele a:visited{color: azure;}#aside-left{float: left;width: 20%;height: 850px;background-color: rgb(30, 163, 30);}   #aside-right{float: right;width: 20%;height: 850px;background-color:rgb(30, 163, 30) ;} article{width: 60%;height: 850Px;background-color: gray;float: left;}.clear_ele img{list-style: none;width: 20%;height: 200px;border: 2px solid red;margin-right: 2%;margin-bottom: 2%;}.container3{width: 220px;height: 160px;background-color: pink;border: 2px black solid;position: fixed;right:235px;bottom: 10%;}  footer{width: 100%;height: 50px;background-color:rgb(78, 209, 78);float: left;}</style></head>  <body>  <header>  <section class="container1"><div id="div1"><img  id= "img1" src="./logo.png" alt="" width="650PX" height="150PX"><b id="b">计算机学院</b> <img id="img2" src="./logo2.png" alt=""></div></section></header>  <nav>  <ul class="clear_ele">  <li><a href="https://gdyfvccm.edu.cn/">学校首页</a></li>  <li><a href="#">学院概况</a></li>  <li><a href="#">机构设置</a></li>  <li><a href="#">院系专业</a></li>  <li><a href="#">教学科研</a></li>  <li><a href="#">信息公开</a></li>  <li><a href="#">招生就业</a></li></ul>  </nav> <main>  <section class="container2 clear_ele">  <aside id="aside-left">  学院新闻</aside><aside id="aside-right">  友情链接</aside> <article>文章  <ul class="clear_ele">  <br><br><br><br><br><br><br><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""></ul></article> </section>  <section class="container3">  <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>  <footer>  <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  </footer>  </body>  </html>
代码运行后如下：

总结:CSS样式的使用可以让代码更加简洁和结构化，使站点的访问和维护更加容易。

相关文章：

CSS中常见的两列布局、三列布局、百分比和多行多列布局！

目录 一、两列布局 1、前言&#xff1a; 2. 两列布局的常见用法 两列布局的元素示例&#xff1a; 代码运行后如下&#xff1a; 二、三列布局 1.前言 2. 三列布局的常见用法 三列布局的元素示例&#xff1a; 代码运行后如下&#xff1a; 三、多行多列 1.前言 2&…...

编程日记 2024/11/6 5:27:56

GaussDB Ustore存储引擎解读

目录 一、数据库存储引擎 二、GaussDB Ustore存储引擎 总结 本文将介绍GaussDB中的Ustore存储引擎&#xff0c;包括Ustore的设计背景、特点介绍和适用业务场景等。 一、数据库存储引擎 数据库的存储引擎负责在内存和磁盘上存储、检索和管理数据&#xff0c;确保每个节点的…...

编程日记 2024/11/6 5:26:56

JAVA基础：数组 （习题笔记）

一&#xff0c;编码题 1&#xff0c;数组查找操作&#xff1a;定义一个长度为10 的一维字符串数组&#xff0c;在每一个元素存放一个单词&#xff1b;然后运行时从命令行输入一个单词&#xff0c;程序判断数组是否包含有这个单词&#xff0c;包含这个单词就打印出“Yes”&…...

编程日记 2024/11/6 5:23:52

VMWARE ESXI VMFS阵列故障 服务器数据恢复

1&#xff1a;河南用户一台DELL R740 3块2.4T硬盘组的RAID5&#xff0c;早期坏了一个盘没有及时更换&#xff0c;这次又坏了一个&#xff0c;导致整组RAID5处于数据丢失的状态&#xff0c; 2&#xff1a;该服务器装的是VMware ESXI 6.7&#xff0c;用户把3块硬盘寄过来进行数据…...

编程日记 2024/11/6 5:21:50

实时金融股票数据API接口websocket接入方法

一、使用websocket的协议提升传输速度 实时金融股票数据对于投资者和交易员来说至关重要。通过使用WebSocket接入方法&#xff0c;可以轻松获取实时金融股票类数据并及时做出决策。WebSocket是一种高效的双向通信协议&#xff0c;它允许数据的实时推送&#xff0c;避免了不断的…...

编程日记 2024/11/6 5:20:49

机器学习与成像技术

机器学习与成像技术 在科技日新月异的今天&#xff0c;机器学习与成像技术的结合正引领着智能视觉领域进入一个全新的发展阶段。这一结合不仅推动了图像识别、目标检测、视频分析等领域的快速发展&#xff0c;还深刻影响着医疗、安防、自动驾驶等多个行业。本文将从机器学习与…...

编程日记 2024/11/6 5:19:48

【系统架构设计师】预测试卷一：综合知识（75道选择题）

更多内容请见： 备考系统架构设计师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5~6题】【第7题】【第8~10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17~18题】【第19~20题】【第21~22题】【第23~24题】【第25~26题】【第2…...

编程日记 2024/11/6 5:18:48

【addRepository 在tomcat 8和tomcat 9的支持情况】

项目中涉及将远程下载的 jar包进行解密后加载到 tomcat 容器中。 File jarFile new File(fileUrl); String jarFileUrl jarFile.toURI().toURL().toString(); WebappClassLoader webLoader (WebappClassLoader) classLoader; webLoader.addRepository(jarFileUrl);在升级到 …...

编程日记 2024/11/6 5:17:46

2024网鼎杯web1+re2 wp

这两道题属于比较简单的&#xff0c;顺道说一下&#xff0c;今年的题有点抽象&#xff0c;web不是misc&#xff0c;re不是web的&#xff0c;也有可能时代在进步&#xff0c;现在要求全栈✌了吧 web1 最开始被强网的小浣熊带偏思路了&#xff0c;进来疯狂找sql注入&#xff0c…...

编程日记 2024/11/6 5:16:45

Python 自动化运维：安全与合规最佳实践

Python 自动化运维&#xff1a;安全与合规最佳实践 目录 &#x1f512; Python安全编程实践与最佳实践&#x1f511; 使用Hashlib与Cryptography进行数据加密&#x1f4ca; 安全审计与合规检查的重要性&#x1f50d; 处理敏感数据与隐私保护的方法 1. &#x1f512; Python安…...

编程日记 2024/11/6 5:15:44

I2S、PDM、PCM、TDM、DSM、DCODEC、VAD、SPDIF

I2S (Inter-IC Sound) 用途: 一种用于芯片之间传输音频数据的串行总线标准。特点: 常用于高质量音频设备，如DAC、ADC和音频编解码器。I2S主要传输PCM格式的音频数据。PDM (Pulse Density Modulation) 用途: 主要用于数字麦克风等设备，以简化硬件接口。特点: 使用脉冲密度来编…...

编程日记 2024/11/6 5:14:43

关于我的编程语言——C/C++——第四篇（深入1）

&#xff08;叠甲&#xff1a;如有侵权请联系&#xff0c;内容都是自己学习的总结&#xff0c;一定不全面&#xff0c;仅当互相交流&#xff08;轻点骂&#xff09;我也只是站在巨人肩膀上的一个小卡拉米&#xff0c;已老实&#xff0c;求放过&#xff09; 字符类型介绍 char…...

编程日记 2024/11/6 5:13:42

2025年上半年软考高级科目有哪些？附选科指南

新手在准备报考软考时&#xff0c;都会遇到这样的一个问题——科目这么多&#xff0c;我适合考什么&#xff1f;2025上半年软考高级有哪些科目可以报考&#xff1f;要想知道自己适合报什么科目&#xff0c;就需要了解每个科目是什么&#xff0c;考什么等一系列的问题&#xff0…...

编程日记 2024/11/6 5:12:41

线上查企业该用哪家平台？

在销售领域&#xff0c;经常会遇到电话接通率低的问题。这可能是因为许多电话号码来源于某些商业信息平台&#xff0c;这些号码可能已经被代账公司使用&#xff0c;或者已经被同行业多次联系过&#xff0c;导致接通率不高。为了解决这一问题&#xff0c;可以采用数据过滤服务&a…...

编程日记 2024/11/6 5:10:39

Metrix：实现CI服务器上的DORA指标自动化计算

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;Metrix项目是一个Go语言编写的工具&#xff0c;旨在自动化计算DevOps效能的关键指标——DORA指标&#xff0c;这些指标包括部署频率、前置时间、平均恢复时间和变更失败率。它通过集成到CI服务器如Jenkins或GitH…...

编程日记 2024/11/6 5:09:38

【STL_list 模拟】——打造属于自己的高效链表容器

一、list节点 ​ list是一个双向循环带头的链表&#xff0c;所以链表节点结构如下&#xff1a; template<class T>struct ListNode{T val;ListNode* next;ListNode* prve;ListNode(int x){val x;next prve this;}};二、list迭代器 2.1、list迭代器与vector迭代器区别…...

编程日记 2024/11/6 5:08:36

Java 基础教学：高级特性与实战-集合框架

Java 集合框架提供了一套性能优良、使用方便的接口和类&#xff0c;用于存储和操作群组数据。最常用的集合接口有 List、Set 和 Map。 List List 接口可以存储一系列有序的元素&#xff0c;并且可以包含重复的元素。List 的实现类常用的有 ArrayList 和 LinkedList。 ArrayL…...

编程日记 2024/11/6 5:07:35

单片机原理及应用笔记：C51数组与项目实践

作者介绍 刘滋瑞&#xff0c;男&#xff0c;银川科技学院计算机与人工智能学院&#xff0c;2022级计算机与科学技术8班本科生&#xff0c;单片机原理及应用课程第九组。 指导老师&#xff1a;王兴泽 电子邮箱&#xff1a;602054774qq.com 前言 本篇文章是参考《单片机原理…...

编程日记 2024/11/6 5:06:34

综合项目--博客

一。基础配置&#xff1a; 1.配置主机名&#xff0c;静态IP地址 2.开启防火墙配置 3.部分开启selinux并且配置 4.服务器之间使用同ntp.aliyun.com进行世家能同步 5.服务器之间实现SSH绵密登陆 二。业务需求 1.Sever-NFS-DNS主机配置NFS服务器&#xff0c;将博客网站资源…...

编程日记 2024/11/6 5:05:33

ARM64的Mac Node.js前置工作，nvm在线安装

1&#xff0c;通过 终端 ping raw.githubusercontent.com 获取到ip地址185.199.110.133 2&#xff0c;终端输入sudo vi /etc/hosts&#xff0c;打开hosts文件 3&#xff0c;在最后添加 185.199.110.133 raw.githubusercontent.com 保存后退出 3.1&#xff0c;清除环境 完全…...

编程日记 2024/11/6 5:04:32

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/7/9 5:39:41

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/7/8 12:26:58

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/7/8 22:35:04

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/7/9 8:51:18

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2025/7/8 1:21:29

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/7/9 14:26:01

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2025/7/8 2:45:54

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/7/6 19:40:32

CTF show 数学不及格

拿到题目先查一下壳&#xff0c;看一下信息 发现是一个ELF文件&#xff0c;64位的 ​ 用IDA Pro 64 打开这个文件 ​ 然后点击F5进行伪代码转换 可以看到有五个if判断&#xff0c;第一个argc ! 5这个判断并没有起太大作用&#xff0c;主要是下面四个if判断 ​ 根据题目…...

编程新知 2025/7/9 4:36:57