Dec172022
使用Vue.js开发可复用组件
在Web开发中，组件化开发已成为一种不可忽视的趋势。Vue.js作为一款流行的JavaScript框架，提供了强大的组件化开发能力，使开发人员可以轻松创建可复用的组件。
什么是Vue.js组件
在Vue.js中，组件是可复用的Vue实例，具有自己的视图、状态和行为。组件可以包含HTML模板、CSS样式和JavaScript代码，能够封装一部分实现特定功能的代码。
为什么使用Vue.js组件
复用性：Vue.js组件的设计使...阅读全文
作者：绝缘体.. | 分类：CSS, html, javascript, react, vue, 前端技术, 编程语言 | 阅读： | 标签：CSS, html, javascript, react, vue
抢沙发
Dec142022
使用jQuery实现响应式图片，适应不同屏幕尺寸！
随着移动设备的普及，我们需要确保网站的图片能够适应不同的屏幕尺寸，提供更好的用户体验。在本篇博客中，我们将使用jQuery来实现响应式图片效果。
1. 引入jQuery库和样式文件
首先，我们需要在HTML文件中引入jQuery库和样式文件。可以通过以下方式将jQuery库和样式文件引入到HTML文件中：
<!-- 引入jQuery库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/...阅读全文
Dec122022
使用jQuery实现滑动门效果，提升页面可访问性！
滑动门效果是一种常见的页面元素交互效果，通过使用jQuery库，我们可以简单地实现一个滑动门效果，并且提升页面的可访问性。
什么是滑动门效果？
滑动门效果是指在网页中，当鼠标指针悬停在一个菜单项上时，该菜单项的背景色会以滑动的动画效果展示出来。这种效果能够提升用户体验，增加页面的动感和交互性。
使用jQuery实现滑动门效果
首先，你需要包含jQuery库到你的网页中。你可以通过...阅读全文
Dec052022
创建优雅的响应式导航栏
在现代Web设计中，响应式设计已经成为一种必备的技能。随着越来越多的用户从电脑上的浏览器转向手机和平板电脑上的浏览器，我们需要确保我们的网站在不同设备和屏幕尺寸上都能提供良好的用户体验。本篇博客将介绍如何创建一个优雅的响应式导航栏。
1. HTML结构
首先，我们需要使用HTML定义导航栏的结构。在这个例子中，我们将使用一个<nav>元素来包含我们的导航栏，内部包含一个<...阅读全文
Nov252022
如何通过jQuery实现图片懒加载的懒加载
图片懒加载是一种优化网页性能的常用技术之一。通过在图片进入可视区域之前不加载图片，在图片进入可视区域后再加载，可以大大减少页面的加载时间和流量消耗。本文将介绍如何使用jQuery来实现图片懒加载。
什么是图片懒加载？
图片懒加载又被称为延迟加载，是一种在需要用到某个资源时才进行加载的技术。对于网页中的图片，通常情况下用户需要滚动页面才能看到图片。传统的加载方式会导致...阅读全文
Nov212022
Implementing Dark Mode in Web App Development
Dark mode has become a popular feature in various applications, including web development. It provides users with an alternative color scheme that is easier on the eyes, especially in low-light environments. Implementing dark mode in web apps can enhance the user experience and make websites more visually appealing. In this article, we will explore different...阅读全文
Nov212022
云原生监控体系构建：Prometheus Operator与Grafana Loki日志聚合完整实践
云原生监控体系构建：Prometheus Operator与Grafana Loki日志聚合完整实践
在当今以 Kubernetes 为核心的云原生架构中，系统的复杂性显著提升，微服务、容器化、动态调度等特性使得传统的监控手段难以满足需求。为了实现对系统状态的全面可观测性（Observability），必须构建一套高效、可扩展、自动化的监控体系。Prometheus 和 Grafana Loki 作为 CNCF 毕业项目，已成为云原生监控与日志...阅读全文
Nov182022
Nov182022
正则去除行内css样式
去除行内所有的css样式：后台获取到的 html(string)难免会携带有行内css，这种行内样式甚是麻烦不如去掉重写
var dom='<div style="width:500px;height:100px;background-color:#000000;">你说啥，我木听清</div>'
var reg = /style\s*?=\s*?(['"])[\s\S]*?\1/g;
console.log(dom.replace(reg,''));
<div>你说啥，我木听清</div>
阅读全文
Nov092022
使用CSS Animation创建动态加载效果：提升用户等待体验
在现代的 Web 开发中，用户体验是至关重要的一部分。尤其是在需要加载大量数据或执行复杂操作的情况下，用户可能会面临长时间的等待。为了改善这种不良体验，我们可以使用 CSS Animation 来创建动态加载效果，给用户提供一种更加有趣和愉悦的等待体验。
CSS Animation 简介
CSS Animation 是一种利用 CSS3 的新特性，在网页中创建动画效果的方法。它可以通过在元素上应用动画效果，让元...阅读全文