win12网页版

2023-06-30

使用MiniSandbox前端代码可视化

原作者：『轻笑Chuckle』 这里我只是搬运过来的而已，后面准备拿来分享源码，这里先做一个记录，有兴趣的请支持原作者。 前言   官方文档:Mini Sandbox  Github仓库:mini-sandbox   在前面我找了不少的源码文件，但在本地保存太占地方，文件多了也不知道预览的样式是什么，这里就想到了保存到博客上并且也可以实现预览，这里我就想到了前期无意中看到了『轻笑Chuckle』分享的这个预览脚本。   我将其保存在本地引入，并且稍微根据需要对mini-sandbox.js作了一点修改，由于这个js压缩后还有450kb，我建议是在有使用需要的单页通过cdn引入。 1<script src="https://unpkg.com/mini-sandbox@0.3.11"></script> 使用在Hexo中使用，在markdown中需要的地方插入div标签,并在文末引入一个js。 123<div id="my-sandbox"></div>···<script src...

2023-09-03

一些收藏的css动画库

狐说八道 有时候在学习前端的时候，制作的页面简单，没有什么动画效果，感觉非常的单调，免不了要写各种各样的css动画，给某个部分添加动画效果，这里就去找了几个比较靠谱的css动画库，可以简单实现动画效果。 css动画库 CSShake.css：https://elrumordelaluz.github.io/csshake/ 一个能够提供震动和晃动Dom元素的CSS库在移动端模仿手机震动，QQ窗口震动 All Animation CSS3：https://all-animation.github.io/ 下载后链接all-animation css文件 1<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" /> It’s Tuesday：https://shakrmedia.github.io/...

2022-06-22

web前端之块元素和行内元素（内联元素）

Web前端开发中，了解块元素和行内元素（内联元素）的特点和用途是非常重要的。它们决定了元素在页面中的布局和呈现方式。本文将介绍块元素和行内元素的基本概念、区别以及它们在Web前端开发中的应用。 块元素：块元素是指在页面中独占一行的元素，它们以块的形式显示。块元素通常用于构建网页的结构和布局。常见的块元素包括 <div>、<p>、<h1>-<h6>、<ul>、<li> 等。 块元素的特点： 独占一行，自动换行显示。 默认情况下，宽度会自动填满其父元素的宽度。 可以设置宽度、高度、上下外边距（margin）和内边距（padding）。 可以包含其他块级元素和行内元素。 块元素常用于页面的结构布局，如创建分区、段落、标题、导航菜单等。通过设置块元素的样式和布局属性，可以实现各种页面布局和排版效果。 行内元素（内联元素）：行内元素，也被称为内联元素，是指在页面中水平流动的元素，它们不会独占一行，而是按照文本的流动方式在同一行内显示。行内元素通常用于包裹文本片段或添加强调效果。常见的行内元素包括 <spa...

2023-05-27

web前端之css雪碧图

当网页中需要显示多个小图标或背景图时，使用CSS雪碧图（CSS sprites）是一种优化性能和提升用户体验的常用技术。本文将详细介绍CSS雪碧图的概念、优势以及实现方法，帮助您了解如何有效地使用雪碧图来减少网页的加载时间。 什么是CSS雪碧图？CSS雪碧图是一种将多个小图标或背景图组合到单个图像文件中的技术。这个单个图像文件称为雪碧图。通过在CSS中指定图像的位置和尺寸，可以在网页中显示所需的图标或背景，同时避免多次请求和加载多个图像文件。 使用CSS雪碧图可以有效减少HTTP请求次数，提高网页加载速度。此外，通过减少图像文件的数量，还可以节省带宽和减少服务器负载，从而提升用户体验和网站性能。 实现CSS雪碧图的步骤下面是一步一步实现CSS雪碧图的常用方法： 1. 准备图像文件首先，收集需要合并到雪碧图中的图像文件。这些图像可以是小图标、按钮背景等，确保它们的尺寸相对较小且透明度一致（若需要）。 2. 创建雪碧图使用图像编辑工具（如Photoshop）打开这些图像文件，并将它们合并到一个单独的图像文件中，形成雪碧图。确保各个图像之间有足够的间距，以避免在CSS中指定位置时出现重...

2022-07-01

web前端之css文档流

CSS文档流简单使用：构建基本网页布局 摘要：CSS文档流是Web开发中重要的概念，它决定了元素在页面中的布局方式。本文将介绍CSS文档流的基本概念和简单使用方法，帮助您了解如何利用文档流创建基本的网页布局。 引言：在Web开发中，实现灵活且有效的网页布局是至关重要的。CSS文档流是指浏览器根据HTML文档中元素的顺序和默认样式进行布局的方式。深入理解CSS文档流的原理和使用方法，可以帮助开发人员更好地控制页面布局。本文将介绍CSS文档流的基本概念和简单使用方法，帮助您构建基本的网页布局。 块级元素和行内元素：在CSS文档流中，元素被分为块级元素和行内元素两种类型。块级元素（block-level elements）独占一行，并且默认情况下会铺满父容器的宽度，如<div>、<p>等。行内元素（inline elements）不会独占一行，它们会根据其内容的大小进行排列，如<span>、<a>等。 块级元素布局：通过合理地使用块级元素，可以实现基本的网页布局。通过设置块级元素的display属性为block，可以使其独占一行，...

2022-07-01

web前端之css盒子模型

深入理解CSS盒子模型：构建灵活布局的基石 摘要：CSS盒子模型是Web开发中最基础、最重要的概念之一。它定义了HTML元素在页面中的布局和尺寸计算方式。本文将深入探讨CSS盒子模型的组成部分、计算方式以及常见应用场景，帮助您全面掌握盒子模型的核心概念，实现灵活且精确的页面布局。 引言：在Web开发中，理解CSS盒子模型是建立坚实布局基础的关键。每个HTML元素都被视为一个盒子，这个盒子的大小、边框、内边距和外边距都由盒子模型来决定。正确理解盒子模型的组成部分和计算方式，能够帮助开发人员更好地控制元素的外观和布局。在本文中，我们将详细介绍CSS盒子模型的概念和原理，并提供一些实际应用示例，帮助您全面掌握这一重要概念。 盒子模型的组成部分：CSS盒子模型由四个主要组成部分组成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。内容区域包含了元素的实际内容，内边距是内容区域与边框之间的空白区域，边框定义了元素的边界，外边距则是元素与其他元素之间的空白区域。 盒子模型的计算方式：在CSS中，元素的宽度和高度是由内容区域的大小、内...