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眼镜凭借其先进的功能，在机场、车站、海关、港口、工厂、园区、消防局和警察局等行业中为安保人员提供了更为高效、…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
条件运算符
C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...