当前位置： 首页 > article >正文

CSS—text文本、font字体、列表list、表格table、表单input、下拉菜单select

article 2026/3/26 20:10:48

目录

1.文本

2.字体

3.列表list

a.无序列表

b.有序列表

c.定义列表

4.表格table

a.内容

b.合并单元格

3.表单input

a.input标签

b.单选框

c.上传文件

4.下拉菜单

1.文本

属性描述
color设置文本颜色。
direction指定文本的方向 / 书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align指定文本的水平对齐方式。
text-decoration指定添加到文本的装饰效果。
text-indent指定文本块中首行的缩进。
text-shadow指定添加到文本的阴影效果。
text-transform控制文本的大小写。
text-overflow指定应如何向用户示意未显示的溢出内容。
unicode-bidi与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align指定文本的垂直对齐方式。
white-space指定如何处理元素内的空白。
word-spacing设置单词间距。
属性描述
text-align-last指定如何对齐文本的最后一行。
text-justify指定对齐的文本应如何对齐和间隔。
text-overflow指定应如何向用户呈现未显示的溢出内容。
word-break指定非 CJK 脚本的换行规则。
word-wrap允许长单词被打断并换到下一行。
writing-mode指定文本行是水平放置还是垂直放置。

对于 W3C compliant CSS：如果定义了 color 属性，则还必须定义 background-color 属性。

2.字体

属性描述
font简写属性。在一条声明中设置所有字体属性。
font-family规定文本的字体系列（字体族）。
font-size规定文本的字体大小。
font-style规定文本的字体样式。
font-variant规定是否以小型大写字母的字体显示文本。
font-weight规定字体的粗细。

  • 字体大小：

    PC端网页最常用的是像素px，且必须要带单位，谷歌默认字体是16像素

    p {font-size:30px;
}

  • 字体粗细：

行高=文本高度+上间距+下间距

注意：添加单位px表示行高，不加单位表示当前标签属性值的倍数！

3.列表list

列表还拥有默认的外边距和内边距。

要删除此内容，可在 <ul> 或 <ol> 中添加 margin:0 和 padding:0

属性描述
list-style简写属性。在一条声明中设置列表的所有属性。
list-style-image指定图像作为列表项标记。
list-style-position规定列表项标记（项目符号）的位置。
list-style-type规定列表项标记的类型。

a.无序列表

b.有序列表

c.定义列表

4.表格table

table 和 <th> 和 <td> 元素都有单独的边框。

属性描述
border简写属性。在一条声明中设置所有边框属性。
border-collapse规定是否应折叠表格边框。
border-spacing规定相邻单元格之间的边框的距离。
caption-side规定表格标题的位置。
empty-cells规定是否在表格中的空白单元格上显示边框和背景。
table-layout设置用于表格的布局算法。

a.内容

加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第二天</title>
</head>
<body><!-- 无序列表 --><ul><li>无序列标签1</li><li>无序列标签2</li></ul><!-- 有序列表 --><ol><li>有序列标签1</li><li>有序列标签2</li></ol><!-- 定义列表 --><dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd></dl><!-- 表格标签，加border后能显示边框 加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略--><table border="1"><thead><tr><th>第一行表头单元格1</th><th>第一行表头单元格2</th></tr></thead><tbody><tr><td>第一行内容单元格1</td><td>第一行内容单元格2</td></tr></tbody><tfoot><tr><td>第二行汇总单元格1</td><td>第二行汇总单元格2</td></tr></tfoot></table>
</body>
</html>

b.合并单元格

注意：

表格是在自己的结构标签内进行合并的，不能跨结构标签thead、tbody、tfoot合并

<!-- 合并单元格，遵循“保留最左最上”原则 --><table border="1"><tr><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>70</td><td rowspan="2">80</td><td>90</td></tr><tr><td>90</td><!-- <td>80</td> 删除--><td>70</td></tr><tr><td colspan="3">160</td><!-- <td>160</td> 删除--><!-- <td>160</td> 删除--></tr></table>

 

3.表单input

CSS 表单

作用：收集用户信息

使用场景：

  • 登录页面

  • 注册页面

  • 搜索区域

a.input标签

添加input标签占位文本：使用placeholder属性即可

b.单选框

c.上传文件

<br><!-- 表单标签——input标签使用 --><!-- 单纯的文本形式，不能换行 -->文本框：<input type="text"><br><!-- 自动非明文显示 --> <!-- input标签占位文本 -->密码框：<input type="password" placeholder="请输入密码"><br>单选框：<!-- gender是自定义名称，添加checked属性，默认选中 --><input type="radio" name="gender"> 男<input type="radio" name="gender" checked> 女<br><br><!-- 默认只可上传一个文件，添加multiple属性可实现文件多选功能 -->上传一个文件：<input type="file" ><br>上传多个文件：<input type="file" multiple><br><br><!-- 添加checked属性，实现默认选中 -->多选框：<input type="checkbox"> 苹果多选框默认选中：<input type="checkbox" checked> 草莓<br>

 

4.下拉菜单select

<!-- 下拉菜单，使用属性selected实现默认选中-->城市：<!-- <select name="" id=""></select> name和id等是发送数据使用的属性--><select ><option>北京</option><option>上海</option><option selected>广州</option></select><br><br>

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】 

相关文章：

CSS—text文本、font字体、列表list、表格table、表单input、下拉菜单select

目录 1.文本 2.字体 3.列表list a.无序列表 b.有序列表 c.定义列表 4.表格table a.内容 b.合并单元格 3.表单input a.input标签 b.单选框 c.上传文件 4.下拉菜单 1.文本 属性描述color设置文本颜色。direction指定文本的方向 / 书写方向。letter-spacing设置字符…...

编程日记 2026/3/26 20:10:48

API接口：企业名称、注册号、统一社会信用代码、企业类型、成立日期和法定代表人等数据 API 接口使用指南

API接口&#xff1a;企业名称、注册号、统一社会信用代码、企业类型、成立日期和法定代表人等数据 API 接口使用指南 本文详细介绍一种基于 Web 搜索方式实现的企业信息查询接口&#xff0c;适用于数据补全、企业资质验证、信息查询等场景。文章内容涵盖接口功能、请求参数、返…...

编程日记 2025/3/26 15:27:48

在.net中，async/await的理解

一、什么是同步&#xff1f;什么是异步&#xff1f; 在.net中&#xff0c;async 和 await 是两个关键字&#xff0c;async 关键字用于声明一个方法是异步方法&#xff0c;该方法可以包含一个或多个 await 表达式。await 关键字是用于在异步方法中等待一个任务&#xff08;Task…...

编程日记 2025/3/26 5:21:19

水果识别系统 | BP神经网络水果识别系统，含GUI界面（Matlab）

使用说明 代码下载&#xff1a;BP神经网络水果识别系统&#xff0c;含GUI界面&#xff08;Matlab&#xff09; BP神经网络水果识别系统 一、引言 1.1、研究背景及意义 在当今科技迅速发展的背景下&#xff0c;人工智能技术尤其是在图像识别领域的应用日益广泛。水果识别作为…...

编程日记 2026/3/17 12:36:10

40岁开始学Java：Java中单例模式（Singleton Pattern）,适用场景有哪些？

在Java中&#xff0c;单例模式&#xff08;Singleton Pattern&#xff09;用于确保一个类只有一个实例&#xff0c;并提供全局访问点。以下是详细的实现方式、适用场景及注意事项&#xff1a; 一、单例模式的实现方式 1. 饿汉式&#xff08;Eager Initialization&#xff09; …...

编程日记 2026/3/16 20:32:12

李宏毅机器学习课程学习笔记04 | 浅谈机器学习-宝可梦、数码宝贝分类器

文章目录 案例&#xff1a;宝可梦、数码宝贝分类器第一步&#xff1a;需要定义一个含有未知数的function第二步&#xff1a;loss of a function如何Sample Training Examples > 如何抽样可以得到一个较好的结果如何权衡模型的复杂程度 Tradeoff of Model Complexity todo 这…...

编程日记 2026/3/20 10:24:05

C++11中的右值引用和完美转发

C11中的右值引用和完美转发 右值引用 右值引用是 C11 引入的一种新的引用类型&#xff0c;用 && 表示。它主要用于区分左值和右值&#xff0c;并且可以实现移动语义&#xff0c;避免不必要的深拷贝&#xff0c;提高程序的性能。左值通常是可以取地址的表达式&#xf…...

编程日记 2025/3/26 6:07:17

Redis详解（实战 + 面试）

目录 Redis 是单线程的&#xff01;为什么 Redis-Key(操作redis的key命令) String 扩展字符串操作命令 数字增长命令 字符串范围range命令 设置过期时间命令 批量设置值 string设置对象,但最好使用hash来存储对象 组合命令getset,先get然后在set Hash hash命令: h…...

编程日记 2026/3/24 16:38:42

ISP CIE-XYZ色彩空间

1. 颜色匹配实验 1931年&#xff0c;CIE综合了前人实验数据&#xff0c;统一采用700nm&#xff08;红&#xff09;、546.1nm&#xff08;绿&#xff09;、435.8nm&#xff08;蓝&#xff09;​作为标准三原色波长&#xff0c;绘制了色彩匹配函数&#xff0c;如下图。选定这些波…...

编程日记 2026/3/17 11:24:11

【强化学习笔记1】从强化学习的基本概念到近端策略优化（PPO）

好久没有更新了。最近想学习一下强化学习&#xff0c;本系列是李宏毅老师强化学习的课程笔记。 1. Policy-based Model 1.1 Actor 在policy-based model中&#xff0c;主要的目的就是训练一个actor。 对于一个episode&#xff08;例如&#xff0c;玩一局游戏&#xff09;&…...

编程日记 2026/3/18 9:08:31

Deepseek对ChatGPT的冲击？

从测试工程师的视角来看&#xff0c;DeepSeek对ChatGPT的冲击主要体现在**测试场景的垂直化需求与通用模型局限性之间的博弈**。以下从技术适配性、效率优化、风险控制及未来趋势四个维度展开分析&#xff1a; --- ### **一、技术适配性&#xff1a;垂直领域能力决定工具选择…...

编程日记 2026/2/7 19:42:54

STM32中的ADC

目录 一&#xff1a;什么是ADC 二&#xff1a;ADC的用途 三&#xff1a;STM32F103ZET6的ADC 3.1ADC对应的引脚 3.2ADC时钟 3.3ADC的工作模式 ​编辑3.4ADC校准 3.5ADC转换结构和实际电压的换算 四&#xff1a;ADC配置步骤 五&#xff1a;两个重要的函数 一&#xff1a…...

编程日记 2026/3/21 20:19:29

开启AI短剧新纪元!SkyReels-V1/A1双剑合璧!昆仑万维开源首个面向AI短剧的视频生成模型

论文链接&#xff1a;https://arxiv.org/abs/2502.10841 项目链接&#xff1a;https://skyworkai.github.io/skyreels-a1.github.io/ Demo链接&#xff1a;https://www.skyreels.ai/ 开源地址&#xff1a;https://github.com/SkyworkAI/SkyReels-A1 https://github.com/Skywork…...

编程日记 2026/3/20 1:12:25

【uniapp】在UniApp中实现持久化存储：安卓--生成写入数据为jsontxt

在移动应用开发中&#xff0c;数据存储是一个至关重要的环节。对于使用UniApp开发的Android应用来说&#xff0c;缓存&#xff08;Cache&#xff09;是一种常见的数据存储方式&#xff0c;它能够提高应用的性能和用户体验。然而&#xff0c;缓存数据在用户清除缓存或清除应用数…...

编程日记 2026/3/26 5:38:34

大白话React第十一章React 相关的高级特性以及在实际项目中的应用优化

假设我们已经对 React 前端框架的性能和可扩展性评估有了一定了解&#xff0c;接下来的阶段可以深入学习 React 相关的高级特性以及在实际项目中的应用优化&#xff0c;以下是详细介绍及代码示例&#xff1a; 1. React 高级特性的深入学习 1.1 React 并发模式&#xff08;Con…...

编程日记 2026/2/18 4:47:08

java容器 LIst、set、Map

Java容器中的List、Set、Map是核心数据结构&#xff0c;各自适用于不同的场景 一、List&#xff08;有序、可重复&#xff09; List接口代表有序集合&#xff0c;允许元素重复和通过索引访问&#xff0c;主要实现类包括&#xff1a; ArrayList 底层结构&#xff1a;动态数组…...

编程日记 2025/3/12 23:56:57

使用IDEA如何隐藏文件或文件夹

选择file -> settings 选择Editor -> File Types ->Ignored Files and Folders (忽略文件和目录) 点击号就可以指定想要隐藏的文件或文件夹...

编程日记 2026/3/16 20:37:51

DOM HTML：深入理解与高效运用

DOM HTML：深入理解与高效运用 引言 随着互联网的飞速发展，前端技术逐渐成为软件开发中的关键部分。DOM（文档对象模型）和HTML（超文本标记语言）是前端开发中的基石。本文将深入探讨DOM和HTML的概念、特性以及在实际开发中的应用，帮助读者更好地理解和使用这两项技术。 …...

编程日记 2025/3/25 21:57:19

形象生动讲解Linux 虚拟化 I/O

用现实生活的比喻和简单例子来解释 Linux 虚拟化 I/O&#xff0c;就像给朋友讲故事一样。 虚拟化 I/O 要解决什么问题&#xff1f; 想象你有一栋大房子&#xff08;物理服务器&#xff09;&#xff0c;想把它分割成多个小公寓&#xff08;虚拟机&#xff09;出租。每个租客&…...

编程日记 2025/5/24 7:46:50

git从零学起

从事了多年java开发&#xff0c;一直在用svn进行版本控制&#xff0c;如今更换了公司&#xff0c;使用的是git进行版本控制&#xff0c;所以打算记录一下git学习的点滴&#xff0c;和大家一起分享。 百度百科&#xff1a; Git&#xff08;读音为/gɪt/&#xff09;是一个开源…...

编程日记 2026/3/25 14:49:15

汽车低频发射天线介绍

汽车低频PKE天线是基于RFID技术的深度研究及产品开发应用的一种天线&#xff0c;在汽车的智能系统中发挥着重要作用&#xff0c;以下是关于它的详细介绍&#xff1a; 移动管家PKE低频天线结构与原理 结构&#xff1a;产品一般由一个高Q值磁棒天线和一个高压电容组成&#xff…...

编程日记 2026/3/27 4:55:16

【Java分布式】Nacos注册中心

Nacos注册中心 SpringCloudAlibaba 也推出了一个名为 Nacos 的注册中心&#xff0c;相比 Eureka 功能更加丰富&#xff0c;在国内受欢迎程度较高。 官网&#xff1a;https://nacos.io/zh-cn/ 集群 Nacos就将同一机房内的实例划分为一个集群&#xff0c;一个服务可以包含多个集…...

编程日记 2026/3/17 4:52:34

【C++】ImGui：极简化的立即模式GUI开发

如果你是GUI开发的新手&#xff0c;或想试试轻量级、易集成的GUI库&#xff0c;ImGui&#xff08;即时模式图形用户界面&#xff09;是个不错的选择。它以简洁的API、跨平台的兼容性和卓越的性能&#xff0c;受到许多开发者的喜爱。无论是为C项目添加调试界面&#xff0c;还是构…...

编程日记 2025/3/26 6:58:33

5G学习笔记之BWP

我们只会经历一种人生&#xff0c;我们选择的人生。 参考&#xff1a;《5G NR标准》、《5G无线系统指南:如微见著&#xff0c;赋能数字化时代》 目录 1. 概述2. BWP频域位置3. 初始与专用BWP4. 默认BWP5. 切换BWP 1. 概述 在LTE的设计中&#xff0c;默认所有终端均能处理最大2…...

编程日记 2026/3/26 2:46:04

1. 搭建前端+后端开发框架

1. 说明 本篇博客主要介绍网页开发中&#xff0c;搭建前端和后端开发框架的具体步骤&#xff0c;框架中所使用的技术栈如下&#xff1a; 前端&#xff1a;VUE Javascript 后端&#xff1a;Python Flask Mysql 其中MySQL主要用来存储需要的数据&#xff0c;在本文中搭建基本…...

编程日记 2025/4/28 6:44:58

深入浅出：插入排序算法完全解析

1. 什么是插入排序&#xff1f; 插入排序&#xff08;Insertion Sort&#xff09;是一种简单的排序算法&#xff0c;其基本思想与我们整理扑克牌的方式非常相似。我们将扑克牌从第二张开始依次与前面已排序的牌进行比较&#xff0c;将其插入到合适的位置&#xff0c;直到所有牌…...

编程日记 2026/2/12 7:45:21

（十一）基于vue3+mapbox-GL实现模拟高德实时导航轨迹播放

要在 Vue 3 项目中结合 Mapbox GL 实现类似高德地图的实时导航轨迹功能，您可以按照以下步骤进行： 安装依赖： 首先，安装 mapbox-gl 和 @turf/turf 这两个必要的库： npm install mapbox-gl @turf/turf引入 Mapbox GL： 在组件中引入 mapbox-gl 并初始化地图实例： <templ…...

编程日记 2026/3/18 3:58:15

DeepSeek到TinyLSTM的知识蒸馏

一、架构设计与适配 模型结构对比&#xff1a; DeepSeek&#xff08;教师模型&#xff09;&#xff1a;基于Transformer&#xff0c;多头自注意力机制&#xff0c;层数≥12&#xff0c;隐藏层维度≥768TinyLSTM&#xff08;学生模型&#xff09;&#xff1a;单层双向LSTM&#…...

编程日记 2026/2/6 15:00:32

【Transformer模型学习】第三篇：位置编码

文章目录 0. 前言1. 为什么需要位置编码&#xff1f;2. 如何进行位置编码&#xff1f;3. 正弦和余弦位置编码4. 举个例子4.1 参数设置4.2 计算分母项4.3 计算位置编码4.4 位置编码矩阵 5. 相对位置信息6. 改进的位置编码方式——RoPE6.1 RoPE的核心思想6.2 RoPE的优势 7. 总结 …...

编程日记 2026/3/18 7:27:11

微信小程序自定义导航栏实现指南

文章目录 微信小程序自定义导航栏实现指南一、自定义导航栏的需求分析二、代码实现1. WXML 结构2. WXSS 样式样式解析：3. JavaScript 逻辑三、完整代码示例四、注意事项与优化建议五、总结微信小程序自定义导航栏实现指南 在微信小程序开发中，默认的导航栏样式可能无法满足所…...

编程日记 2025/3/24 19:52:03