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.hqwc.cn/news/700715.html

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

相关文章

基于STM32F401RET6智能锁项目(BS82166A_3触摸按键)

一、BS81x 特征 • 工作电压&#xff1a;2.2V~5.5V • 低待机电流 • 自动校准功能 • 可靠的触摸按键检测 • 自动切换待机 / 工作模式 • 最长按键输出时间检测 • 具备抗电压波动功能 • Level Hold&#xff0c;可选高有效或低有效 • NMOS 输出内建上拉电阻 /CMOS 直接 输出…

RT Thread + CLion环境搭建

RT Thread CLion环境搭建 0.前言一、准备工具1. Env RT Thread v5.12.CLion安装3.编译及下载工具 二、新建Env工程三、CLion配置四、运行测试 0.前言 事情的起因是最近在使用RT Thread Studio时&#xff0c;发现默认的 rtt 内核版本及交叉编译链版本都过于陈旧&#xff0c;于…

其它高阶数据结构①_并查集(概念+代码+两道OJ)

目录 1. 并查集的概念 2. 并查集的实现 3. 并查集的应用 3.1 力扣LCR 116. 省份数量 解析代码1 解析代码2 3.2 力扣990. 等式方程的可满足性 解析代码 本篇完。 写在前面&#xff1a; 此高阶数据结构系列&#xff0c;虽然放在⑤数据结构与算法专栏&#xff0c;但还是作…

安全风险 - 如何解决 setAccessible(true) 带来的安全风险?

可能每款成熟的金融app上架前都会经过层层安全检测才能执行上架&#xff0c;所以我隔三差五就能看到安全检测报告中提到的问题&#xff0c;根据问题的不同级别&#xff0c;处理的优先级也有所不同&#xff0c;此次讲的主要是一个 “轻度问题” &#xff0c;个人认为属于那种可改…

ui之资源

主题 样式 菜单 上下文菜单 国际化 1字符串资源 xml java代码中使用 //res-valuse-strings.xml 默认创建的 getResources().getString(R.string.x)2 实例 3 颜色资源语法 alpha red green blue <color 行 色块 择色器 定义文件&#xff0c;用 半透明 #440000FF 常用&…

Python 函数式编程

匿名函数 Python 允许用 lambda 关键字创造匿名函数。匿名顾名思义就是没有名字&#xff0c;即不需要以标准的方式来声明&#xff0c;比如说&#xff0c;使用 def 加函数名来声明。一个完整的 lambda “语句”代表了一个表达式&#xff0c;这个表达式的定义体必须和声明放在同…

2024CKE中国婴童展

举办地点&#xff1a;上海新国际博览中心 举办时间&#xff1a;2024年10月16-18日 同期展会&#xff1a;CTE中国玩具展、CPE中国幼教展、CLE中国授权展 展会规模&#xff1a;230,000平米 展商数量&#xff1a;2,500 参展品牌&#xff1a;5,212 …

【数据库】数据库指令

一。数据库打开 1.命令行 2.进入mysql mysql -uroot -p密码 3.退出 exit&#xff1b; 二。针对数据库的操作 1.创建数据库&#xff08;有分号&#xff09; create database student; 2.使用数据库 use student 3.删除数据库&#xff08;有分号&#xff09; drop database…

神经网络复习--卷积神经网络及其扩展

文章目录 卷积卷积网络反向传播已知池化层误差&#xff0c;反向求上一层隐藏层误差已知卷积层的误差&#xff0c;推导该层的W, b的梯度 注意力机制Transformer卷积变体 卷积 卷积神经网络是一个多层的神经网络&#xff0c;每层由多个二维平面组成&#xff0c;每个平面由多个独…

Llama 3 超级课堂 -笔记

课程文档&#xff1a; https://github.com/SmartFlowAI/Llama3-Tutorial 课程视频&#xff1a;https://space.bilibili.com/3546636263360696/channel/series 1 环境配置 1.1 创建虚拟环境,名为&#xff1a;llama3 conda create -n llama3 python3.10 1.2 下载、安装 pyt…

Prosys OPC UA Simulation Server工程文件备份方法

Prosys OPC UA Simulation Server是一款免费的OPC UA服务器仿真软件&#xff0c;具体的使用和下载参考官网&#xff1a; Prosys OPC - OPC UA Simulation Server Downloads 他的免费版本不提供工程文件的备份、导入导出功能&#xff0c;每次退出时保存。如果需要工程备份&a…

Java框架精品项目【用于个人学习】

源码获取&#xff1a;私聊回复【项目关键字】获取 更多选题参考&#xff1a; Java练手项目 & 个人学习等选题参考 推荐菜鸟教程Java学习、Javatpoint学习 前言 大家好&#xff0c;我是二哈喇子&#xff0c;此博文整理了各种项目需求 此文下的项目用于博主自己学习&#x…