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.mzph.cn/web/58205.shtml

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

相关文章

Vue3版本的uniapp项目运行至鸿蒙系统

Vue3版本的uniapp项目运行至鸿蒙系统

新建Vue3版本的uniapp项目 注意&#xff0c;先将HbuilderX升级至最新版本&#xff0c;这样才支持鸿蒙系统的调试与运行&#xff1b; 按照如下图片点击&#xff0c;快速升级皆可。 通过HbuilderX创建 官方文档指导链接 点击HbuilderX中左上角文件->新建->项目 创建vue3…
阅读更多...
Nature文章《deep learning》文章翻译

Nature文章《deep learning》文章翻译

这篇文章是对Nature上《deep learning》文章的翻译。原作者 Yann LeCun, Yoshua Bengio& Geoffrey Hinton。 这篇文章的中心思想是深入探讨深度学习在机器学习中的革命性贡献&#xff0c;重点介绍其在特征学习、监督学习、无监督学习等方面的突破&#xff0c;并阐述其在图…
阅读更多...
AnaTraf | 全流量回溯分析：网络故障排除的 “时光回溯机”

AnaTraf | 全流量回溯分析：网络故障排除的 “时光回溯机”

AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具AnaTraf网络流量分析仪是一款基于全流量&#xff0c;能够实时监控网络流量和历史流量回溯分析的网络性能监控与诊断系统&#xff08;NPMD&#xff09;。通过对网络各个关键节点的监测&#xff0c;收集网络性能…
阅读更多...
Zabbix低权限SQL注入至RCE+权限绕过

Zabbix低权限SQL注入至RCE+权限绕过

Zabbix低权限SQL注入至RCE权限绕过&#xff0c;可惜没找到关于传webshell的好方法&#xff0c;如有大神告知&#xff0c;感激万分&#xff01; 本文中所有代码以及后续更新都会放在我的github仓库中&#xff1a; https://github.com/W01fh4cker/CVE-2024-22120-RCE 一、漏洞环…
阅读更多...
[vulnhub]DC: 1

[vulnhub]DC: 1

https://www.vulnhub.com/entry/dc-1,292/ 主机发现端口扫描 使用nmap扫描网段类存活主机 因为靶机是我最后添加的&#xff0c;所以靶机IP是156 nmap -sP 192.168.75.0/24 // Starting Nmap 7.93 ( https://nmap.org ) at 2024-09-28 12:48 CST Nmap scan rep…
阅读更多...
jmeter脚本-请求体设置变量and请求体太长的处理

jmeter脚本-请求体设置变量and请求体太长的处理

目录 1、查询接口 1.1 准备组织列表的TXT文件&#xff0c;如下&#xff1a; 1.2 添加 CSV数据文件设置 &#xff0c;如下&#xff1a; 1.3 接口请求体设置变量&#xff0c;如下&#xff1a; 2、创建接口 2.1 见1.1 2.2 见1.2 2.3 准备创建接口的请求体TXT文件&#xff…
阅读更多...
SQL，力扣题目1549，每件商品的最新订单【窗口函数】

SQL，力扣题目1549，每件商品的最新订单【窗口函数】

一、力扣链接 LeetCode_1549 二、题目描述 表: Customers ------------------------ | Column Name | Type | ------------------------ | customer_id | int | | name | varchar | ------------------------ customer_id 是该表主键. 该表包含消费者的…
阅读更多...
卸载 Adobe Genuine Software Client

卸载 Adobe Genuine Software Client

一、问题描述 使用破jie版Adobe Acrobat Pro DC软件后&#xff0c;会经常弹出以下窗口&#xff1a; 且上述探窗无法直接关掉。即使通过任务管理器将其临时关掉&#xff0c;可等过一段时间后&#xff0c;仍然会再次弹出&#xff0c;严重干扰工作进度。 二、问题解决 &#xff…
阅读更多...
京东云雅典娜刷机步骤（需要拆机）

京东云雅典娜刷机步骤（需要拆机）

京东云雅典娜刷机步骤 必须拆机 必须拆机 必须拆机 刷机要用的文件 1.高通驱动文件&#xff08;USB刷机必备&#xff09;&#xff1a;https://pan.quark.cn/s/6405674f981b 2.进入临时uboot的程序&#xff1a;https://pan.quark.cn/s/ebc1d449cb89 3.uboot固件&#xff1a; ht…
阅读更多...
电子商城购物平台的设计与开发+ssm(lw+演示+源码+运行）

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

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

基于 Spring Boot 和 Vue 的门票销售创新系统

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…
阅读更多...
【Python】Python自习课：第一个python程序

【Python】Python自习课：第一个python程序

【Python】Python自习课&#xff1a;第一个python程序 示例
阅读更多...
docker-compose安装rabbitmq 并开启延迟队列和管理面板插件（rabbitmq_delayed_message_exchange）

docker-compose安装rabbitmq 并开启延迟队列和管理面板插件（rabbitmq_delayed_message_exchange）

问题&#xff1a; 解决rabbitmq-plugins enable rabbitmq_delayed_message_exchange &#xff1a;plugins_not_found 我是在docker-compose环境部署的 services:rabbitmq:image: rabbitmq:4.0-managementrestart: alwayscontainer_name: rabbitmqports:- 5672:5672- 15672:156…
阅读更多...
103 - Lecture 2 Table and Data Part 1

103 - Lecture 2 Table and Data Part 1

SQL - Tables and Data Part 1 Relational Database Management System(RDBMS) 关系型数据库管理系统&#xff08;RDBMS&#xff09;是基于关系模型的数据库系统&#xff0c;它支持多种关系操作。关系模型是一种数据存储和检索的模型&#xff0c;它使用表格来组织数据&#x…
阅读更多...
PropTypes 和 TypeScript 在 React 中的比较

PropTypes 和 TypeScript 在 React 中的比较

文章目录 引言PropTypes什么是 PropTypes&#xff1f;如何使用 PropTypes优点缺点 TypeScript什么是 TypeScript&#xff1f;如何使用 TypeScript优点缺点 选择建议总结 引言 在 React 开发中&#xff0c;组件的可复用性和可维护性至关重要。为了确保组件接收到正确的 props&a…
阅读更多...
【自动化利器】12个评估大语言模型（LLM）质量的自动化框架

【自动化利器】12个评估大语言模型（LLM）质量的自动化框架

LLM评估是指在人工智能系统中评估和改进语言和语言模型的过程。在人工智能领域&#xff0c;特别是在自然语言处理&#xff08;NLP&#xff09;及相关领域&#xff0c;LLM评估具有至高无上的地位。通过评估语言生成和理解模型&#xff0c;LLM评估有助于细化人工智能驱动的语言相…
阅读更多...
儿童安全座椅行业全面深入分析

儿童安全座椅行业全面深入分析

儿童安全座椅就是一种专为不同体重&#xff08;或年龄段&#xff09;的儿童设计&#xff0c;将孩子束缚在安全座椅内&#xff0c;能有效提高儿童乘车安全的座椅。欧洲强制性执行标准ECE R44/03的定义是&#xff1a;能够固定到机动车辆上&#xff0c;带有ISOFIX接口、LATCH接口的…
阅读更多...
Pytest-Bdd-Playwright 系列教程（6）：在测试步骤函数中设置别名数据共享

Pytest-Bdd-Playwright 系列教程（6）：在测试步骤函数中设置别名数据共享

Pytest-Bdd-Playwright 系列教程&#xff08;6&#xff09;&#xff1a;在测试步骤函数中设置别名&数据共享 前言一、步骤别名二、特性文件三、测试脚本四、运行测试五、小测验总结 前言 有的时候&#xff0c;为了提高可读性&#xff0c;我们需要使用不同的名称来声明相同的…
阅读更多...
【笔记】变压器-热损耗-频响曲线推导 - 03 变压器参数-特性

【笔记】变压器-热损耗-频响曲线推导 - 03 变压器参数-特性

参考《Mn-Zn开关电源用铁氧体磁心 PQ系列》&#xff0c;March 2014版 1.可能选择的型号和参数 PQ系列的这种铁氧体结构设计是TDK首创的。 优势是&#xff0c;相对E, EER磁芯&#xff0c;安装面积更小材质选择 PC47PC90PC95尺寸 PQ20/16 最小PQ50/50 最大 2.特性 2.1 温升与…
阅读更多...
Unity性能优化 -- 性能分析工具

Unity性能优化 -- 性能分析工具

Stats窗口Profiler窗口Memory Profiler其他性能分析工具&#xff08;Physica Debugger 窗口&#xff0c;Import Activity 窗口&#xff0c;Code Coverage 窗口&#xff0c;Profile Analyzer 窗口&#xff0c;IMGUI Debugger 窗口&#xff09; Stats 统级数据窗口 game窗口 可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023