分类: 网页制作
thumbnail

五种 HTML 属性创造更具包容性的web体验

快节奏的Web开发世界中,很容易被最新的框架,库和尖端技术所吸引。但有时最有影响力的改进来自于重新审视基本面。 在本篇博文中,我将向您介绍五种 HTML 属性……
thumbnail

3 种方式实现 CSS 弧形卡片

平时开发中,有时候会碰到下面这种“弧形”样式,主要分为“内凹”和“外凸”两种类型,如下 该如何实现呢?或者想一下,有哪些 CSS 属性和“弧形”有关?下面介绍 3 ……
thumbnail

CSS新手菜鸟入门指南教程

网页设计中,CSS 是极为重要的。它能够让网页外观更加美观,加载更加快速,使用户体验更友好。对于初学者来说,CSS 可能有些难以理解,但只要掌握好了它的基本……
thumbnail

GPT-4V新玩法:随手一画就能生成网页!

随手圈圈画画就能生成一个网页! 你没听错,这就是GPT-4Vision的新玩法! 开发者Sawyer Hood把demo展示发到到X上,短短几天就有130万查看量,点赞转发收藏2800……
thumbnail

CSS负边距小范围使用两列布局

所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—……
thumbnail

CSS使用justify实现 text-align文本两端对齐

text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端对齐。……
thumbnail

CSS无需图片,实现圆角边框渐变色+背景透明效果

CSS实现圆角边框渐变色+背景透明,最近在工作中常常实现这些效果,速速来Get吧~ 1.实现效果 2.实现原理 border-image: border-image CSS 属性允许在元素的边……
thumbnail

CSS 两行文字两端对齐与字符间距的处理技法

CSS 文字对齐与字符间距的处理,在这里,你可以了解到文字渐变,letter-spacing,text-align,text-align-last,filter等,速速来Get吧~ 1.实现效果 在这里插……
thumbnail

CSS Reset是什么?主流有哪几款?

CSS Reset CSS Reset(CSS重置)是一种技术,用于消除不同浏览器之间默认样式的差异,以确保网页在各个浏览器中的显示一致性。由于不同浏览器对元素的默认样……
thumbnail

CSS 新功能:锚点定位、Shapes、滚动捕捉(scroll snap)

Anchor Positioning ❝CSS 锚点定位是一项实验性的新 CSS 功能,允许你相对于页面上的另一个元素定位一个元素。这是通过使用 anchor-position 属性来完成的。例……
thumbnail

CSS颜色混合函数color-mix深入了解

介绍一下 Chrome 111+正式推出的 CSS颜色混合函数:color-mix()[1]。 所谓颜色混合,顾名思义,就是将两种颜色按照一定的比例混合起来,和调色板比较像。到目……
thumbnail

css中的网格布局,你学会了吗

很多前端同志对弹性盒(Flex)布局很熟悉,但是对于网格(Grid)布局很陌生,甚至在项目中从来没有用到过。今天就带大家学习一下网格布局是如何玩的。 1. 什么……
thumbnail

HTML菜鸟教程:form表单标签大全

表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。 表单由一种或多种的小部件组成,……
thumbnail

html菜鸟教程:图像标签img、figure、figure

图片是互联网的重要组成部分,让网页变得丰富多彩。本章介绍如何在网页插入图片。 <img> <img>标签用于插入图片。它是单独使用的,没有闭合标签。……
thumbnail

html菜鸟教程:多媒体标签video、audio...

除了图像,网页还可以放置视频和音频。 <video> <video>标签是一个块级元素,用于放置视频。如果浏览器支持加载的视频格式,就会显示一个播放器,……
thumbnail

CSS 选择器is、where、has用法实践

CSS 选择器允许我们按HTML文档中的类型、属性或位置选择元素。本教程介绍了三个新选项:is()、:where()和:has()。 选择器通常用于样式表中。以下示例选中所有&l……
thumbnail

CSS 属性选择器,一文了解

属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。 一、了解属性选择器 CSS属性选择器……
thumbnail

CSS四种2D变形:旋转、缩放、倾斜、位移变形

变形是CSS3中比较颠覆性的特征之一,今天介绍四种2D变形旋转、缩放、倾斜、位移变形。 变形在CSS3用 transform 属性 来实现。   transform-origin 属性 t……
thumbnail

CSS基础入门:边框和圆角

边框 CSS中用border 定义边框属性。 border语法:border:[宽度][样式][颜色] 其中: 宽度:边框的宽度,单位可以使px、em、rem 等单位,也可以使用thin、medi……
thumbnail

CSS3 过渡动画:transition属性

CSS3新添加了过渡动画, 即使用者定义好 一个元素的开始状态和结束状态, CSS会根据变化曲线形成补间动画效果。 CSS3中用transition属性来描述动画如何运动。……
thumbnail

CSS 3D变形形式:旋转、空间位移

今天介绍 两种 3D变形的形式:3D旋转、空间位移。 3D旋转 在上一节 2D变形中, 我们用到了 transform  属性。那么在3D旋转中同样还是这个属性(怎么老是它)……
thumbnail

CSS选择器:通用、元素、id、CLASS

通用选择器 选择所有元素 *{ } 元素选择器 元素选择器,就是“选中”相同的元素,然后对相同的元素定义同一个CSS样式。 HTML <p>Lorem</p> <……
thumbnail

9 个有趣的 HTML 标签和属性

1. Progress bar 进度条 1 <progress value="32" max="100">32%</progress> 2. Expansion panel (折叠面板) 1 2 3 4 5 6 ……
thumbnail

CSS sticky 粘性定位的真正工作原理!

CSS中的sticky定位有很好的浏览器支持,但许多开发者并没有使用它。原因有两方面:一是等待浏览器支持的时间太长,导致这个特性被遗忘;二是大部分开发者并不……