CSS学习11--版心和布局流程以及几种分布的例子
版心和布局流程
- 一、版心
- 二、布局流程
- 三、一列固定宽度且居中
- 四、两列左窄右宽
- 五、通栏平均分布型
一、版心
版心：是指网页主题内容所在的区域。一般在浏览器窗口水平居中位置，常见的宽度值为960px、980px、1000px、1200px等。
二、布局流程
为了提高网页制作的效率，布局时需要遵守一定的布局流程，具体如下：
- 确定页面版心
- 分析页面中的行模块，以及每个行模块中的列模块
- 制作HTML结构
- CSS初始化，然后开始运用盒子模型的原理，通过CID+CSS布局来控制网页的各个模块
三、一列固定宽度且居中
<html><head><style>* {padding: 0;margin: 0;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main">main</div><div class="footer">footer</div></body>
</html>
四、两列左窄右宽
<html><head><style>* {padding: 0;margin: 0;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}.main .left {width: 360px;height: 500px;float: left;background-color: white;}.main .right {width: 590px;height: 500px;margin-left: 10px;float: left;background-color: white;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main"><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div></body>
</html>
五、通栏平均分布型
<html><head><style>* {padding: 0;margin: 0;}ul {list-style: none;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}.main ul li:nth-child(odd) {width: 240px;height: 240px;background-color: deeppink;float: left;}.main ul li:nth-child(even) {width: 240px;height: 240px;background-color: hotpink;float: left;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><div class="footer">footer</div></body>
</html>
相关文章：
CSS学习11--版心和布局流程以及几种分布的例子
版心和布局流程 一、版心二、布局流程三、一列固定宽度且居中四、两列左窄右宽五、通栏平均分布型 一、版心 版心：是指网页主题内容所在的区域。一般在浏览器窗口水平居中位置，常见的宽度值为960px、980px、1000px、1200px等。 二、布局流程 为了提高…...
NetSuite AI 图生代码
去年的ChatGPT热潮期间，我们写过一篇文章说GTP辅助编程的事。 NetSuite GPT的辅助编程实践_如何打开netsuite: html script notes的视图-CSDN博客文章浏览阅读2.2k次，点赞4次，收藏3次。作为GPT综合症的一种表现，我们今朝来探究下…...
Java - BigDecimal计算中位数
日常开发中，如果使用数据库来直接查询一组数据的中位数，就比较简单，直接使用对应的函数就可以了，例如： SUBSTRING_INDEX(SUBSTRING_INDEX(GROUP_CONCAT(目标列名 ORDER BY 目标列名),,,Count(1)/2),,,-1) AS 目标列名_…...
Tensorflow2如何读取自制数据集并训练模型？-- Tensorflow自学笔记13
一. 如何自制数据集？ 1. 目录结构 以下是自制数据集-手写数字集, 保存在目录 mnist_image_label 下 2. 数据存储格式 2.1. 目录mnist_train_jpeg_60000 下存放的是 60000张用于测试的手写数字 如 : 0_5.jpg, 表示编号为0，标签为5的图片 6_1.jpg, 表示…...
JVM系列(七) -对象的内存分配流程
一、摘要 在之前的文章中，我们介绍了类加载的过程、JVM 内存布局和对象的创建过程相关的知识。 本篇综合之前的知识，重点介绍一下对象的内存分配流程。 二、对象的内存分配原则 在之前的 JVM 内存结构布局的文章中，我们介绍到了 Java 堆的内存布局，由 年轻代 (Young Ge…...
Apache Ignite 在处理大规模数据时有哪些优势和局限性？
Apache Ignite 在处理大规模数据时的优势和局限性可以从以下几个方面进行分析： 优势 高性能：Ignite 利用内存计算的优势，实现了极高的读写性能，通过分布式架构，它可以将数据分散到多个节点上，从而实现了并…...
怎么利用NodeJS发送视频短信
随着5G时代的来临，企业的数字化转型步伐日益加快，视频短信作为新兴的数字营销工具，正逐步展现出其大的潜力。视频群发短信以其独特的形式和内容，将图片、文字、视频、声音融为一体，为用户带来全新的直观感受࿰…...
WebAPI(三)、 DOM 日期对象Date；获取事件戳；根据节点关系查找节点
文章目录 DOM1. 日期对象(1)、日期对象方法(2)、时间戳(3)、下课倒计时 2. 节点操作(1)、 查找节点（根据节点关系找）(2)、 增加节点：创建create、追加append、克隆clone(3)、 删除节点remove DOM 1. 日期对象 日期对象就是用来表示时间的对…...
012.Oracle-索引
我 的 个 人 主 页：👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 ：👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 ：👉&…...
SSL 证书 | 免费获取与自动续期全攻略
前言 随着互联网的不断发展，网站的安全性越来越受到人们的关注。 SSL证书 作为一种保障网站安全的重要手段，已经成为了许多网站的必备配置。 以前阿里云每个账号能生成二十个期限 1 年的免费 SSL 证书，一直用，还挺香࿰…...
达梦数据库管理员常用SQL（一）
达梦数据库管理员常用SQL（一） 数据库基本信息数据库参数信息表空间信息日志文件信息进程和线程信息会话连接信息SQL执行信息等待事件信息事务和锁信息数据库基本信息 --查询数据库内部版本号 select id_code; select build_version from v$instance; select * from v$versi…...
HttpUtils工具类（三）OKHttpClient使用详细教程
OkHttpClient 是一个由 Square 公司开发的 HTTP 客户端库，用于在 Android 和 Java 应用中进行网络请求。它支持同步和异步请求、连接池、超时设置、拦截器等功能，适合用于高性能网络请求，特别是在需要处理复杂的网络操作时。 一、OKHttpClien…...
重生奇迹MU老大哥剑士职业宝刀未老
重生奇迹MU中，老大哥剑士职业一直以来备受玩家们的喜爱。这个职业不仅拥有强大的攻击力、防御力和战斗技巧，而且还能够通过使用各种宝刀来增强自身的战斗能力。即便经过了多年的沉淀，老大哥剑士依然是一名宝刀未老的男人，仍然能够…...
关于Netty详细介绍，Netty原理架构解析
Netty 是什么 1）Netty 是 JBoss 开源项目，是异步的、基于事件驱动的网络应用框架，它以高性能、高并发著称。所谓基于事件驱动，说得简单点就是 Netty 会根据客户端事件（连接、读、写等）做出响应，…...
在Unity环境中使用UTF-8编码
为什么要讨论这个问题 为了避免乱码和更好的跨平台 我刚开始开发时是使用VS开发,Unity自身默认使用UTF-8 without BOM格式,但是在Unity中创建一个脚本,使用VS打开,VS自身默认使用GB2312(它应该是对应了你电脑的window版本默认选取了国标编码,或者是因为一些其他的原因)读取脚本…...
零工市场小程序：自由职业者的日常工具
零工市场小程序多功能且便捷，提供了前所未有的灵活性和工作效率。这类小程序不仅改变了自由职业者的工作方式，也重塑了劳动力市场的格局。 一、零工市场小程序的特点 即时匹配：利用先进的数据算法，零工市场小程序能够快速匹配自由…...
【Http 每日一问，访问服务端的鉴权Token放在header还是cookie更合适?】
结论先行： token静态的，不变的，放在header里面。 典型场景 ，每次访问时需要带个静态token请求服务端，向服务端表明是谁请求，此时token也可以认为是个固定的access-key。token动态的，会失效&…...
vue2+ueditor集成秀米编辑器
一、百度富文本编辑器 1.首先下载 百度富文本编辑器 下载地址：GitHub - fex-team/ueditor: rich text 富文本编辑器 2.把下载好的文件整理好 放在图片目录下 3. 安装插件vue-ueditor-wrap npm install vue-ueditor-wrap 4.在你所需要展示的页面 引入vue-uedito…...
[网络]HTTP协议 Cookie与Session
一、Cookie 1.1 定义 HTTP Cookie（也称为 Web Cookie、浏览器 Cookie 或简称 Cookie）是服务器发送到 用户浏览器并保存在浏览器上的一小块数据，它会在浏览器之后向同一服务器再次发 起请求时被携带并发送到服务器上。通常，它用于…...
安宝特科技 | AR眼镜在安保与安防领域的创新应用及前景
随着科技的不断进步，增强现实（AR）技术逐渐在多个领域展现出其独特的优势，尤其是在安保和安防方面。AR眼镜凭借其先进的功能，在机场、车站、海关、港口、工厂、园区、消防局和警察局等行业中为安保人员提供了更为高效、…...
2024 第十二届重庆国际植保双交会暨新型肥料农药产业博览会
2024 第十二届重庆国际植保双交会暨新型肥料农药产业博览会，引领农业新未来 农业，是人类生存的基石，是社会发展的保障。而肥料和农药，作为农业生产的重要投入品，其品质和技术的不断创新，直接关系着农业的可…...
用“说”智能控制灯具开关语音识别芯片NRK3603
用“说”智能控制灯具开关是一种基于语音识别技术的智能家居设备，它通过内置的语音识别芯片，利用离线识别算法，将用户的语音指令实现对灯具的控制，NRK3603语音识别芯片成为客户低成本的离线语音识别方案。 功能特性： …...
APS开源源码解读: 排程工具 optaplanner
抽象层次非常好，广义优化工具。用于排产没有复杂的落地示例 https://github.com/apache/incubator-kie-optaplanner/blob/main/optaplanner-examples/src/main/java/org/optaplanner/examples/projectjobscheduling/app/ProjectJobSchedulingApp.javahttps://github…...
AMEYA360：村田量产用于汽车市场的高可靠性0603M铜电极负温度系数NTC热敏电阻
株式会社村田制作所开发了0603M尺寸(0.60.30.3mm)铜电极负温度系数(NTC)热敏电阻，型号分别是“NCU03XH103F6SRL”和“NCU03XH103F60RL”，该新品扩充了NCU系列的产品尺寸阵容，满足了汽车市场应用中电路板的高密度化和小型化、以及对电子部件的…...
代码随想录第十天|150.逆波兰表达式求值 239.滑动窗口的最大值 347.前K个高频元素
150.逆波兰表达式求解 思路：做过 使用stoi ：字符串转数字 class Solution { public:int cal(int num1,int num2,char c){int res;if(c){resnum1num2;}if(c-){resnum2-num1;}if(c*){resnum1*num2;}if(c/){resnum2/num1;}return res;}int evalRPN(vector…...
[阅读笔记]《解读基金—我的投资观与实践》— 季凯帆
📢博客主页：https://loewen.blog.csdn.net📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！📢本文由 丶布布原创，首发于 CSDN，转载注明出处🙉📢现…...
2.3之前
1. 2. freertos基础时钟:freertos自动的采用systick定时器,作为freertos基础时钟，systick定时器只有定时中断功能，1ms中断一次。...
处理器基础知识——cache
本文节选自书籍《大话处理器：处理器基础知识读本》 PDF版本可以访问我的网盘通过网盘分享的文件：大话处理器：处理器基础知识读本.pdf 提取码: 1234 0 什么是 Cache 随处可见的Cache–技术来源于生活 使用电脑的人对 Cachc 并不会陌生&#…...
操作系统的运行环境
1.处理器的运行模式 目态 也叫用户态， 执行非特权指令：不能直接访问系统中的软硬件资源，仅仅可以访问用户地址空间。 用户应用程序运行在目态。 管态 也叫内核态， 可执行除访管指令外的任意指令，包括特权指令&…...
如何在 Selenium 中获取网络调用请求？
引言 捕获网络请求对于理解网站的工作方式以及传输的数据至关重要。Selenium 作为一种 Web 自动化工具，可以用于捕获网络请求。本文将讨论如何使用 Selenium 在 Java 中捕获网络请求并从网站检索数据。 我们可以使用浏览器开发者工具轻松捕获网络请求或日志。大多数现代 Web…...