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

 

目录

一、两列布局 

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样式的使用可以让代码更加简洁和结构化，使站点的访问和维护更加容易。

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

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

相关文章

发现了NitroShare的一个bug

发现了NitroShare的一个bug

NitroShare 是一个跨平台的局域网开源网络文件传输应用程序&#xff0c;它利用广播发现机制在本地网络中找到其他安装了 NitroShare 的设备&#xff0c;从而实现这些设备之间的文件和文件夹发送。 NitroShare 支持 Windows、macOS 和 Linux 操作系统。 NitroShare允许我们为…
阅读更多...
新世联科技：NG2-A-7在DAC空气捕集提取CO2的应用

新世联科技：NG2-A-7在DAC空气捕集提取CO2的应用

一、DAC空气捕集提取CO2的介绍 直接空气碳捕获&#xff08;Direct Air Capture&#xff0c;简称DAC&#xff09;是一种直接从大气中提取二氧化碳的技术。 二、DAC空气捕集提取CO2的前景 从大气中提取的这种二氧化碳可以作为循环经济的一部分以各种不同方式使用。未来&#xf…
阅读更多...
ABAP开发学习——OLE常用方法和属性

ABAP开发学习——OLE常用方法和属性

ABAP开发学习——OLE-CSDN博客 OLE常用方法和属性
阅读更多...
如何学习Java“高并发”，并在项目中实际应用？

如何学习Java“高并发”，并在项目中实际应用？

高并发编程 提到并发编程很多人就会头疼了&#xff1b;首先就是一些基础概念&#xff1a;并发&#xff0c;并行&#xff0c;同步&#xff0c;异步&#xff0c;临界区&#xff0c;阻塞&#xff0c;非阻塞还有各种锁全都砸你脸上&#xff0c;随之而来的就是要保证程序运行时关键…
阅读更多...
Echarts使用柱状图实现横向数据展示，实现为每个柱子设置不同的颜色

Echarts使用柱状图实现横向数据展示，实现为每个柱子设置不同的颜色

这里使用echarts柱状图实现横向数据展示&#xff0c;同时给每个柱子设置不同的颜色&#xff0c;给柱子设置背景颜色等 话不多说直接上图吧 这里直接贴上代码&#xff1a; option {backgroundColor: "#1C162E", //背景颜色tooltip: {show: false},legend: {show: …
阅读更多...
JavaScript重定向对网络爬虫的影响及处理

JavaScript重定向对网络爬虫的影响及处理

在网络爬虫的开发和应用中&#xff0c;JavaScript重定向是一个不可忽视的技术挑战。它不仅增加了爬取数据的复杂性&#xff0c;还可能影响爬虫的效率和准确性。本文将探讨JavaScript重定向对网络爬虫的影响&#xff0c;并提供处理这些重定向的高级技巧。 理解JavaScript重定向…
阅读更多...
动态与静态网站抓取的区别：从抓取策略到性能优化

动态与静态网站抓取的区别：从抓取策略到性能优化

引言 随着互联网数据的迅速增长&#xff0c;网页抓取技术在数据采集和信息获取中扮演着越来越重要的角色。不同类型的网站在实现方式和数据获取策略上存在显著差异。特别是动态网站和静态网站&#xff0c;由于页面生成方式不同&#xff0c;采用的爬虫技术也有所不同。本文将详…
阅读更多...
架构师：构建高效团队和解决技术问题的指南

架构师：构建高效团队和解决技术问题的指南

1、简述 在技术管理领域，管理者不仅要深入理解技术，还要关注团队成员的成长、有效的项目推进以及高效的决策和问题解决能力。技术管理者在技术与管理的平衡中，需要能够清晰理解技术背景，制定合理的策略，促进团队合作，迅速应对问题。 本文将探讨作为技术管理者的常见挑战…
阅读更多...
浅谈vuex和pinia的区别

浅谈vuex和pinia的区别

文章目录 介绍核心概念用法区别导入stategettersMutationsActions 工作原理优缺点 本篇文章主要展示vuex和pinia的区别&#xff0c;详情使用请看博主其他文章或者官方文档 vuex官网&#xff1a;https://vuex.vuejs.org/zh/guide/ pinia官网&#xff1a;https://pinia.vuejs.org…
阅读更多...
python的json库的基本应用

python的json库的基本应用

总目录 一、json库的介绍 Python 的 json 库是一个非常常用的库&#xff0c;用于处理 JSON 数据。以下是 json 库的基本功能&#xff1a; 编码&#xff08;将 Python 对象转换为 JSON 字符串&#xff09; 解码&#xff08;将 JSON 字符串转换为 Python 对象&#xff09; 读写文…
阅读更多...
R language 关于二维平面直角坐标系的制作

R language 关于二维平面直角坐标系的制作

昨天说参与了机器学习的学习&#xff0c;今天又来讲讲这一天的学习&#xff0c;主要是做简单的数据分析和展示、 首先&#xff0c;基于系能源汽车的流行&#xff0c;做了一组图&#xff0c;如下&#xff1a; DATASET&#xff1a; 1.比亚迪海鸥&#xff0c;磷酸铁锂&#xff0c;…
阅读更多...
密码学简要介绍

密码学简要介绍

密码学是研究编制密码和破译密码的技术科学&#xff0c;它研究密码变化的客观规律&#xff0c;主要包括编码学和破译学两大部分。 一、定义与起源 定义&#xff1a;密码学是研究如何隐密地传递信息的学科&#xff0c;在现代特别指对信息以及其传输的数学性研究&#xff0c;常被…
阅读更多...
JVM原理和垃圾回收装置

JVM原理和垃圾回收装置

JVM组成 1. 类加载器&#xff0c;用来把字节码文件加载进入到runtime区域 2. 执行引擎: 用来执行.class中的指令 包含即时编译器和垃圾回收装置 3. 运行时区域就是jvm内存 先由编译器把.java文件&#xff0c;编译成.class文件 此时底层os仍然看不懂&#xff0c;所以需要把…
阅读更多...
解决go run main.go executable file not found in %PATH%

解决go run main.go executable file not found in %PATH%

项目场景&#xff1a; 命令行执行go run 都会报 executable file not found in %PATH% 问题描述 最近我发现&#xff0c;我通过命令行&#xff0c;无论是跑什么go文件&#xff0c;都会出现这个错误。但是我通过我的IDE就能跑&#xff0c;于是我也没有管它。 但是最近&#x…
阅读更多...
go中Println和Printf的区别

go中Println和Printf的区别

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 go中Println和Printf的区别 package mainimport ( "fmt" )//TIP To run your code, right-click the c…
阅读更多...
矩阵NFC碰一碰发视频源码开发技术解析，支持OEM

矩阵NFC碰一碰发视频源码开发技术解析，支持OEM

一、引言 在当今数字化营销的热潮中&#xff0c;矩阵爆店码成为了助力商家引流推广的重要工具。开发矩阵爆店码的源码涉及到多种技术的综合运用&#xff0c;本文将深入探讨其开发过程中的关键技术要点。 二、技术选型 &#xff08;一&#xff09;后端开发技术 编程语言 选择一…
阅读更多...
零基础嵌入式工程师成长路线以及如何学习嵌入式操作系统？

零基础嵌入式工程师成长路线以及如何学习嵌入式操作系统？

以下是一条零基础嵌入式工程师的成长路线&#xff1a; **一、入门阶段&#xff08;3 - 6个月&#xff09;** 1. **学习基础知识** - **编程语言**&#xff1a; C语言是嵌入式开发的基础。学习C语言的基本语法&#xff0c;包括数据类型&#xff08;如整型、字符型、浮点型&am…
阅读更多...
数据结构之二叉树前序，中序，后序习题分析（递归图）

数据结构之二叉树前序，中序，后序习题分析（递归图）

1.比较相同的树 二叉树不能轻易用断言&#xff0c;因为树一定有空 2.找结点值 3.单值二叉树 4.对称二叉树 5.前序遍历
阅读更多...
C++设计模式结构型模式———组合模式

C++设计模式结构型模式———组合模式

文章目录 一、引言二、组合模式三、总结 一、引言 组合模式是一种结构型设计模式&#xff0c; 可以使用它将对象组合成树状结构&#xff0c; 并且能像使用独立对象一样使用它们。代码实现中涉及了递归调用。组合模式与传统上的“类与类之间的组合关系”没有关联&#xff0c;不…
阅读更多...
电子商城购物平台的设计与开发+ssm(lw+演示+源码+运行）

电子商城购物平台的设计与开发+ssm(lw+演示+源码+运行）

摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;电子商城购物平台小程序被用户普遍使用&#xff0c;为方便…
阅读更多...
最新文章

Copyright @ 2022~2023