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

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

相关文章

DCRNN解读（论文+代码）

DCRNN解读（论文+代码）

一、引言 作者首先提出&#xff1a;空间结构是非欧几里得且有方向性的&#xff0c;未来的交通速度受下游交通影响大于上游交通。虽然卷积神经网络&#xff08;CNN&#xff09;在部分研究中用于建模空间相关性&#xff0c;但其主要适用于欧几里得空间&#xff08;例如二维图像&a…
阅读更多...
StandardThreadExecutor源码解读与使用(tomcat的线程池实现类)

StandardThreadExecutor源码解读与使用(tomcat的线程池实现类)

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java源码解读-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 目录 1.前言 2.线程池基础知识回顾 2.1.线程池的组成 2.2.工作流程 2…
阅读更多...
Unreal5从入门到精通之如何解决在VR项目在头显中卡顿的问题

Unreal5从入门到精通之如何解决在VR项目在头显中卡顿的问题

前言 以前我们使用Unity开发VR，Unity提供了非常便利的插件和工具来做VR。但是由于Unity的渲染效果不如Unreal，现在我们改用Unreal来做VR了，所有的VR相关的配置和操作都要重新学习。 今天就来总结一下，我在开发VR过程中碰到的所有问题。 1.编辑器，以VR运行 默认运行方式…
阅读更多...
centos7 kafka高可用集群安装及测试

centos7 kafka高可用集群安装及测试

前言 用三台虚拟机centos7 搭建高可用集群&#xff0c;及测试方法 高可用搭建的方法&#xff0c;参考&#xff1a;https://blog.csdn.net/u011197085/article/details/134070318 高可用搭建 1、安装配置zookeeper集群 下载zookeeper 注&#xff1a;zookeeper链接如果失效&a…
阅读更多...
Redis（2）：内存模型

Redis（2）：内存模型

一、Redis内存统计 工欲善其事必先利其器&#xff0c;在说明Redis内存之前首先说明如何统计Redis使用内存的情况。 在客户端通过redis-cli连接服务器后&#xff08;后面如无特殊说明&#xff0c;客户端一律使用redis-cli&#xff09;&#xff0c;通过info命令可以查看内存使用情…
阅读更多...
C++笔试题之实现一个定时器

C++笔试题之实现一个定时器

一.定时器&#xff08;timer&#xff09;的需求 1.执行定时任务的时&#xff0c;主线程不阻塞&#xff0c;所以timer必须至少持有一个线程用于执行定时任务 2.考虑到timer线程资源的合理利用&#xff0c;一个timer需要能够管理多个定时任务&#xff0c;所以timer要支持增删任务…
阅读更多...
0.STM32F1移植到F0的各种经验总结

0.STM32F1移植到F0的各种经验总结

1.结构体的声明需放在函数的最前面 源代码&#xff1a; /*开启时钟*/RCC_APB2PeriphClockCmd(RCC_APB2Periph_USART1, ENABLE); //开启USART1的时钟RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE); //开启GPIOA的时钟/*GPIO初始化*/GPIO_InitTypeDef GPIO_InitStructu…
阅读更多...
在Microsoft Outlook日历中添加多个时区

在Microsoft Outlook日历中添加多个时区

在Microsoft Outlook日历中添加多个时区 1.单击Outlook中的文件选项卡&#xff0c;单击选项 2.左侧菜单中选择日历 3.向下滚动到时区部分&#xff0c;并标记当前时区&#xff0c;比如China 4.选中“显示第二个时区”框 5.选择第二个时区并给它一个标签&#xff0c;比如Germa…
阅读更多...
为啥学习数据结构和算法

为啥学习数据结构和算法

基础知识就像是一座大楼的地基&#xff0c;它决定了我们的技术高度。而要想快速做出点事情&#xff0c;前提条件一定是基础能力过硬&#xff0c;“内功”要到位。 想要通关大厂面试&#xff0c;千万别让数据结构和算法拖了后腿 我们学任何知识都是为了“用”的&#xff0c;是为…
阅读更多...
爬虫学习4

爬虫学习4

from threading import Thread#创建任务 def func(name):for i in range(100):print(name,i)if __name__ __main__:#创建线程t1 Thread(targetfunc,args("1"))t2 Thread(targetfunc, args("2"))t1.start()t2.start()print("我是诛仙剑")from …
阅读更多...
【Maven】——基础入门，插件安装、配置和简单使用，Maven如何设置国内源

【Maven】——基础入门，插件安装、配置和简单使用，Maven如何设置国内源

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 引入&#xff1a; 一&#xff1a;Maven插件的安装 1&#xff1a;环境准备 2&#xff1a;创建项目 二…
阅读更多...
Vue中使用echarts生成地图步骤详解

Vue中使用echarts生成地图步骤详解

1.创建容器元素 <div class"map" id"map" style"width:1000px;height:1000px;"></div> 2.Vue项目引入world.js(我这里的演示是世界地图&#xff0c;不同地图对应js文件不一样) world.js文件包含&#xff1a; 地理坐标数据&#xff…
阅读更多...
docker安装低版本的jenkins-2.346.3,在线安装对应版本插件失败的解决方法

docker安装低版本的jenkins-2.346.3,在线安装对应版本插件失败的解决方法

提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、网上最多的默认解决方法1、jenkins界面配置清华源2、替换default.json文件 二、解决低版本Jenkins在线安装插件问题1.手动下载插件并导入2.低版本jenkins在…
阅读更多...
算法专题：栈

算法专题：栈

目录 1. 删除字符串中的所有相邻重复项 1.1 算法原理 1.2 算法代码 2. 844. 比较含退格的字符串 2.1 算法原理 2.2 算法原理 3. 基本计算器 II 3.1 算法原理 3.2 算法代码 4. 字符串解码 4.1 算法原理 4.2 算法代码 5. 验证栈序列 5.1 算法原理 5.2 算法代码 1.…
阅读更多...
ZDH权限-扩展支持数据权限

ZDH权限-扩展支持数据权限

目录 项目源码 预览地址 安装包下载地址 ZDH权限模块 ZDH权限扩展更细粒度方案 第一种方案&#xff1a; 第二种方案&#xff1a; ZDH权限扩展支持数据权限-新增属性 总结 感谢支持 项目源码 zdh_web: GitHub - zhaoyachao/zdh_web: 大数据采集,抽取平台 预览地址 后…
阅读更多...
交换机的基本配置

交换机的基本配置

交换机的基本配置 实验题目实验目的实验任务实验设备实验环境实验步骤VLAN 的简单配置跨交换机 vlan 的配置主机配置信息表解释&#xff1a; vlan 间路由 实验题目 交换机的基本配置。 实验目的 1) 理解交换机的原理和应用场景&#xff1b; 2) 交换机的基本指令系统&#xf…
阅读更多...
借助 Aspose.Words，使用 C# 从 Word 文档中删除页面

借助 Aspose.Words，使用 C# 从 Word 文档中删除页面

如果您正在寻找一种快速删除 Word 文档中不相关、过时或空白页的方法&#xff0c;那么您来对地方了。在这篇博文中&#xff0c;我们将学习如何使用 C# 从 Word 文档中删除页面。我们将逐步引导您完成该过程&#xff0c;提供清晰的示例&#xff0c;以帮助您以编程方式高效地从 W…
阅读更多...
华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用（属性、显示、专场）动画

华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用（属性、显示、专场）动画

2024年11月5日 LiuJinTao 文章目录 鸿蒙中动画的使用一、属性动画 - animation属性动画代码示例 二、显示动画 - AnimateTo三、专场动画 鸿蒙中动画的使用 一、属性动画 - animation 属性动画代码示例 /*** 属性动画的演示*/ Entry Component struct Index {State selfWidth:…
阅读更多...
基于STM32的手式电视机遥控器设计

基于STM32的手式电视机遥控器设计

引言 本项目基于STM32微控制器设计了一个手式电视机遥控器系统&#xff0c;通过集成加速度传感器和陀螺仪&#xff0c;实现手势识别和遥控功能。该遥控器系统可以通过简单的手势操作实现对电视机的音量调节、频道切换和开关机控制等功能。项目涉及到硬件设计、手势识别算法和红…
阅读更多...
基于SpringBoot+微信小程序+协同过滤算法+二维码订单位置跟踪的农产品销售平台-新

基于SpringBoot+微信小程序+协同过滤算法+二维码订单位置跟踪的农产品销售平台-新

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; “农产品商城”小程序…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023