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

前端零基础学习Day-Eight

news 来源：原创 2025/5/26 5:52:25

CSS字体和文本样式

CSS文字样式

字体：font-family
- 语法：font-family:[字体1][,字体2][,…]
  - p{font-family:“微软雅黑”,“宋体”,“黑体”;}
- 含空格字体名和中文，用英文引号括起
- 属性值：具体字体名，字体集
  - 字体集：Serif,Sans-serif,Monospace,Cursive,Fantasy
  - p{font-family:“微软雅黑”,“宋体”,“黑体”,sans-serif;}
- 多个字体，用英文逗号隔开
- 引号嵌套，外使用双引号，内使用单引号
  - 如行内样式

文字大小：font-size
- 语法：font-size:绝对单位|相对单位
- 绝对单位：
  
  属性值
  
  说明
  
  in
  
  英寸，1英寸=2.54厘米
  
  cm
  
  1厘米=0.394英寸
  
  mm
  
  毫米
  
  pt
  
  磅，印刷的点数，72磅=1英寸
  
  pc
  
  Pica，1pc=12pt
  
  属性值
  
  CSS2缩放系数1.2
  
  xx-small
  
  9px
  
  x-small
  
  11px
  
  small
  
  13px
  
  medium
  
  16px
  
  large
  
  19px
  
  x-large
  
  23px
  
  xx-large
  
  28px
  - 当不设置字体大小时，默认为浏览器默认值，一般默认字体是16px
  - 绝对大小，不能随浏览器分辨率或父元素大小的改变而改变
- 相对单位：
  - px像素
  - em/% （相对值）都是针对父元素
  - 文字大小受显示器分辨率影响
  - 属性值larger：相对父元素的文字大小变大
  - 属性值smaller：相对父元素的文字大小变小

文字颜色：color
- 语法：color:颜色名|十六进制|RGB
  - 十六进制:#000000
    - 每一位值：0~F
    - 简写，#008800可简写成#080
    - 不区分大小写，大写A和小写a效果一样
    - Web安全色：www.bootcss.com/p/websafecolors/
  - RGB(红，绿，蓝)：rgb(250,250,250)、rgb(50%,50%,50%)
    - 数字：0~255，小于0会修正成0，大于255会修正成255
    - 百分比：0%~100%，小于0%会修正成0%，大于100%会修正成100%

文字粗细：font-weight
- HTML语法：标签，标签
- 语法：font-weight:normal | bold | bolder | lighter | 100~900
- 默认值：normal
- 400等同于normal，700等同于bold

文字样式：font-style
- HTML语法设置斜体：标签，标签
- 语法：font-style:normal | italic(常用) | oblique

字体变形：font-variant
- 设置元素中文本为小型大写字母
- 语法：font-variant:normal | small-caps

font属性（简写）
- 语法：font:font-style font-variant font-weight font-size/line-helight(行高) font-family
- 值之间空格隔开
- 同时设置font-size和font-family，属性才会起作用
- 注意书写顺序
- font-italic bold small-caps 50px “黑体”,“宋体”;

CSS文本样式

水平对齐方式：text-align
- 设置元素内内联元素（如文本和图片）的水平对齐方式
- text-align:left | right | center | justify
- 图片居中(设置图片的对齐方式，需要设置图片父元素的text-align属性)：
  - 错误方法：img{text-align:center;}
  - 正确方法：div{text-align:center;}
- CSS text-align属性并不控制块级元素的对齐方式，它控制块级元素里面的内联元素的对齐方式。虽然这个属性的名称为text-align，但是块级元素中的所有内联元素都会被这个属性影响。

行高：line-height
- 设置元素中文本行高
- 语法：line-height:长度值 | 百分比
- 设置px时行高不会因字体大小改变而改变，而em和%于字体大小有关系
- 实际开发中一般使用em这个单位
- 浏览器有默认行高，不同浏览器默认行高不一样
- 行高可继承，继承的是计算后的值，而不是直接把em或%的值继承过来

垂直方式vertical-align属性
- 设置元素内容的垂直方式
- 语法：vertical-align:baselline | sub(下标) | super(上标) | top | text-top | middle | bottom | text-bottom
  
  vertical-align：长度 | 百分比
  - 基于文本基线移动
  - 上移：vertical-align:15px;
    
    vertical-align:100%;
  - 下移：vertical-align:-15px;
    
    vertical-align:-100%;
- 对行内元素生效，对于块级元素不生效
- 文字基线
- 也可应用于单元格元素

单行文字垂直水平居中：
- 设置行高
- text-align：center;
多行文字垂直水平居中

文本样式属性：

字体属性

说明

word-spacing

设置元素内单词之间间距

letter-spacing

设置元素内字母之间间距

text-transform

设置元素内文本的大小写 capitalize(首字母大写) | uppercase(大写) | lowercase(小写) | none

text-decoration

设置元素内文本的装饰 underline(上划线) | overline(下划线) | line-through(贯穿线) | blink(闪烁效果，有兼容性问题) | none

间距属性值可以是正值也可以是负值，可以使用px也可以使用em

可以设置多个装饰样式属性值，中间用空格隔开

前端零基础学习Day-Eight

CSS字体和文本样式 CSS文字样式字体：font-family 语法：font-family:[字体1][,字体2][,…] p{font-family:“微软雅黑”,“宋体”,“黑体”;} 含空格字体名和中文，用英文引号括起属性值：具体字体名，字体集字体集&…...

编程日记 2025/5/26 5:52:25

在Vue3中实现文件上传功能，结合后端API

随着现代Web应用程序的不断发展，文件上传成为了用户交互中不可或缺的一部分。在本篇博客中，我们将深入讨论如何在Vue3中实现一个文件上传功能，并与后端API进行交互。我们将使用Vue3的Composition API（setup语法糖）来构…...

编程日记 2025/5/26 5:10:27

智慧商城：点击“加入购物车”判断是否登录来进行跳转到登录页登录并回跳 + 发请求渲染加入购物车数量的角标

点击“加入购物车”判断是否登录来进行跳转到登录页登录并回跳按需引入需要的 Dialog 组件并进行全局注册 Vue.use( )仅仅在Vue组件的上下文中起作用，所以在Vue组件中通过 this.$ 来使用在 js 文件中则还要导入，然后直接使用，并不需要 this…...

编程日记 2025/5/26 5:12:08

植物大战僵尸杂交版v3.0.2最新版本（附下载链接）

B站游戏作者潜艇伟伟迷于12月21日更新了植物大战僵尸杂交版3.0.2版本！！！，有b站账户的记得要给作者三连关注一下呀！ 不多废话下载链接放上： 夸克网盘链接：：https://pan.quark.cn/s/5c…...

编程日记 2025/5/24 2:01:25

后端统一接口返回状态【初步模板】

后端统一接口返回状态【模板】文章目录后端统一接口返回状态【模板】1 .Result类编写2 .Constants类编写3 .更改Controller层下的类return格式开发过程中，每个接口的返回格式设计都是一样的，这样可以大大提高开发效率。项目结构如下图：分…...

编程日记 2025/5/22 15:56:25

QML Text组件

文章目录前言主体基本文本显示字体和样式富文本支持长文本的处理文本样式与效果超链接Label 元素总结前言在 QML 中，Text 和 Label 是常用的文本显示元素，它们在显示文本方面具有相似性，但在功能和定制性上也存在一些差异。Text 元素用于…...

编程日记 2025/5/24 10:53:13

cv2.addWeighted用法详解

cv2.addWeighted 是 OpenCV 中用于图像加权叠加的函数，常用于将两张图像按一定比例融合在一起。它通过对两张图像的像素进行加权和求和的操作，可以实现透明度调整、图像混合、图像融合等效果。函数定义 cv2.addWeighted(src1, alpha, src2, beta, gam…...

编程日记 2025/5/22 4:48:27

基于微信小程序的消防隐患在线举报系统

博主介绍：java高级开发，从事互联网行业六年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了多年的设计程序开发，开发过上千套设计程序，没有什么华丽的语言，只有实…...

编程日记 2025/5/25 9:33:59

SQL36查找后排序 select device_id,age from user_profile order by age asc #select [字段1,字段2] from [表名] order by [字段1] [升序(asc)/降序(desc)],[字段2] [升序(asc)/降序(desc)] #select：查询 #order by 排序每日问题如何实现对象的克隆&#xff1…...

编程日记 2025/5/25 5:54:54

Dart 中的构造函数

在 Dart 中，类的构造函数用于初始化类的对象。当你创建一个类的实例时，构造函数被自动调用。Dart 支持多种构造函数的写法，包括常规构造函数、命名构造函数、工厂构造函数等。一、传统构造函数默认构造函数是没有名字的构造函数&#xff…...

编程日记 2025/5/23 18:40:12

实现 WebSocket 接入文心一言

目录什么是 WebSocket？ 为什么需要 WebSocket？ HTTP 的局限性 WebSocket 的优势总结：HTTP 和 WebSocket 的区别 WebSocket 的劣势 WebSocket 常见应用场景 WebSocket 握手过程 WebSocket 事件处理和生命周期 WebSocket 心跳机制 …...

编程日记 2025/5/26 6:08:35

GO--堆（have TODO）

堆堆（Heap）是一种特殊的数据结构。它是一棵完全二叉树（完全二叉树是指除了最后一层外，每一层上的节点数都是满的，并且最后一层的节点都集中在左边），结放在数组（切片）中…...

编程日记 2025/4/22 18:46:12

【Python随笔】Enigma密码机的原理及python代码实现

最近笔者接触到了Cypher这款游戏，玩法很简单，就是通过文字、图片等各种表达手段组成的谜面，猜一段英文，算是初步接触了密码学的一些知识。游戏中提到了很多类型的密码，其中Enigma密码机就是单独一种，在电影…...

编程日记 2025/5/26 0:15:28

二叉树 -- 堆（详解）

目录 1、堆的概念及结构 2、堆的实现(附代码) 2.1、向下调整算法建堆 3、堆的应用(附代码) 3.1、堆排序 3.2、TOP-K问题 1、堆的概念及结构如果有一个关键码的集合K { k0，k1 ，k2 ，…，k(n-1) }，把它的所有元素…...

编程日记 2025/5/26 6:15:05

gradle项目下载依赖报错

报错信息 Cannot resolve external dependency org.projectlombok:lombok:1.18.36 because no repositories are defined. Required by:project :Possible solution:- Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/…...

编程日记 2025/5/24 3:16:47

WPS怎么都无法删除空白页_插入空白页一次插入两张?_插入横屏空白页_横屏摆放图片_这样解决_显示隐藏段落标记---WPS工作笔记001

在wps使用的过程中你们有没有碰到过这种问题,就是,我贴图,因为图片太大,我需要把图片,横屏显示,这个时候我需要插入一个空白页,那么,在空白菜单下,点击,有时候会点击插入空白页,会一下子自动插入两张空白页.而且,怎么删除都删除不掉. 都快疯掉了. 网上搜索也没有找到好的方法,后…...

编程日记 2025/5/25 17:45:17

flask before_request 请求拦截器返回无值则放行，有值则拦截

环境 Python 3.11.5 Flask 2.2.2完整代码如下： from flask import Flask, make_response, Blueprintapp Flask(__name__) user_blue Blueprint(user, __name__, url_prefix/api/user) user_blue.before_request def befor…...

编程日记 2025/5/22 20:12:37

前端XMLHttpRequest get请求能不能在body中传参数？

文档查看mdn文档，文档XMLHttpRequest.send()有提到： XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。测试一个简单的nodejs服务器 var…...

编程日记 2025/5/26 5:42:03

C语言的函数指针

介绍案例什么是函数指针？ 函数指针是指向函数的指针变量，它可以用来间接调用函数。在 C/C 中，函数指针允许程序在运行时选择调用不同的函数，这使得代码更加灵活和动态。函数指针广泛应用于回调函数、事件处理、动态选择算法等…...

编程日记 2025/5/25 21:04:34

网络安全的学习方向和路线是怎么样的？

石器时代第一个阶段——石器时代，针对的是纯新手小白刚刚入场。在这个阶段，主要是打基础，需要学习的有五部分内容： Windows Windows上基础的一些命令、PowerShell的使用和简单脚本编写，以及Windows以后经常会打交道…...

编程日记 2025/5/21 17:25:49

酒蒙子骰子小程序系统

酒蒙子流量变现小程序小游戏后端tp8 前端uniapp 会员变现分销推广流量主 …...

编程日记 2025/5/26 6:26:22

html+css网页设计美食餐饮杰12个页面

htmlcss网页设计美食餐饮杰12个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作）。获取源码 1&#xff…...

编程日记 2025/5/26 6:18:17

【济大期末数据库】SQL语法速成

目录 SQL分类 DDL 概念语法操作数据库： 1.查询所有数据库 2.查询当前数据库 3.创建数据库 4.删除数据库 5.切换数据库操作数据库内的表： 1.查询当前数据库所有表 2.查看指定表结构 3.创建表 DML 概念语法增（INSERT&am…...

编程日记 2025/5/26 5:07:24

WeakAuras NES Script（lua）

WeakAuras NES Script 修星脚本字符串脚本1：NES !WA:2!TMZFWXX1zDxVAs4siiRKiBN4eV(sTRKZ5Z6opYbhQQSoPtsxr(K8ENSJtS50(J3D7wV3UBF7E6hgmKOXdjKsgAvZFaPTtte0mD60XdCmmecDMKruyykDcplAZiGPfWtSsag6myGuOuq89EVDV9wPvKeGBM7U99EFVVVV33VFFB8Z2TJ8azYMlZj7Ur3QDR(…...

编程日记 2025/5/23 10:18:01

国内网络在Ubuntu 22.04中在线安装Ollama并配置Open-WebuiDify

配置docker科技网络登录后复制创建或编辑 Docker 配置文件让docker使用代理： sudo mkdir /etc/systemd/system/docker.service.d -p sudo vim /etc/systemd/system/docker.service.d/http-proxy.conf 文件，并添加以下内容： [Service] En…...

编程日记 2025/5/26 6:05:41

SQL 插入数据详解

本文介绍如何利用 SQL 的 INSERT 语句将数据插入表中。 1. 数据插入顾名思义，INSERT 用来将行插入（或添加）到数据库表。插入有几种方式： 插入完整的行；插入行的一部分；插入某些查询的结果。下面逐一介…...

编程日记 2025/5/26 5:29:23

中小学教室多媒体电脑安全登录解决方案

中小学教室多媒体电脑面临学生随意登录的问题，主要涉及到设备使用、网络安全、教学秩序等多个方面。以下是对这一问题的详细分析： 一、设备使用问题 1. 设备损坏风险学生随意登录可能导致多媒体电脑设备过度使用，增加设备损坏的风险。不当…...

编程日记 2025/5/22 22:27:46

Element@2.15.14-tree checkStrictly 状态实现父项联动子项，实现节点自定义编辑、新增、删除功能

背景：现在有一个新需求，需要借助树结构来实现词库的分类管理，树的节点是不同的分类，不同的分类可以有自己的词库，所以父子节点是互不影响的；同样为了选择的方便性，提出了新需求，选择…...

编程日记 2025/5/26 6:31:02

Pycharm和Jupyter Notebook的比较【笔记】

1、Pycharm 特点： （1）集成开发环境（IDE）：提供了丰富的功能，如代码自动补全、错误检查、调试工具等。 （2）项目管理：支持大型项目的管理和组织，适合…...

编程日记 2025/5/25 19:28:40

MongoDB（下）

MongoDB 索引 MongoDB 索引有什么用? 和关系型数据库类似，MongoDB 中也有索引。索引的目的主要是用来提高查询效率，如果没有索引的话，MongoDB 必须执行集合扫描 ，即扫描集合中的每个文档，以选择与查询语句匹配的文…...

编程日记 2025/5/22 6:52:38

AI Agent与MEME：技术与文化融合驱动Web3创新

AI Agent如何引领Web3新时代？ 随着Web3与区块链技术的迅速发展，AI Agent作为人工智能与区块链的交汇点，正在逐步成为推动去中心化生态的重要力量。同时，MEME文化凭借其强大的社区驱动力和文化渗透力，在链上生态中扮演着…...

编程日记 2025/5/26 6:16:47

前端如何将pdf等文件传入后端

我们知道在js中我们可以通过： <input type"file" name"file" id"fileInput" accept"image/*">来输入文件。其中type指后端url，accept来限制传入类型。前端通过表单形式将其传入后端那么前端是怎么将…...

编程日记 2025/5/21 17:31:49

山景BP1048蓝牙音频任务后台运行设置方法

1、问题山景BP1048提供的蓝牙音箱SDK蓝牙音频是不能在后台运行的。例如：现在进入U盘模式播放蓝牙音乐，那么此时蓝牙就会关闭。但是在特定场景下，需要蓝牙保持连接。 2、解决办法打开sys_param.c文件 #include <string.h> #incl…...

编程日记 2025/5/21 4:10:28

【服务器】服务器进程运行不受本地终端影响的方法总结

服务器进程运行不受本地终端影响的方法总结 1. 使用 nohup2. 使用 setsid3. 将命令放入后台 (&)总结参考为了确保在集群或服务器上运行的长时间作业不受本地计算机网络中断或用户注销的影响，可以使用以下三种方法：nohup、setsid 和将命令放入后台 (…...

编程日记 2025/5/24 10:53:14

[数据结构] 链表

目录 1.链表的基本概念 2.链表的实现 -- 节点的构造和链接节点如何构造? 如何将链表关联起来? 3.链表的方法(功能) 1).display() -- 链表的遍历 2).size() -- 求链表的长度 3).addFirst(int val) -- 头插法 4).addLast(int val) -- 尾插法 5).addIndex -- 在任意位置…...

编程日记 2025/5/22 4:44:19

WPF DataTemplate 数据模板

DataTemplate 顾名思义，数据模板，在 wpf 中使用非常频繁。它一般用在带有 DataTemplate 依赖属性的控件中，如 ContentControl、集合控件 ListBox、ItemsControl 、TabControls 等。 1. 非集合控件中使用 <UserControl.Resources>&l…...

编程日记 2025/5/25 9:53:09

本地计算机上的MySQL服务启动后停止（connection refused: connect）解决一系列数据库连接不上的问题

推荐其他可能可以解决的博客： 【完美解决】mysql启动不了:本地计算机上的MySQL服务启动后停止-CSDN博客 1. 查看自己的mysql服务是否启动了，如果启动后又关闭了就使用下面这种方法我是使用重新安装 MySQL 服务解决的如果服务依然启动失败&#xf…...

编程日记 2025/5/21 14:32:39

前端使用 Konva 实现可视化设计器（20）- 性能优化、UI 美化

这一章主要分享一下使用 Konva 遇到的性能优化问题，并且介绍一下 UI 美化的思路。至少有 2 位小伙伴积极反馈，发现本示例有明显的性能问题，一是内存溢出问题，二是卡顿的问题，在这里感谢大家的提醒。请大家动动小手&a…...

编程日记 2025/5/26 5:40:25

ECharts平行坐标系-营养结构(平行坐标)-3，附视频讲解与代码下载

引言： 平行坐标系（Parallel Coordinates）是可视化高维几何和分析多元数据的常用方法。它通过在n维空间中显示一组点，绘制由n条平行线组成的背景（通常是垂直且等距的），并将描述不同变量的各点连…...

编程日记 2025/5/26 2:06:17

蓝桥杯刷题——day8

蓝桥杯刷题——day8 题目一题干解题思路代码题目二题干解题思路代码题目一题干 N 架飞机准备降落到某个只有一条跑道的机场。其中第i架飞机在 Ti时刻到达机场上空，到达时它的剩余油料还可以继续盘旋 Di个单位时间，即它最早可以于 Ti时刻开始降落&am…...

编程日记 2025/5/23 8:58:13

WPF ControlTemplate 控件模板

区别于 DataTemplate 数据模板，ControlTemplate 是控件模板，是为自定义控件的 Template 属性服务的，Template 属性类型就是 ControlTemplate。演示， 自定义一个控件 MyControl，包含一个字符串类型的依赖属性。 pub…...

编程日记 2025/5/19 0:55:27

【Git 常用操作：pull push】

Git 基本概念 Git 是一个先进的开源的分布式版本控制系统，常用于管理工作内容、项目代码等功能。 Git 工作流程图片来源：https://www.runoob.com/git/git-basic-operations.html 说明： workspace：工作区staging area&#xff…...

编程日记 2025/5/22 14:21:13

初学stm32 --- 系统时钟配置

众所周知，时钟系统是 CPU 的脉搏，就像人的心跳一样。所以时钟系统的重要性就不言而喻了。 STM32 的时钟系统比较复杂，不像简单的 51 单片机一个系统时钟就可以解决一切。于是有人要问，采用一个系统时钟不是很简单吗？为…...

编程日记 2025/5/23 10:30:28

基于SpringBoot的图书管理系统（源码+数据库+报告）

一、项目介绍 358基于SpringBoot的图书管理系统，系统包含两种角色：管理员、用户,系统分为前台和后台两大模块二、项目技术编程语言：Java 数据库：MySQL 项目管理工具：Maven 前端技术：Vue 后端技术&#x…...

编程日记 2025/5/25 8:14:00

物理信息神经网络（PINN）八课时教案

物理信息神经网络（PINN）八课时教案第一课：物理信息神经网络概述 1.1 PINN的定义与背景物理信息神经网络（Physics-Informed Neural Networks，简称PINN）是一种将物理定律融入神经网络训练过程中的先进方…...

编程日记 2025/5/25 14:46:13

APM32F411使用IIS外设驱动es8388实现自录自播

前言： 从零开始学习I2s外设，配置Es8288寄存器实现录音播放。本文章使用主控芯片是APM32F411系类。音频相关的概念比较多，就不再次做过多的介绍，本文章只是简单实现边录边播功能。APM系类兼容st的芯片，所以用st的hal库来…...

编程日记 2025/5/25 7:30:03

flink SQL实现mysql source sink

接上文：一文说清flink从编码到部署上线环境说明：MySQL：5.7；flink：1.14.0；hadoop：3.0.0；操作系统：CentOS 7.6；JDK：1.8.0_401。 1.代码实现 1.1 E…...

编程日记 2025/5/19 7:10:11

【C#】实现Json转Lua (Json2Lua)

关键词: C#、JsonToLua、Json2Lua、对象序列化Lua 前提需引入NewtonsofJson，引入方法可先在Visual Studio 2019 将Newtonsoft.Json.dll文件导入Unity的Plugins下。 Json格式字符串转Lua格式字符串，效果如下： json字符串 {"1": &q…...

编程日记 2025/5/24 9:14:02

使用 Vue3 实现摄像头拍照功能

参考资料:MediaDevices.getUserMedia() - Web API | MDN 重要: navigator.mediaDevices.getUserMedia 需要在安全的上下文中运行。现代浏览器要求摄像头和麦克风的访问必须通过 HTTPS 或 localhost（被视为安全的本地环境）进行,如果上传服务器地址是http…...

编程日记 2025/5/22 7:28:43

ARM学习（38）多进程多线程之间的通信方式

ARM学习（38）ARM学习（38）多进程多线程之间的通信方式一、问题背景笔者在调试模拟器的时候，碰到进程间通信的问题，一个进程在等另外一个进程ready的时候，迟迟等不到，然后通过调试发现，另外一个进程变量已经变化了，但是当前进程变量没变化，需要了解进程间通信的方式…...

编程日记 2025/5/25 18:15:24

CSS字体和文本样式

CSS文字样式

CSS文本样式

相关文章：