前端老赵-CSDN博客

原创【前端老赵的CSS简明教程】8-1 CSS动画和过渡的概念和使用方法

首先，我们来介绍一下CSS过渡的概念。在上面的代码中，我们定义了一个名为“myanimation”的动画，其中包含三个关键帧，分别对应动画的起始、中间和结束状态，每个关键帧都定义了一个transform属性的值，实现了一个缩放效果。我们将这个动画应用到了一个class为“box”的元素上，设置了动画的持续时间为2秒，使用了一个“ease”类型的动画缓动函数，并且让动画无限循环。举个例子，当我们将鼠标悬浮在一个链接上时，链接的字体颜色发生变化，我们可以使用CSS过渡来让颜色平滑过渡到新的状态。

2023-03-17 11:51:04 494

原创【前端老赵的CSS简明教程】10-1 CSS预处理器和使用方法

我们学习了CSS预处理器的概念和使用方法，以及示例代码演示了如何使用Sass来定义变量和嵌套规则。在实际项目中，我们可以根据自己的需求选择合适的CSS预处理器。在实际项目中，我们可以根据自己的需求选择合适的CSS预处理器。我是前端老赵，今天的课程将讲解CSS预处理器的概念和使用方法，希望能够帮助大家更好地进行前端开发。其中，input.scss是我们编写的Sass文件，output.css是编译后生成的CSS文件。当然，我们也可以将预处理器的功能扩展到我们的项目中，使得我们可以更加高效地开发。

2023-03-14 09:37:16 800

原创【前端老赵的CSS简明教程】9-1 常用的CSS框架

Bootstrap 是 Twitter 公司开发的一个前端框架，集成了 HTML、CSS、JavaScript 等技术，以响应式布局为主要特点，提供了众多的 UI 组件和工具，使得开发者可以快速地构建出各种风格的网站。而 Foundation 是一个基于响应式设计的开源前端框架，主要特点是自适应布局，支持不同屏幕尺寸和设备的适配，同样提供了丰富的 UI 组件和工具，是构建响应式网站的不二之选。我是前端老赵，今天我们将会讨论常用的 CSS 框架，如 Bootstrap 和 Foundation 等。

2023-03-14 09:34:45 272

原创【前端老赵的CSS简明教程】7-1 CSS常用的布局方式有哪些

大家好，欢迎来到本节课，我是你们的前端老赵。今天我们要讲的是CSS常用的布局方式有哪些，这是前端开发中非常重要的一个知识点，相信大家都会从中受益匪浅。那么，让我们开始吧！在网页设计和开发中，布局是非常重要的。不同的布局方式可以达到不同的效果，使网页设计更加美观、易读和易用。CSS中提供了多种布局方式，我们在开发过程中需要根据具体情况选择不同的布局方式。下面我们就来了解一下CSS常用的布局方式有哪些。流式布局是指网页内容按照一定的比例随着浏览器窗口大小的变化而自适应调整大小和位置。

2023-03-14 09:31:25 250

原创【前端老赵的CSS简明教程】6-1 CSS的伪类和伪元素

大家好，欢迎来到今天的前端课程，我是你们的前端老赵。在上一节课中，我们学习了如何使用CSS选择器选择HTML元素并应用样式。今天我们将继续探讨CSS的另一个重要主题：伪类和伪元素。在实际的网站开发中，我们经常需要根据不同的元素状态来应用样式。例如，当用户将鼠标悬停在链接上时，我们希望链接的文本颜色变成红色。这个效果就需要使用CSS伪类。伪类是一种用于向某些选择器添加特殊效果的关键字。除了伪类之外，我们还有伪元素，它们允许我们在元素的内容之前或之后添加样式。

2023-03-13 14:01:26 195

原创【前端老赵的CSS简明教程】4-2 如何在网站中使用Web字体

今天我们学习了如何在网站中使用 Web 字体，通过 @font-face 规则引入字体文件，可以让我们在网页中使用更多的字体选择，让网页设计更加灵活多样化。简单来说，Web 字体是指可以在网页上使用的自定义字体，与传统字体不同的是，Web 字体不需要在用户电脑上安装，而是可以通过网络加载。要在网站中使用 Web 字体，我们需要使用 @font-face 规则。在这个示例中，我们将 Roboto 字体应用于 p 元素，如果我们想在其他元素中使用不同的字体，只需要在 CSS 样式表中添加对应的样式即可。

2023-03-13 14:00:42 352

原创【前端老赵的CSS简明教程】5-1 CSS选择器和优先级规则

我们学习了不同类型的CSS选择器，包括元素选择器，类选择器和ID选择器，以及高级选择器类型，例如伪类选择器和属性选择器。如果存在多个同名的ID选择器，最后出现的ID选择器将具有更高的优先级。在本例中，由于我们只有一个ID选择器，因此它将具有最高的优先级，并且元素选择器p的颜色将被覆盖。请记住，这里给大家展示的CSS选择器的分类和优先级规则只是一个简单的示例，实际上，优先级规则相当复杂，有时可能难以理解。important标识，这使得这个样式的优先级最高，最后的结果就是应用它的样式，显示绿色的字体。

2023-03-13 14:00:30 165

原创【前端老赵的CSS简明教程】4-1 CSS文本样式的使用方法

今天我们来学习CSS文本样式的使用方法，它是前端开发中非常基础和常用的一部分，也是让网页看起来美观的重要因素之一。在本节课中，我们将会学习如何为文本添加颜色、字体、大小和间距等样式，以及如何在网页中使用它们。我们学习了CSS文本样式的使用方法，包括颜色、字体、大小、间距、字体粗细、字体样式。除了"bold"之外，还可以使用"normal"、"bolder"、"lighter"等关键字来指定不同的字体粗细。在这个例子中，我们使用了line-height属性来为所有段落指定行高为文本大小的3倍。

2023-03-13 14:00:09 123

原创【前端老赵的CSS简明教程】3-2 如何使用CSS样式美化HTML元素

大家好，我是前端老赵，今天我们来讲解如何使用CSS样式美化HTML元素。CSS是前端开发必不可少的一部分，通过CSS可以为网页添加各种各样的样式，让网页看起来更加美观和舒适。在前面的课程中，我们已经学习了CSS的基本语法和常用的CSS样式，今天我们将会学习如何使用CSS样式来美化HTML元素。假设我们有一个简单的HTML页面，其中包含一个段落和一个按钮元素。现在我们想要通过CSS样式来改变它们的外观。我们首先可以通过使用font-family属性来改变页面中文本的字体。例如，我们可以将段落的字体设置为"Ar

2023-03-13 13:54:31 321

原创【前端老赵的CSS简明教程】3-1 常用的CSS基本样式

在CSS中，我们可以设置字体的大小、样式、粗细等。例如，我们可以使用“font-size”属性来设置字体大小，使用“font-style”属性来设置字体样式，使用“font-weight”属性来设置字体粗细。例如，我们可以使用“background-color”属性来设置背景颜色，使用“background-image”属性来设置背景图片。例如，我们可以使用颜色名“red”表示红色，或者使用十六进制数“#FF0000”来表示红色。今天我们学习了一些常用的CSS基本样式，包括颜色、字体、背景等。

2023-03-13 13:53:32 124

原创【前端老赵的CSS简明教程】2-1 CSS盒模型的概念和作用

在早期的 web 开发中，content-box 盒模型更为常用，可能是因为它更符合人们的直觉认知，即元素的大小应该只包括内容的部分。虽然 border-box 更适合某些场景，但由于 content-box 的广泛采用和存在的历史原因，同时也考虑到向后兼容性，content-box 成为了默认的盒模型。但是，我们在开发时，你会发现，浏览器默认的content-box的盒模型并不合理，我们经常需要去手动改变为border-box才更容易布局和完成css样式，那为什么会出现这种“拧巴”的事呢？

2023-03-13 13:51:35 206

原创【前端老赵的CSS简明教程】1-3 如何在HTML中引入CSS样式

通过这节课的学习，我们学会了如何使用内部样式表、外部样式表和行内样式来控制网页的样式。在实际的开发过程中，我们通常会使用外部样式表，因为它可以让我们的代码更加清晰和易于维护。外部样式表是写在独立的CSS文件中的样式代码，它可以被多个HTML文件共享。在HTML中，我们可以通过三种方式来引入CSS样式：内部样式表、外部样式表和行内样式。在这个例子中，我们将标签的颜色设置为蓝色，这是通过style属性来实现的。在这个例子中，我们定义了一个内部样式表，它将所有的h1标签的颜色设置为红色。

2023-03-13 13:49:38 265

原创【前端老赵的CSS简明教程】1-2 CSS的基本语法和选择器

大家好，欢迎来到本节课程！今天我们将探讨CSS的基本语法和选择器，这是我们深入了解CSS的重要一步。而选择器则是CSS的核心，通过选择器，我们可以针对不同的HTML元素来设置样式和外观。在这个示例中，p是一个选择器，它选中了所有的标签，表示这个声明块中的属性都将应用于所有的段落元素。CSS的语法由选择器和声明块组成，其中选择器用于选中HTML元素，而声明块则包含了一个或多个声明，每个声明用于设置一个属性的值。通过这节课的学习，我们了解了CSS的语法结构和选择器的分类，这些是掌握CSS的必备知识。

2023-03-13 13:48:04 74

原创【前端老赵的CSS简明教程】1-1 CSS是什么，它的作用是什么

首先，让我们来了解一下CSS的定义。通过本节课程的学习，相信大家已经初步了解了CSS的概念和作用，以及如何使用CSS来为网页添加样式和外观。CSS的主要作用之一是将网页的内容和样式分离开来，这样网页的结构和内容就可以和视觉表现分离，使得网页的修改和维护变得更加容易。今天我们要讲授的课程是CSS，CSS是前端开发中的重要技术之一，也是网页设计的重要组成部分。CSS可以使网页的结构和样式分离开来，这就意味着浏览器只需要加载一次样式表，就可以将样式应用到多个页面元素上，从而减少了网页加载的时间和网络带宽。

2023-03-13 13:47:02 254

原创在教学中常被问到的几个vue3.x与typescript的问题，统一解答

此外，TypeScript还提供了许多类型特性，例如接口、泛型、枚举等，这些特性可以提高代码的可读性和可维护性，同时还可以减少重复代码的编写。因此，学习TypeScript并不是必须的，但如果你想在Web开发中使用TypeScript，或者想要参与一些大型的前端项目，那么学习TypeScript是非常有用的。所以，掌握TypeScript是值得的。TypeScript是JavaScript的超集，它在JavaScript的基础上增加了静态类型检查和一些其他的特性，可以提高代码的可维护性和健壮性。

2023-03-08 15:01:48 801

原创前端老赵一次给你讲透“微前端”架构

微前端是一种前端架构模式，它将Web应用程序拆分为一组小型、可独立开发和部署的模块，每个模块可以由不同的团队开发和维护。这种模块化的架构可以帮助开发团队降低Web应用程序的规模和复杂度，从而提高应用程序的可维护性和可扩展性。微前端的概念最早由ThoughtWorks公司的技术总监Cam Jackson在2016年提出。他认为，微前端可以帮助团队将大型Web应用程序拆分为小型模块，从而更好地满足不同业务需求，提高应用程序的可维护性和可扩展性。

2023-03-08 11:36:34 823

原创在vue中如果computed属性是一个异步操作怎么办？

在上面的示例中，我们定义了一个名为asyncProperty的计算属性，它的计算方法是一个异步函数。需要注意的是，如果使用了异步计算属性，在模板中访问计算属性的时候需要使用v-if指令来等待计算属性计算完成。因为计算属性是异步执行的，所以在计算属性没有计算完成之前，它的值可能为undefined，这会导致模板渲染出错。在计算属性中使用异步方法时，可以使用async/await来处理异步操作。由于计算属性是基于它们的依赖缓存的，所以我们需要使用一个返回Promise的异步方法来确保计算属性能够正常运行。

2023-03-04 21:17:59 7328 1

原创极客之选：用Rollup打包工具优化前端代码，让你成为前端领域的高手

本文介绍了一个名为Rollup的打包工具，该工具可以帮助开发人员优化前端代码，减小代码体积，提高网站性能。

2023-03-01 13:46:53 840

原创重拾JS基础：掌握闭包和作用域链的秘密，让你代码更加简洁优雅

在 JavaScript 中，每个函数都有自己的作用域。作用域是一个函数可以访问的变量、函数和对象的集合。在函数内部，可以访问到全局变量和外部函数中的变量。作用域链是一个指向作用域的链，其中包含当前函数的作用域和外部函数的作用域。当函数内部访问变量时，JavaScript 引擎会按照作用域链的顺序查找变量。闭包是指一个函数可以访问其外部函数中定义的变量和函数，即使外部函数已经返回了。闭包通过捕获其外部函数的作用域链来实现这个特性。当一个函数被定义时，它会创建一个闭包，包含该函数的作用域和作用域链。

2023-03-01 10:35:41 171

转载用PWA提升Web应用的性能和用户体验

PWA 是一种 Web 应用的新范式，它将 Web 应用和原生应用的体验结合在一起。PWA 可以让 Web 应用离线缓存、全屏模式、桌面快捷方式等，提供与原生应用类似的用户体验。此外，PWA 还能够通过 Service Worker 技术实现增量更新，提高 Web 应用的性能。

2023-03-01 10:04:23 331

原创 A key tool APK HTML packaging _ Android APP app packed package _H5

With the current Apple Appstore increasingly stringent review, the average daily 1000 shelves, the shelf 3000 application, you want the Apple App Store shelves has become increasingly difficult, repeatedly revised audit shelves as short as 1-2 weeks, or as

2021-01-29 14:04:46 109

原创如何才能低成本地将html5转换（打包）为APK文件？

随着社会信息化的发展和智能手机的迅速普及，大多数网站现在都拥有移动网站，或者使用html5技术在手机上兼容。同时，随着手机的进一步发展，人们发现移动应用程序已开始流行。我们不仅拥有移动网站，而且拥有移动应用程序。在移动时代，您将仍然没有移动应用程序，因为用户不喜欢在浏览器上输入复杂的URL，并且不想每次使用时都传输数据，这将浪费时间和流量。。移动应用程序的开发成本相对较高，并且无法与网站同步也很麻烦。但是，大多数网站已经具有移动wap网站或html5自适应网站。基于此，有人认为使...

2021-01-09 20:01:44 1070 1

原创 IOS企业签名和IOS免签名打包的区别是什么？

IOS企业签名：它指的是将IPA文件的内部版本打包到一个售价299美元的苹果企业账户中，即替换应用程序的p12证书。签约后可以提交到app store进行免费审核，所有用户都可以免费下载。它可以安装在任何iPhone或iPad上，次数不限，不越狱。使用签名平台后，下载和更新次数不限的优势是无限的。如果说企业签名缺失是因为企业签名的签收现象，那么在选择服务商时，需要选择提供售后服务的服务商。签名后，您可以立即拥有证书来补充签名。目前企业账户价格过高，市场容量超过60W，成本过高，申请企业账..

2021-01-06 13:55:46 791 1

原创【咕笛说项目 | 前端权限设计从入门到上手】之零：前端权限设计概述

权限模块的设计是一个系统级、多维度的设计过程，在正式的软件开发中，都会涉及到。【咕笛说项目 | 前端权限设计从入门到上手】系列将带领大家一起学习权限控制的基础开发方法和思路。一个完整的软件项目开发，必然涉及到权限控制的部分，特别是在开发后台管理系统的项目中，权限的设计几乎要贯穿整个开发过程，早在软件设计阶段就要预留出相应的接口。在权限设计中，我们一般涉及到以下几个层次的权限范围（但并非每个项目都要应用以下全部的权限，视项目的规模和业务复杂性而不同，比如简单的项目只会涉及到菜单权限）..

2020-12-09 15:05:13 256

原创【咕笛说vue】把“样式穿透”原理和方法说透

当我们在vue项目中引用到第三方组件时，比如element-ui,常常需要更改某些元素的样式，但如果使用常规的css样式覆盖的方式是经常无效的，那么我们就要用到“样式穿透”的方法。这一节咕笛老师来详细讲解一下这个魔改样式的大杀招~在一个组件中，我们定义组件样式一般写在页面的最下方,以style包裹<style> .div{ }</style>为了不污染全局样式，我们在style上加一个scoped修饰符，这个样式就...

2020-12-02 13:57:36 2931 2

原创【咕笛说vue】子组件如何实现直接更新父组件的data中值？

在vue中父子组件的传值方式，我们都比较熟悉了吧？父传子：props子传父：$emit这个都是常识中的常识了，自不用多说。但有一种情况是，我需要在子组件中改变外层组件的传进来的值，也就是父级组件的data值，这个应该如何实现呢？看一个例子：JavaScript//父组件<child-component :visible="visible" @onClose="closeHandler"></child-component><scri...

2020-12-01 14:05:18 485

原创【咕笛说项目 | 前端权限设计从入门到上手】之三：按钮和功能级权限（ACL）

按钮级权限在中型及以下的项目中一般不会涉及，但往往在一些比较复杂的项目中还是需要特别考虑的，这一节我们来一起讨论下按钮级权限在VUE项目中如何去落地。一般在后台的权限表中，按钮级权限与页面级权限是同在一张表里的，只是用不同的type进行区别。我们一般获取权限的时机是在登录的时候，后台会通过api将当前登录的token信息和权限列表一同返回，我们就是对这个权限列表进行二次加工处理的。以我司的项目为例，后台是一次性将一个整个的权限列表返回，前端需要将这个列表拆成三个部分：菜单权限、页面权限和按钮权限（菜

2020-11-30 16:50:10 659

关注老赵不迷路，老赵带你上高速