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眼镜凭借其先进的功能，在机场、车站、海关、港口、工厂、园区、消防局和警察局等行业中为安保人员提供了更为高效、…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...