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眼镜凭借其先进的功能，在机场、车站、海关、港口、工厂、园区、消防局和警察局等行业中为安保人员提供了更为高效、…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...