HTML常用标签-布局相关标签

布局标签

div标签 俗称"块",主要用于划分页面结构,做页面布局
自己独占一行的元素,设置宽高生效

span标签 俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰
不会自己独占一行的元素,设置宽高不生效

  • 代码
    <div style="width: 500px; height: 400px;background-color: cadetblue;"><div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;"><span style="color: blueviolet;">页面开头部分</span></div> <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;"><span style="color: blueviolet;">页面中间部分</span></div> <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;"><span style="color: blueviolet;">页面结尾部分</span></div> </div>
  • 效果
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/327666.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【HR】阿里三板斧--20240514

参考https://blog.csdn.net/haydenwang8287/article/details/113541512 头部三板斧 战略能不能落地、文化能不能得到传承、人才能不能得到保障。 头部三板斧适用的核心场景有三个&#xff1a;一是战略不靠谱&#xff1b;二是组织效率低、不聚心&#xff1b;三是人才跟不上。对…

二、服务器配置修改

二、服务器配置修改 1 防火墙相关配置 systemctl status firewalld systemctl enable firewalld systemctl start firewalld firewall-cmd --reload firewall-cmd --list-all# 开启端口 firewall-cmd --zonepublic --add-port6030-6060/tcp --permanent firewall-cmd --zonep…

如何将公众号添加到CSDN个人主页

1. 创作中心- 推广管理 输入个人公众号名字并开启微信公众号推广 2. 将公众号的二维码图片加入拓展信息 个人主页的左下角就能看到推广 如果希望能看到是二维码 操作如下&#xff1a; 写篇文章贴上二维码 然后点击鼠标右键获得此页面链接 &#xff0c;例如我的个人公众号 htt…

定时器的理论和使用

文章目录 一、定时器理论1.1定时器创建和使用 二、定时器实践2.1周期触发定时器2.2按键消抖 一、定时器理论 定时器是一种允许在特定时间间隔后或在将来的某个时间点调用回调函数的机制。对于需要周期性任务或延迟执行任务的嵌入式应用程序特别有用。 软件定时器&#xff1a; …

【C++语言】动态内存管理

文章目录 前言内存管理数据存储位置C语言动态内存管理方式C动态内存管理方式&#xff1a;new/deleteoperator new与operator delete函数new和delete的实现原理定位new表达式&#xff08;了解&#xff09;常见面试题 总结C语言系列学习目录 前言 本章要介绍的是动态内存管理&am…

ORACLE ODA一体机存储节点电源故障的分析处理

近期&#xff0c;某用户的ORACLE ODA一体机在例行机房巡检时出现亮黄灯告警&#xff1b;用户反馈次问题后我们立刻通过远程方式&#xff0c;登陆ODA的控制台进行查看&#xff1b; 对于ODA一体机&#xff08;2个计算节点1个存储节点&#xff09;&#xff0c;计算节点可以通过il…

nginx 发布静态资源

一. nginx 发布静态资源 在nginx中nginx.conf配置文件中添加内容如下&#xff1a; server {listen 90;server_name localhost;# 配置静态资源文件&#xff0c;就可以访问了location / {root /home/fooie-shop;index index.html;}# 配置音频和图片资源location /imoo…

深入了解 npm:Node.js 包管理工具详解

文章目录 一、npm 基本概念1.1 什么是 npm&#xff1f;1.2 package.json 文件 二、npm 常用命令2.1 初始化项目2.2 安装依赖2.2.1 安装单个包2.2.2 全局安装包2.2.3 安装开发依赖 2.3 移除依赖2.4 更新依赖2.5 查看已安装的包2.6 发布包 三、npm 高级用法3.1 使用 npm scripts3…

数据结构之二叉树详解[1]

在前面我们介绍了堆和二叉树的基本概念后&#xff0c;本篇文章将带领大家深入学习链式二叉树。 1.预备知识 2.二叉树结点的创建 3.二叉树的遍历 3.1前序遍历 3.2中序遍历 3.3 后序遍历 4.统计二叉树的结点个数 5.二叉树叶子结点的个数 6.二叉树第k层的结点个数 7.总结 …

589.N叉树的前序遍历

刷算法题&#xff1a; 第一遍&#xff1a;1.看5分钟&#xff0c;没思路看题解 2.通过题解改进自己的解法&#xff0c;并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步&#xff0c;下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…

高级个人主页

高级个人主页 效果图部分代码领取源码下期更新预报 效果图 部分代码 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" name"viewport" content"widthdevice-width, initial-scale1, maximum-scale1, use…

数据驱动测试在接口测试和网站测试中的应用

什么是数据驱动测试 据驱动测试是一种测试方法&#xff0c;其中测试数据和测试逻辑是分开的&#xff0c;测试数据被存储在外部源中&#xff08;如Excel表格、JSON文件、数据库等&#xff09;&#xff0c;测试逻辑则独立于测试数据。在测试过程中&#xff0c;测试数据被读取并传…

代码随想录算法训练营第五十三天

今天同事说他要离职啦&#xff0c;还挣挺多的&#xff0c;我也慢慢努力吧&#xff01;&#xff01; 儿子似乎有点斜颈&#xff0c;还好不是很大的病&#xff0c;儿子也开始面对人生的苦难啦。都好好加油生活&#xff01; 1143.最长公共子序列 二维可以理解一点。 class Solut…

用面向对象的思想编写实时嵌入式C程序

实时嵌入式系统的软件一般由C语言编写&#xff0c;程序结构基本上都是这样的&#xff1a; // 主程序 int main(void) {init(); // 初始化while(1){tick(); // 业务逻辑}return 0; }// 计时器 static unsigned int g_timer_tick_cnt 0; // 时钟中断回调 void isr_time…

[c++]多态的分析

多态详细解读 多态的概念多态的构成条件 接口继承和实现继承: 多态的原理:动态绑定和静态绑定 多继承中的虚函数表 多态的概念 -通俗的来说&#xff1a;当不同的对象去完成某同一行为时&#xff0c;会产生不同的状态。 多态的构成条件 必须通过基类的指针或者引用调用虚函数1虚…

超级简单的地图操作工具开发可疑应急,地图画点,画线,画区域,获取地图经纬度等

使用echars的地图画点,画线,画区域,获取地图经纬度等 解压密码:10086007 地图也是用临时的bmap.js和china.js纯离线二选一 一共就这么多文件 画点,画线,画区域 点击地图获取经纬度-打印到控制台,这样就能渲染航迹,多变形,结合其他算法算圆等等操作 下载资源:https://download…

Databend 开源周报第 144 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 了解 Databend …

Redis-详解(基础)

文章目录 什么是Redis&#xff1f;用Redis的特点&#xff1f;用Redis可以实现哪些功能&#xff1f;Redis的常用数据类型有哪些?Redis的常用框架有哪些?本篇小结 更多相关内容可查看 什么是Redis&#xff1f; Redis&#xff08;Remote DictionaryServer&#xff09;是一个开源…

【AI学习】对指令微调(instruction tuning)的理解

前面对微调&#xff08;Fine-tuning&#xff09;的学习中&#xff0c;提到指令微调。当时&#xff0c;不清楚何为指令微调&#xff0c;也一直没来得及仔细学习。 什么是指令微调&#xff1f;LLM经过预训练后&#xff0c;通过指令微调提升模型的指令遵循能力。所谓指令&#xf…

uniapp怎么使用jsx

安装vitejs/plugin-vue-jsx npm install vitejs/plugin-vue-jsx -Dvite.config.js配置 import { defineConfig } from "vite"; import uni from "dcloudio/vite-plugin-uni"; import vueJsx from vitejs/plugin-vue-jsxexport default defineConfig({plu…