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

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

news 2025/8/3 12:41:30

目录

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/8/2 19:34:32

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/6/18 6:31:56

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/6/17 15:33:10

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/8/2 17:02:23

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/8/3 9:14:03

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/7/31 18:36:55

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/25 4:08:42

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/7/15 5:24:41

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/8/3 1:41:57

在 Spring Boot 项目里，MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

编程新知 2025/7/9 16:55:37