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

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

news 2026/2/8 22:30: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设置字符…...

编程日记 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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/2/5 17:51:52

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/2/6 1:00:25

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09