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眼镜凭借其先进的功能，在机场、车站、海关、港口、工厂、园区、消防局和警察局等行业中为安保人员提供了更为高效、…...
SpringBoot-基础面试篇
什么是 Spring Boot？Spring Boot 是 Spring 开源组织下的子项目，是 Spring 组件一站式解决方案，主要是简化了使用 Spring 的难度，简省了繁重的配置，提供了各种启动器，使开发者能快速上手。为什么要用Spring…...
uniapp组件-Card卡片：从基础到高级应用全解析
1. 初识uni-app Card卡片组件 第一次接触uni-app的Card卡片组件时，我正为一个电商项目发愁。产品经理要求实现商品列表的卡片式布局，既要有图片展示，又要有价格和购买按钮。当时尝试自己写CSS实现，结果各种兼容性问题让我头疼不已…...
2026最权威的六大降重复率网站实测分析
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 要降低AIGC（人工智能生成内容）的检测率，关键之处在于提升…...
python tarfile
# Python tarfile模块：不止是打包与解包 在Python的标准库中，tarfile模块常常被开发者们忽视，或者仅仅被当作一个简单的压缩工具来使用。实际上，这个模块的功能远比表面看起来要丰富得多，它处理的是tar格式的归档文件…...
OpenCore Legacy Patcher技术解析：老旧Mac设备的macOS现代化方案
OpenCore Legacy Patcher技术解析：老旧Mac设备的macOS现代化方案 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 一、工具概述与价值定位 OpenCo…...
终极指南：免费在电脑上玩Switch游戏，Ryujinx模拟器完整教程
终极指南：免费在电脑上玩Switch游戏，Ryujinx模拟器完整教程 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 你是否曾想过在电脑上体验《塞尔达传说：…...
解锁高效电源设计：TPS82130电源芯片PCB布局与散热实战解析
1. 为什么TPS82130的PCB布局能决定电源系统成败？ 第一次用TPS82130设计电源模块时，我犯了个典型错误——把芯片随便放在PCB角落，结果满载工作时温度直接飙到85℃。这个教训让我明白，对于这种集成度高达95%的微型电源模块ÿ…...
Comate vs. Cursor：国产AI IDE如何以多智能体协同重塑开发体验？
1. Comate与Cursor：AI IDE赛道的双雄对决 当代码补全插件已经无法满足开发者的需求时，AI原生IDE正在掀起一场开发工具的革命。在这场变革中，百度的Comate和Cursor成为了最受关注的两个选手。作为一个长期使用各类开发工具的老码农，…...
OpenClaw人人养虾：自动化故障排查
本指南汇总了 OpenClaw 各自动化模块（Cron、Hooks、Webhooks、Polls）的常见故障及排查步骤。遇到自动化任务异常时，请按照以下分类逐步排查。通用诊断命令在深入排查之前，先运行以下命令获取全局状态：# 查看 Gateway 运…...
如何在复杂逻辑谜题中寻找确定性答案：MiniSat 求解器的极简哲学
如何在复杂逻辑谜题中寻找确定性答案：MiniSat 求解器的极简哲学 【免费下载链接】minisat A minimalistic and high-performance SAT solver 项目地址: https://gitcode.com/gh_mirrors/mi/minisat 当你面对一个由数千个变量和约束条件构成的复杂逻辑系统时&…...