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

认识CSS值如何提高写前端代码的效率

news 2026/3/28 1:17:32
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS一些提升写前端代码的效率。知识学习内容来自b站的@黑马程序员的视频

😃1 学习Emmet语法

所谓的Emmet语法，就是帮助我们快速生成前端代码的一些语法。利用它就可以提高我们写前端代码的效率。

适用语言：HTML、CSS。这两个都有对应的Emmet语法快速生成相应代码。

如何使用：在Vscode中已经自动集成了这个语法，只要按照对应的语法规则写代码就可以实现。

😄1.1 Emmet语法快速生成HTML结构

生成某一个标签：直接输入标签名然后按tab键

生成多个同一类型标签：输入标签名然后*数字即可

如果要生成有父子关系的几个标签，用 > 连接即可。如ul > li

如果是要生成并列的几个标签，用 + 即可。如div + p

如果要让标签带类名或者id名字，写标签名 + .类名或者标签名+#id名。如div.leiming、p#idming

😄1.2 Emmet语法快速生成CSS样式

CSS中只要输入属性的简写+属性值即可。

例如：width：200px只要输入w200 | height：600px只要输入h600 | line-height：16px只要输入lh16即可。

更多的需要自己在实战中多积累经验，但是记住一般是属性简写+属性值就可以

😃2 快速格式化代码

格式化代码就是写的代码看上去比较乱，需要快速整理成推荐的格式。那么这里Vscode的快捷键就是Shift + Alt + F。不同编辑器可能不太一样，这里推荐用Vscode。

😄2.1 自动格式化代码

所谓自动格式化代码就是每次写完代码进行保存后，页面会自动的格式化代码，我们连快捷键都不需要按。这里依旧以Vscode为例，介绍如何实现：

找到设置，输入formation，然后勾选如下设置即可

相关文章：

认识CSS值如何提高写前端代码的效率

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简…...

编程日记 2023/4/15 4:05:49

MySQL知识点全面总结3：Mysql高级篇

三.MySQL知识点全面总结3：mysql高级篇 1.mysql语句的执行过程？ 2.myesql事务详解？ 3.mysql日志详解？ 4.mysql的索引功能详解？ 5.mysql的存储引擎详解？ 6.mysql事务提交后数据与硬盘如何交互存储&…...

编程日记 2023/4/15 4:05:44

Spring注解开发之组件注册(二)

Spring注解开发之组件注册(一) 5.Import 给容器导入一个组件 给容器中注册组件 一、包扫描 组件标注注解（Controller/Service/Repository/Component） [自己写的类] 二、Bean [导入的第三包里面的组件] 三、Import [快速给容器中导入组件] (Import{…...

编程日记 2023/4/14 11:17:07

【web前端开发】CSS最常用的11种选择器

文章目录1.CSS介绍2.CSS的语言规则3.CSS的引入方式4.选择器标签选择器类选择器id选择器通配符选择器复合选择器后代选择器子代选择器并集选择器交集选择器伪类选择器hover伪类选择器active伪类选择器结构伪类选择器结语1.CSS介绍 CSS (Cascading Style Sheets，层叠样…...

编程日记 2023/4/14 6:18:50

微电影广告发展的痛点

微电影广告以不可阻挡之势进入大众生活中，企业利用微电影广告来进行企业形象塑造的例子比比皆是。于是乎，微电影广告在为企业塑造品牌形象方面上取得了可喜的效果，但也不可忽视，在这个发展过程中，微电影广告所面临的问…...

编程日记 2023/4/15 4:05:37

uniapp新手入门

前言： 这篇文章主要写的是uniapp的基础知识，可以让大家快速上手uniapp，同时避掉一些可能踩到的坑。 一. 什么是uniapp uniapp是由dcloud 公司开发的多端融合框架。uniapp的出现让我们的开发更为方便，一次开发，多端运行…...

编程日记 2023/4/15 4:05:29

linux segfault at 问题定位实践

问题：程序崩溃，打印为：app[13016]: segfault at 7fb668d29930 ip 00007fb668d3c23c sp 00007fb668e7de20 error 7 in mydefine.so[7fb668d3400011000]定位步骤：基础分析数据，大概了解反馈信息（根据chatGPT&…...

编程日记 2023/4/15 4:05:20

SpringCloud+SpringCloudAlibaba

架构的演进1.1单体架构将所有业务场景的表示层、业务逻辑层和数据访问层放在一个工程中，最终经过编译、打包，部署在一台服务器上。◆ 1.1.1单体架构的优点1）部署简单: 由于是完整的结构体，可以直接部署在一个服务器上即可。2&…...

编程日记 2023/4/15 4:05:13

华为OD机试 - 路灯照明（C 语言解题）【独家】

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧文章目录 使用说明本期题目：路灯照明…...

编程日记 2023/4/15 4:05:02

Linux程序替换

Linux程序替换创建子进程的目的？程序替换如何实现程序替换？什么是程序替换？先见一见单进程版本的程序替换程序替换原理多进程版本的程序替换execl函数组简易版Shell创建子进程的目的？ 目的:为了帮助父进程完成一些特定的任务&…...

编程日记 2023/4/15 4:04:54

@JsonFormat @DataTimeFormat 时间格式

省流：用JsonFormat即可有时候会看到入参dto里，在时间类型的变量上用DateTimeFormat，代码如下。public class XXXdto{DateTimeFormat(pattern "yyyy-MM-dd hh:mm:ss")private Date startDate; }这是为了入参传日期格式的值。即前端…...

编程日记 2023/4/15 4:04:43

带你玩转modbusTCP通信

modbus TCP Modbus TCP是一种基于TCP/IP协议的Modbus通信协议，它是Modbus协议的一种变体，用于在以太网上进行通信。Modbus TCP协议是一种开放的通信协议，它支持多种编程语言和操作系统，并且可以在不同的硬件和软件平台上进行通信…...

编程日记 2023/4/15 4:04:33

2021牛客OI赛前集训营-提高组（第三场）T2交替

2021牛客OI赛前集训营-提高组（第三场） 题目大意 一个长度为nnn的数组aaa，每秒都会变成一个长度为n−1n-1n−1的新数组a′aa′，其变化规则如下 如果当前数组aaa的大小nnn为偶数，则对于新数组a′aa′的每一个位置i(1≤…...

编程日记 2023/4/15 4:04:23

论文投稿指南——中文核心期刊推荐（金融）

【前言】 🚀 想发论文怎么办？手把手教你论文如何投稿！那么，首先要搞懂投稿目标——论文期刊 🎄 在期刊论文的分布中，存在一种普遍现象：即对于某一特定的学科或专业来说，少数期刊所含…...

编程日记 2023/4/15 14:24:05

华为OD机试 - 不等式（C 语言解题）【独家】

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理 已参加机试人员的实战技巧文章目录 使用说明本期题目：不等式题…...

编程日记 2023/4/15 14:24:03

90后老板用低代码整顿旅行社，创2000万年收，他是怎么做到的？（真实）

热爱旅游的92年成都小伙猴哥，大学毕业后开了一家旅行社，主要从事川藏、云南定制游服务。 从今年春节开始，国内各地旅游业开始复苏，向旅行社打电话咨询的人越来越多。 旅游的人多是好事，也是一种烦恼，因为…...

编程日记 2023/4/15 14:24:02

Apache Dubbo 存在反序列化漏洞（CVE-2023-23638）

漏洞描述 Apache Dubbo 是一款轻量级 Java RPC 框架 该项目受影响版本存在反序列化漏洞，由于Dubbo在序列化时检查不够全面，当攻击者可访问到dubbo服务时，可通过构造恶意请求绕过检查触发反序列化，执行恶意代码 漏洞名称Apache …...

编程日记 2023/4/15 14:24:00

【YOLO】YOLOv8训练自定义数据集（4种方式）

YOLOv8 出来一段时间了，继承了分类、检测、分割，本文主要实现自定义的数据集，使用 YOLOV8 进行检测模型的训练和使用 YOLOv8 此次将所有的配置参数全部解耦到配置文件 default.yaml，不再类似于 YOLOv5，一部分在配置文件…...

编程日记 2023/4/15 14:23:58

linux重置root用户密码

重置root密码 法一：rd.break 第 1 步：重启系统编辑内核参数 第 2 步：找到 linux 这行，在此行末尾空格后输入rd.break （End键也可直接进入行尾） 成功后显示页面为： 第 3 步：查看。…...

编程日记 2023/4/15 14:23:57

【DBC专题】-10-CAN DBC转换C语言代码Demo_接收Rx报文篇

案例背景(共15页精讲)： 该篇博文将告诉您，CAN DBC转换C语言代码Demo，只需传递对应CAN信号关联参数，无需每个信号"左移"和"右移"，并举例介绍：在CANoe/Canalyzer中CAPL中的应用&#xff…...

编程日记 2023/4/15 14:23:55

嵌入式软件架构设计：硬件抽象层实践

嵌入式软件架构设计：建立硬件抽象层的工程实践 1. 嵌入式软件架构概述 1.1 架构设计的必要性 在嵌入式系统开发中，软件架构设计直接影响产品的可维护性、可扩展性和可移植性。良好的架构设计能够： 减少不必要的返工 建立宏观层面的开发规…...

编程新知 2026/3/28 0:29:27

【大模型工程实践③】RAG 基础架构与完整实现

【大模型工程实践③】RAG 基础架构与完整实现：从0到1跑通 作者：AI学习者 | 来源：大模型工程实践学习系列 | 更新：2026年3月 【理论要点速览】 学习本篇前，建议先掌握以下核心理论（点击跳转）： ① 为什么需要RAG？ ② RAG vs Fine-tuning vs Long Context的决策框架 ③ …...

编程新知 2026/3/27 23:32:40

Llama-3.2V-11B-cot从零部署：Docker镜像运行与端口映射详解

Llama-3.2V-11B-cot从零部署：Docker镜像运行与端口映射详解 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。它针对双卡4090环境进行了深度优化，特别适合想要体验Llama多模态大模型但缺乏专业部署…...

编程新知 2026/3/27 23:14:37

Pandoc：5步掌握全能文档转换的极简工作流

Pandoc：5步掌握全能文档转换的极简工作流 【免费下载链接】pandoc Universal markup converter 项目地址: https://gitcode.com/gh_mirrors/pa/pandoc 价值定位：为什么每个开发者都需要一款"格式翻译官" 当你需要将Markdown笔记转换为…...

编程新知 2026/3/27 20:11:07

深入对比：在Vivado中设计异步复位、同步复位和带使能D触发器的实战差异与选型建议

深入对比：在Vivado中设计异步复位、同步复位和带使能D触发器的实战差异与选型建议 当你在设计一个状态机或数据流水线时，是否曾为选择哪种D触发器而犹豫不决？异步复位、同步复位还是带使能的D触发器，每种设计都有其独特的应用场景…...

编程新知 2026/3/27 19:22:52

图解DySAT：5张信息图带你吃透动态图表示学习的自注意力机制

动态图神经网络DySAT：用自注意力机制捕捉时空演化的5个关键视角 当我们在社交网络上关注好友动态时，既会注意不同朋友间的关联强度（谁和谁互动更密切），也会追踪这些关系随时间的变化模式（某段关系何时变得亲…...

编程新知 2026/3/27 19:20:52

VitePress 博客主题定制与美化实战

1. VitePress主题美化的核心思路 很多开发者在使用VitePress搭建博客时，都会遇到一个共同的问题：默认主题虽然简洁，但缺乏个性。我在实际项目中发现，通过CSS变量覆盖、自定义组件和插件扩展这三个维度，可以打造出极具辨…...

编程新知 2026/3/27 19:00:48

蓝桥杯嵌入式备赛：STM32G431引脚复用功能表，一张图搞定定时器与ADC配置

蓝桥杯嵌入式备赛：STM32G431引脚复用功能实战指南 在蓝桥杯嵌入式赛场上，STM32G431作为官方指定开发平台的核心控制器，其引脚复用功能的灵活配置往往是决定项目成败的关键。许多参赛选手在紧张激烈的比赛中，常常因为引脚配置错误…...

编程新知 2026/3/27 18:38:37

用MATLAB复现高斯光束通过双透镜系统：从ABCD矩阵到可视化光斑演变

用MATLAB复现高斯光束通过双透镜系统：从ABCD矩阵到可视化光斑演变 在光学工程和激光技术领域，理解高斯光束在复杂光学系统中的传输特性至关重要。本文将带您一步步实现高斯光束通过双透镜系统的完整MATLAB仿真，从ABCD矩阵理论推导到动态光斑演…...

编程新知 2026/3/27 18:02:06

Windows 11 下 3D Gaussian Splatting (3DGS) 环境配置与实战指南

1. Windows 11下的3DGS环境搭建全攻略 第一次接触3D Gaussian Splatting（简称3DGS）这个技术时，我完全被它惊艳到了。它能够从几张普通的照片重建出逼真的3D场景，而且渲染速度极快。不过说实话，在Windows 11上配置这个环…...

编程新知 2026/3/27 17:13:54