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

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

news 2026/2/8 20:21:09

目录

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设置字符…...

编程日记 2025/3/3 16:57:41

关于大型语言模型的结构修剪

本文介绍了一种名为 **LLM-Pruner** 的方法&#xff0c;用于对大型语言模型&#xff08;LLMs&#xff09;进行结构化剪枝&#xff0c;以减少模型大小和计算需求&#xff0c;同时保留其多任务解决和语言生成能力。LLM-Pruner 通过依赖检测和重要性估计实现高效剪枝&#xff0c;并…...

编程日记 2025/3/3 16:52:34

PostgreSQL 生产环境升级指南：pg_upgrade 快速完成版本升级！

前言 PostgreSQL 的版本号由主要版本号和次要版本号组成。例如&#xff0c;在 10.1 中&#xff0c;10 是主要版本&#xff0c;1 是次要版本。关于更多版本的规划&#xff0c;请参考 PostgreSQL 版本路线图。 版本号规则&#xff1a; PostgreSQL 10 及以后&#xff1a;版本号…...

编程日记 2025/3/3 16:41:20

Ubuntu2204下使用NVIDIA GeForce RTX 4090进行DeepSeek-R1-Distill-Llama-8B模型微调

Ubuntu2204下使用NVIDIA GeForce RTX 4090进行DeepSeek-R1-Distill-Llama-8B模型微调 环境准备创建Python微调环境准备数据集准备模型文件 模型微调模型预测原始模型预测微调模型预测 使用unsloth&#xff0c;可以方便地对大模型进行微调。以微调DeepSeek-R1-Distill-Llama-8B为…...

编程日记 2025/3/3 16:38:17

JAVA面试常见题_基础部分_mybatis面试题

1、什么是 MyBatis&#xff1f; 答&#xff1a;MyBatis 是一个可以自定义 SQL、存储过程和高级映射的持久层框架。 2、讲下 MyBatis 的缓存答 &#xff1a;MyBatis 的缓存分为一级缓存和二级缓存,一级缓存放在 session 里面,默认就有,二级缓存放在它的命名空间里,默认是不打…...

编程日记 2025/3/3 16:37:14

RISC-V汇编学习（一）—— 基础认识

最近这三年的工作时间大部分的工作&#xff0c;都是基于riscv的cpu和接口ip开发适配驱动&#xff0c;时不时的就要debug测试代码&#xff0c;面对很多都是汇编&#xff0c;所以也是整理下积累的一点点笔记&#xff0c;系列博客将总结下riscv相关的内容&#xff0c;一是给有需要…...

编程日记 2025/3/3 16:31:06

【Delphi】如何解决使用webView2时主界面置顶，而导致网页选择文件对话框被覆盖问题

一、问题描述&#xff1a; 在Delphi 中使用WebView2控件&#xff0c;如果预先把主界面置顶&#xff08;Self.FormStyle : fsStayOnTop;&#xff09;&#xff0c;此时&#xff0c;如果在Web页面中有使用&#xff08;<input type"file" id"fileInput" acc…...

编程日记 2025/3/3 16:30:05

基于POI的Excel下拉框自动搜索，包括数据验证的单列删除

目录 目标 例子 1.搜索下拉框页 2.数据源页 3.效果 代码以及注意事项 1.代码 2.注意事项 1.基于Excel的话&#xff0c;相当于加入了一个【数据验证】 2.代码中的一些方法说明 目标 期望在Excel利用代码创建具备自动搜索功能的下拉框 例子 1.搜索下拉框页 2.数据源…...

编程日记 2025/3/3 16:27:00

基金 word--＞pdf图片模糊的解决方法

1. 首先需要Adobe或福昕等pdf阅读器。 2. word中 [文件]--[打印]&#xff0c;其中打印机选择pdf阅读器&#xff0c;例如此处我选择福昕阅读器。 3. 选择 [打印机属性]--[编辑]--[图像]&#xff0c;将所有的采样、压缩均设置为 关闭。点击[另存为]&#xff0c;保存为 基金报告…...

编程日记 2025/3/3 16:25:59

React底层原理详解

React中Element&Fiber对象、WorkInProgress双缓存、Reconcile&Render&Commit、第一次挂载过程详解 在面试中介绍React底层原理时&#xff0c;需遵循逻辑清晰、层次分明、重点突出的原则&#xff0c;结合技术深度与实际应用场景。以下是结构化回答模板&#xff1a;…...

编程日记 2025/3/3 16:22:56

Word 插入图片会到文字底下解决方案

一、现象描述 正常情况下&#xff0c;我们插入图片都是这样的。 但有时突然会这样&#xff0c;插入的图片陷于文字底部。 二、网上解决方案 网上有教程说&#xff0c;修改图片布局选项&#xff0c;从嵌入型改成上下型环绕。改完之后确实有用&#xff0c;但是需要手动拖动图片…...

编程日记 2025/3/3 16:21:54

基于DeepSeek 的图生文最新算法 VLM-R1

目录 一、算法介绍 二 算法部署 三 模型下载 四 算法测试 五 可视化脚本 一、算法介绍 VLM-R1：稳定且可通用的 R1 风格大型视觉语言模型 自从 Deepseek-R1 推出以来，出现了许多专注于复制和改进它的作品。在这个项目中，我们提出了 VLM-R1，一种稳定且可通用的 R1 风格…...

编程日记 2025/3/3 16:17:50

Composer如何通过GitHub Personal Access Token安装私有包：完整教程

使用Composer安全管理您的PHP私有依赖包 一、前言 在PHP开发中&#xff0c;我们经常需要将内部工具包托管为私有仓库。传统的账号密码验证方式存在安全隐患&#xff0c;而GitHub Personal Access Token&#xff08;PAT&#xff09;提供了一种更安全的鉴权方案。本文将通过4个…...

编程日记 2025/3/3 16:14:46

postgresql postgis扩展相关

项目 下载地址 http://rpmfind.net/linux/rpm2html/search.php?queryprotobuf(x86-64) Postgis Index of /postgis/source/ proj4 Index of /proj/ geos Index of /geos/ libxml2 ftp://xmlsoft.org/libxml2/ Index of /sources Json-c Releases json-c/json-c G…...

编程日记 2025/3/3 16:13:45

基于Python Django的人脸识别上课考勤系统（附源码，部署）

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

编程日记 2025/3/3 16:10:40

神经网络之RNN和LSTM（基于pytorch-api）

1.RNN 1.1简介 RNN用于处理序列数据。在传统的神经网络模型中&#xff0c;是从输入层到隐含层再到输出层&#xff0c;层与层之间是全连接的&#xff0c;每层之间的节点是无连接的。但是这种普通的神经网络对于很多问题却无能无力。例如&#xff0c;你要预测句子的下一个单词是…...

编程日记 2025/3/3 16:09:39

leetcode第39题组合总和

原题出于leetcode第39题https://leetcode.cn/problems/combination-sum/description/题目如下&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以…...

编程日记 2025/3/3 16:08:37

【UI设计——视频播放界面分享】

视频播放界面设计分享 在本次设计分享中&#xff0c;带来一个视频播放界面的设计作品。 此界面采用了简洁直观的布局。顶部是导航栏&#xff0c;包含主页、播放、搜索框等常见功能&#xff0c;方便用户快速找到所需操作。搜索框旁输入 “萌宠成长记”&#xff0c;体现了对特定内…...

编程日记 2025/3/3 16:05:34

动态规划刷题

文章目录 动态规划三步问题题目解析代码 动态规划 1. 状态表示&#xff1a;dp[i]&#xff0c;表示dp表中i下标位置的值 2. 状态转移方程&#xff1a;以i位置位置的状态&#xff0c;最近的一步来划分问题&#xff0c;比如可以将状态拆分成前状态来表示现状态&#xff0c;dp[i] …...

编程日记 2025/3/3 15:56:19

stm32week5

stm32学习 二.外设 14.串口发送数据包 数据包的定义&#xff1a; HEX数据包(以0xFF为包头&#xff0c;0xFE为包尾&#xff0c;实际上可自定义)&#xff1a; 固定包长&#xff0c;含包头包尾可变包长&#xff0c;含包头包尾 对于数据中不会出现包头包尾的数据可以用可变包长…...

编程日记 2025/3/3 15:55:17

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2026/2/4 22:38:49

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2026/1/27 5:01:54

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2026/1/29 8:41:55

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2026/2/6 6:02:51