Python武器库开发-前端篇之CSS元素(三十二)

2023-11-26 00:30

本文主要是介绍Python武器库开发-前端篇之CSS元素(三十二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端篇之CSS元素(三十二)

CSS 元素是一个网页中的 HTML 元素,包括标签、类和 ID。它们可以通过 CSS 选择器选中并设置样式属性,以使网页呈现具有吸引力和良好的可读性。常见的 HTML 元素包括 div、p、h1、h2、span 等,它们可以使用 CSS 设置字体、颜色、背景、边框等样式属性,从而实现网页的美化。除了 HTML 标准元素,CSS 还支持自定义元素,可以使用伪元素来设置样式,实现更加灵活多样化的网页设计效果。

块元素

CSS 块元素是指在 HTML 中被定义为块级元素的标签(如 div、p、h1-h6 等),它们默认情况下会在页面上单独占据一行,并且可以设置宽度、高度、边距、填充以及背景等属性。这些元素会独占一行,并且可以设置其宽度、高度、内边距、外边距、边框等属性。块级元素总是从新行开始,它们可以包含内联元素和其他块级元素,而且可以控制它们的显示方式。它们的宽度默认为父元素的 100%,所以我们可以使用 CSS 设置块级元素的宽度和高度,并且可以使用 margin 和 padding 实现元素间的距离和内部空间的调整。

常见的块元素包括:

  • <div>:用于划分页面区块的通用容器。

  • <h1>-<h6>:用于表示标题的文本标签。

  • <p>:用于表示段落文本的标签。

  • <ul><ol>:用于表示无序列表和有序列表的标签。

  • <li>:用于表示列表项的标签。

  • <table>:用于表示表格的标签。

块元素可以设置 display 属性为 inlineinline-block,以改变其默认的块级展示方式。

以下是使用块元素的一个实例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body{margin: 0;}div{background-color: aquamarine;width: 388px;}p{background-color: deeppink;/* width: 88px; */}</style>
<body><div>这是一个块元素的实列</div><div>这是一个块元素的实列<p>这是一个块元素的实列</p></div><p>biubiubiu</p></body>
</html>

浏览器最终的输出结果如下所示:

在这里插入图片描述

内联元素

CSS 内联元素是指在 HTML 中默认排列在同一行内的元素,如 <a><span><img><em><strong> 等标签。内联元素不会独占一行,而是在同一行内根据内容大小排列,并且只能容纳文本或其他内联元素。内联元素可以使用 CSS 属性 display: inline 显示为内联元素。

内联元素具有以下特点:

  1. 默认情况下不会强制换行,如果一行放不下,会自动换行。

  2. 宽度和高度只能由内容决定,无法设置固定的宽度和高度。

  3. margin 和 padding 在水平方向上起作用,但在垂直方向上不起作用。

  4. 可以设置 line-height 属性,用于控制行高。

通过 CSS 可以改变内联元素的字体、颜色、背景色等样式。使用 display 属性可以将内联元素转换为块级元素,或者将块级元素转换为内联元素。

常见的 CSS 内联元素有:

  • <a>:超链接

  • <span>:小段文字

  • <img>:图像

  • <em>:强调文本

  • <strong>:加重语气的文本

  • <input>:表单元素

  • <label>:表单标签

  • <button>:按钮元素

以下是使用内联元素的一个实例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div{width: 500px;height: 300px;background-color: tomato;    }a{width: 666px;color:whitesmoke;margin-top: 88px;font-size: 50px;}    
</style>
<body><div><a href="">这是一个a标签</a><a href="">这是二个a标签</a></div></body>
</html>

浏览器最终的输出结果如下所示:

在这里插入图片描述

内联块元素

CSS 内联块元素指的是在 HTML 文档中以内联方式显示的块级元素。这些元素可以被视为是行内元素和块级元素的混合体,它们类似于块级元素,但是默认情况下不会产生换行,而是将所占用的空间合并在一起,因此可以看作是一组内联元素的集合。

常见的 CSS 内联块元素包括:

  1. <img>:显示图片

  2. <input>:输入框

  3. <button>:按钮

  4. <select>:下拉菜单

  5. <textarea>:文本输入框

  6. <label>:标签

  7. <iframe>:内嵌框架

  8. <audio>:音频播放器

  9. <video>:视频播放器

  10. <canvas>:画布元素

对于 CSS 内联块元素,可以通过 CSS 样式来设置它们的宽度、高度、边距、内边距等属性。此外,它们也可以使用 CSS 的浮动(float)属性来调整它们的位置。

以下是使用内联块元素的一个实例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.con,.con2{width: 500px;height: 300px;background-color: tomato;border: 5px solid maroon;}.con a{background-color: blanchedalmond;height: 180px;width: 170px;margin-top: 30px;padding: 30px 20px;display: inline-block;}
</style>
<body><div class="con"><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a><a href="">这是一个a标签</a></div><div></div class="con2">
</body>
</html>

浏览器最终的输出结果如下所示:

在这里插入图片描述

这篇关于Python武器库开发-前端篇之CSS元素(三十二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/424866

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

python: 多模块(.py)中全局变量的导入

文章目录 global关键字可变类型和不可变类型数据的内存地址单模块(单个py文件)的全局变量示例总结 多模块(多个py文件)的全局变量from x import x导入全局变量示例 import x导入全局变量示例 总结 global关键字 global 的作用范围是模块(.py)级别: 当你在一个模块(文件)中使用 global 声明变量时,这个变量只在该模块的全局命名空

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal