网页制作CSS小技巧:使用 font-variation 可变字体让文字起飞 今天逛codepen的时候发现了一个不错的文字动画效果,如此丝滑飘逸的效果必须得研究研究,可以看到字体粗细切换过渡效果很均匀,不像我们平常使用字体时设置 font-weight 的效果,日常设置字重的... 2023-06-051,100 viewsCommentsCSS 阅读全文
网页制作css3用transform实现正方体效果核心代码 核心代码 transform-style: preserve-3d; transform属性 效果图 image.png image.png 代码 <!DOCTYPE html&g... 2023-05-30850 viewsCommentsCSS 阅读全文
网页制作CSS3滤镜filter属性记录整理 filter属性定义了元素(通常是&amp;lt;img&amp;gt;)的可视效果,例如图片的模糊、饱和度、灰度等……个人感觉功能很强大1、filter的语法filt... 2023-05-30779 viewsCommentsCSS 阅读全文
网页制作HTML中常见Ul Ol 列表和图像标记 一、概念 HTML列表属性作用如下:设置不同的列表项标记为有序列表。设置不同的列表项标记为无序列表。设置列表项标记为图像。 二、什么是种类型的列表? 类型列表: ul无序列表 - 列表项标记用特殊图形... 2023-05-261,020 viewsCommentsHTML 阅读全文
网页制作CSS水平垂直居中的N种实现方式 一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将逐一介绍一下。 仅居中元素定宽... 2023-05-24959 viewsCommentsCSS 阅读全文
网页制作HTML img 元素 src 和 srcset 属性区别详解 img 元素有两个相关的属性 在 HTML 中,img 元素通常用于在网页中插入图片。img 元素有两个相关的属性:src 和 srcset。 src 属性指定图像的 URL,它是必需的。浏览器将使用... 2023-05-221,139 viewsCommentsHTML 阅读全文
网页制作CSS 遮罩MASK 实现 loading动画 本案例来源于 Temani Afif on CodePen,略有修改 仔细观察,主要有两个动画 小球的运动 背景的变化 看似有点复杂,其实换个角度,实现要比想象的容易很多,也非常巧妙,一起看看吧 一、... 2023-05-221,217 viewsCommentsCSS 阅读全文
网页制作CSS 实现 hover 时文字展开式变色效果 a 标签 hover 时变色的效果想必大家都能写出来: 但如果想要 hover 的时候从左到右依次变色的效果呢: 这种效果能写出来的就不多了,因为它的思路比较巧妙。 下面我们一起来写一下。 <!... 2023-05-08970 viewsCommentsCSS 阅读全文
网页制作CSS sticky 实现一个自动显示返回按钮的小交互 经常在某些文档中或者文章中可以看到这样一个"返回顶部"的功能,具体有两个交互 只有滚动一定距离才会出现,返回到顶部重新隐藏 点击会返回到顶部 比如 LuLu UI 又是点击的,又是滚动的,看着好像必须... 2023-05-08733 viewsCommentsCSS 阅读全文
网页制作CSS 文本阴影 text-shadow 悬停效果 使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果,但是实际上并不会为这些文本制作任何文本阴影效果。 text-shadow 没有文字阴影? 通过以下的gif图中的鼠标悬停效果,相信你... 2023-05-08698 viewsCommentsCSS 阅读全文
网页制作CSS文本平衡排版 text-wrap:balance 希望 CSS 中有一种原生能力可以使两行标题在每行字数上保持一致?作为一名设计师,我在设计网站或 UI 时处理不同的内容长度时经常发现这一点。 这样的情况会让你感觉 UI 效果不平衡,或者缺少一些东西... 2023-05-081,020 viewsCommentsCSS 阅读全文
网页制作async 和 defer 之外,HTML中SCRIPT 标签属性整理 HTML中, <script> 标签用于嵌入或引用JavaScript代码。 在 <script> 标签中,有两个属性可以用来控制脚本的加载和执行方式: async 和 def... 2023-04-30722 viewsCommentsHTML 阅读全文
网页制作JSON将替代XML?绝对不可能! 出品 | 麦叔编程 (ID:maishucode) 近日在网上“冲浪”,发现一篇文章标题很醒目: 这... 虽然JSON格式很香,在当今应用也很普及,但是说能替代XML格式,我觉得有点不太现实。 JS... 2023-04-12937 viewsCommentsjson XML 阅读全文
网页制作响应式网站设计:如何使您的网站具有响应性 设置您的媒体查询范围(响应断点) 根据您设计的独特需求设置您的媒体查询范围。例如,如果我们想在设计中遵循Bootstrap标准,我们将使用以下媒体查询: 纵向手机为576px 768px平板电脑 99... 2023-04-041,062 viewsComments 阅读全文
网页制作响应式网页设计:CSS单位和值、示例 响应式设计的CSS单位和值 CSS有绝对和相对测量单位。绝对长度单位的示例是cm或px。相对单位或动态值取决于屏幕的大小和分辨率或根元素的字体大小。 PX vs EM vs REM vs Viewpo... 2023-04-04802 viewsCommentsCSS 阅读全文
网页制作响应式网页设计:常见的响应断点 要使用媒体查询,您需要确定“响应式断点”或屏幕大小断点。断点是您使用媒体查询实现新CSS样式的屏幕宽度。 常见的屏幕尺寸 手机:360 x 640 手机:375 x 667 手机:360 x 720 ... 2023-04-041,208 viewsComments 阅读全文
网页制作响应式网页设计的基石:CSS、HTML、媒体查询、Fluid、Flexbox布局、响应式图像 CSS和HTML 响应式设计的基础是HTML和CSS的结合,这两种语言可以控制任何给定Web浏览器中页面的内容和布局。 HTML与CSS(图片来源:codingdojo.com) HTML主要控制网页... 2023-04-041,174 viewsCommentsCSS HTML 阅读全文
网页制作什么是响应式网页设计?重要体现在哪?WordPress网站是否响应? 什么是响应式网页设计? 响应式设计是一种网页设计方法,可让您的网页内容适应各种设备的不同屏幕和窗口大小。 例如,您的内容可能会在桌面屏幕上分成不同的列,因为它们的宽度足以容纳该设计。 如果您在移动设备... 2023-04-04880 viewsCommentsWordPress 阅读全文
网页制作CSS 实现块级元素靠右的方法 HTML 如下: 1 2 3 <div class="parent"> <div class="block"></div> </div> 想要块级元... 2023-04-041,045 viewsCommentsCSS 阅读全文
网页制作CSS实现鼠标悬停svg图标呈现描边效果 需求:鼠标悬停svg图标的时候需要呈现描边效果 实现效果如图所示: 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ... 2023-04-041,034 viewsCommentsCSS 阅读全文
网页制作CSS Painting API 绘制不规则图形的边框 使用 CSS Painting API,去实现过往 CSS 中非常难以实现的一个点,那就是如何绘制不规则图形的边框。 CSS Painting API 再简单快速的过一下,什么是 CSS Painti... 2023-03-25999 viewsCommentsCSS 阅读全文
网页制作CSS图形绘制高阶小技巧 – 角向渐变的妙用! 尝试使用 CSS 绘制如下图形: 在之前,类似的图案,其实我们有尝试过,在 单标签实现复杂的棋盘布局 一文中,我们用单标签实现了这样一个棋盘布局: 那么,本文有什么特殊之处呢?让我们一探究竟。 快速实... 2023-03-25828 viewsCommentsCSS 阅读全文
网页制作position定位在html布局中的使用技巧和注意事项 布局是html中非常重要的一部分,而定位在页面布局中也是使用频率很高的方法,今天我们就说说定位在布局中的使用技巧和注意事项。 position定位有4个属性,分别是static(默认),absolut... 2023-03-15880 viewsCommentsHTML 阅读全文
网页制作CSS mask和clip-path实现切角的技巧 CSS mask属性创建花哨的边框,本文将使用CSS mask和clip-path来切元素的四个角!使用多种技巧可以从任何元素的角切割不同的形状。在本文中,我们将考虑创建独特角落形状的现代技术,同时尝... 2022-11-041,354 viewsCommentsCSS 阅读全文