认识CSS之如何提高写前端代码的效率
🌟所属专栏:前端只因变凤凰之路
🐔作者简介: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——五带信管菜只因一枚😮前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~👉文章简…...
Vue中watch和computed
首先这里进行声明,这个讲的是vue2的内容,在vue3发生了什么变动与此无关 这里是官网: https://v2.cn.vuejs.org/v2/guide/installation.html computed > 计算属性 watch > 侦听器(也叫监视器) 其区别如下&…...
华为鲲鹏+银河麒麟v10 安装 docker-ce
设备:硬件:仅有ARM处理器,无GPU和NPU,操作系统麒麟银河V10,Kunpeng-920 #######参考原链接######### 华为鲲鹏银河麒麟v10 安装 docker-ce 踩坑 - akiyaの博客 在 arm64(aarch64) 架构服务器上基于国产化操作系统安…...
Lambda,Stream,响应式编程从入门到放弃
Lambda表达式 Java8新引入的语法糖 Lambda表达式*(关于lambda表达式是否属于语法糖存在很多争议,有人说他并不是语法糖,这里我们不纠结于字面表述)*。Lambda表达式是一种用于取代匿名类,把函数行为表述为函数式编程风…...
C语言枚举使用技巧
什么是C语言枚举 C语言枚举是一种用户自定义数据类型,它允许程序员定义一个变量,并将其限制为一组预定义的常量。这些常量被称为“枚举值”,并且可以通过名称进行引用。 在C语言中,枚举值是整数类型,它们的值默认从0…...
保姆级使用PyTorch训练与评估自己的EfficientNetV2网络教程
文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址:https://github.com/Fafa-DL/Awesome-Backbones 操作教程:https://www.bilibili.co…...
【9】基础语法篇 - VL9 使用子模块实现三输入数的大小比较
VL9 使用子模块实现三输入数的大小比较 【报错】官方平台得背锅 官方平台是真的会搞事情,总是出一些平台上的莫名其妙的错误。 当然如果官方平台是故意考察我们的细心程度,那就当我没有说!! 在这个程序里,仿真时一直在报错 错误:无法在“test”中绑定wire/reg/memory“t…...
成功的项目管理策略:减少成本,提高质量
项目管理是一项具有挑战性的任务,项目团队需要合理的规划和策略,以确保项目的成功和达成预期。为了实现项目的成功,项目经理必须采用正确的策略,才能以最大限度地减少成本并提高项目质量。本文将探讨成功的项目管理策略࿰…...
centos 7下JDK8安装
下载安装包https://www.oracle.com/java/technologies/downloads/#java8-linux上传路径 /usr/local(替换为自己需要安装的路径)解压tar -zxvf jdk-8u131-linux-x64.tar.gz配置环境变量[rootlocalhost java]# vi /etc/profile添加如下配置在配置文件最后&…...
datatables.js中文项目使用案例
官方下载地址https://datatables.net/download/中文官网:http://datatables.club/资源引用<link href"~/datatables/datatables.min.css" rel"stylesheet" /> <script src"~/jquery.min.js" type"text/javascript"…...
Hadoop小结
Hadoop是什么Hadoop是一 个由Apache基金 会所开发的分布式系统基础架构。主要解决,海量数据的存储和海量数据的分析计算问题。广义上来说,Hadoop通 常是指一个更广泛的概念一Hadoop 生态圈。Hadoop优势Hadoop组成HDFS架构Hadoop Distributed File System,…...
经典卷积模型回顾14—vgg16实现图像分类(tensorflow)
VGG16是由牛津大学计算机视觉小组(Visual Geometry Group)开发的深度卷积神经网络模型。其结构由16层组成,其中13层是卷积层,3层是全连接层。 VGG16被广泛应用于各种计算机视觉任务,如图像分类、目标检测和人脸识别等。…...
#Vue2篇:keep-alive的属性和方法
定义 keep-alive 组件是 Vue.js 内置的一个高阶组件,用于缓存其子组件,以提高组件的性能和响应速度。 除了基本用法之外,它还提供了一些属性和方法,以便更好地控制缓存的组件。 属性 include属性用于指定哪些组件应该被缓存&a…...
webpack指南(项目篇)——webpack在项目中的运用
系列文章目录 webpack指南(基础篇)——手把手教你配置webpack webpack指南(优化篇)——webpack项目优化 文章目录系列文章目录前言一、配置拆分二、修改启动命令三、定义环境变量四、配置路径别名总结前言 前面我们对webpack的基…...
unicode字符集与utf-8编码的区别,unicode转中文工具、中文转unicode工具(汉字)
在cw上报的报警信息中,有一个name字段的值是\u4eba\u4f53 不知道是啥,查了一下,是unicode编码,用下面工具转换成汉字就是“人体” 参考文章:https://tool.chinaz.com/tools/unicode.aspx 那么我很好奇,uni…...
3D数学系列之——再谈特卡洛积分和重要性采样
目录一、前篇文章回顾二、积分的黎曼和形式三、积分的概率形式(蒙特卡洛积分)四、误差五、蒙特卡洛积分计算与收敛速度六、重要性采样七、重要性采样方法和过程八、重要性采样的优缺点一、前篇文章回顾 在前一篇文章3D数学系列之——从“蒙的挺准”到“蒙…...
Python错误 TypeError: ‘NoneType‘ object is not subscriptable解决方案汇总
目录前言一、引发错误来源二、解决方案2-1、解决方案一(检查变量)2-2、解决方案二(使用 [] 而不是 None)2-3、解决方案三(设置默认值)2-4、解决方案四(使用异常处理)2-5、解决方案五…...
VMware空间不足又无法删除快照的解决办法
如果因为快照删除半路取消或者失败,快照管理器就不再显示这个快照,但是其占用的空间还在,最终导致硬盘不足。 可以百度到解决方案,就是在快照管理器,先新建一个,再点删除,等待删除完成就可以将…...
类和对象(一)
类和对象(一) C并不是纯面向对象语言 C是面向过程和面向对象语言的! 面向过程和面向对象初步认识: C语言是面向过程的,关注的是过程,分析出求解问题的步骤,通过函数调用逐步解决问题。 C是基…...
Java 不同路径
不同路径中等一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。问总共有多少条不同的路径?…...
终极对比指南:Autoenv vs 其他环境管理工具,如何选择最适合你的目录环境自动化方案
终极对比指南:Autoenv vs 其他环境管理工具,如何选择最适合你的目录环境自动化方案 【免费下载链接】autoenv Directory-based environments. 项目地址: https://gitcode.com/gh_mirrors/au/autoenv Autoenv是一款强大的目录环境自动化工具&#…...
MusePublic大模型Qt图形界面开发指南
MusePublic大模型Qt图形界面开发指南 1. 为什么需要图形界面? 如果你已经能用代码调用MusePublic大模型,可能会发现一个问题:每次都要打开终端、输入命令、等待结果,这样的交互方式既不方便也不直观。特别是当你需要频繁调整参数…...
低成本自动化方案:OpenClaw+Qwen3-32B替代SaaS API调用实测
低成本自动化方案:OpenClawQwen3-32B替代SaaS API调用实测 1. 为什么选择本地AI自动化方案 去年我在处理海外客户邮件时,每月需要支付近200美元的SaaS服务费。这些费用主要消耗在邮件分类、摘要生成和自动回复等基础功能上。当我发现OpenClaw框架可以对…...
M.2 SSD硬件电路设计实战:从接口规范到高速信号布局
1. M.2 SSD硬件设计入门:从接口规范说起 第一次接触M.2 SSD设计时,我被各种接口类型和协议搞得晕头转向。现在回想起来,其实只要抓住几个关键点就能快速上手。M.2接口作为Intel推出的新一代存储标准,已经全面取代了老旧的mSATA接口…...
LangGraph 工作流实战:Few-Shot提示赋能大模型精准调用自定义计算工具
1. 为什么需要Few-Shot提示赋能工具调用? 大模型在通用任务上表现惊艳,但遇到需要精确调用自定义工具的场景时,常常会出现"知道但不会用"的情况。比如让GPT-4计算"3172531284724",它可能直接输出错误答案而非…...
别再羡慕ECharts了!用PyQt+Matplotlib打造你的专属交互式图表工具(附完整代码)
用PyQtMatplotlib打造媲美ECharts的交互式数据可视化工具 在数据分析领域,Web端的ECharts以其丰富的交互功能广受好评,但当我们开发桌面应用或需要高性能处理大数据时,Python技术栈的开发者常常面临两难选择。Matplotlib虽然性能优异…...
Abp要落地DDD重要的一步
要用到实体之间的依赖关系,也就是聚合根,否则每个实体一个仓储,光一个服务注入就十几个仓储,玩锤子...
毕业设计模板:新手入门级全栈项目结构与避坑指南
很多同学在做毕业设计时,常常会遇到这样的场景:项目初期雄心勃勃,但写着写着就发现代码越来越乱,前后端耦合在一起,想加个新功能都无从下手,最后只能硬着头皮交一个“能跑就行”的“缝合怪”项目。今天&…...
XC泰山服务器麒麟V10系统安装全流程解析
1. 准备工作:了解XC泰山服务器与麒麟V10系统 在开始安装之前,我们需要先了解一下XC泰山服务器和麒麟V10操作系统的基本情况。XC泰山服务器是国内自主研发的高性能服务器,采用ARM架构处理器,具有高性能、低功耗的特点。而麒麟V10则…...
机票价格智能监控:如何用Flight Spy锁定最佳购票时机
机票价格智能监控:如何用Flight Spy锁定最佳购票时机 【免费下载链接】flight-spy Looking for the cheapest flights and dont have enough time to track all the prices? 项目地址: https://gitcode.com/gh_mirrors/fl/flight-spy 你是否曾在预订机票时陷…...
