本文主要讲述block,inline和inline-display的特性与区别
原创
2023-03-07 01:22:42
105阅读
<html><body><div class="header" style="text-align:center">header</div><div> <div style="display:in
原创
2023-03-07 01:22:58
77阅读
3.5 接触未来(二)—CSS 3的世界很精彩
层叠样式表(Cascading Style Sheets,CSS)的出现已经有13年时间了,目前已被广泛使用的CSS 2.1标准的出现也有11年了,CSS 2.1 在浏览器兼容性上也产生了针对浏览器解析CSS Bug的Hack技术,现在是时候引入CSS 3了。不要害怕兼容性,也不要害怕你的设计,让客户知道引入CSS 3
转载
精选
2011-07-25 11:14:46
378阅读
在上期《初遇HTML先生和CSS×××》中,HTML先生与我们大家详细的介绍了他自己,在今天这篇文章,CSS×××也将详细的介绍一下她的游戏规则,接下来的时间,就留给我们的CSS×××。有请,我们漂亮的CSS×××。CSS×××:Hi,大家好,我是Cascading Style Sheets,简称CSS,中文名,层叠样式表。今天,我非常高兴,又和【web前端开发】的小伙伴们见面了,在这里认识大家,我感到非常
转载
2019-01-02 15:42:47
473阅读
在Web开发中,过渡(Transition)是一种能够在元素状态发生改变时,通过动画效果平滑地过渡到新状态的技术。这使得
原创
2024-03-02 00:50:11
166阅读
你是否曾在网页上看到一些酷炫的元素在状态变化时平滑而流畅地过渡?这就是CSS过渡效果的魔力所在!在这篇
CSS选择符目前有下面这几个:后代选择符空格( )、子选择符箭头(>)、相邻兄弟选择符加号(+)、随后兄弟选择符弯弯(~)和列选择符双管道(||)。其中对于前4个选择
原创
2022-05-01 17:41:12
456阅读
在 CSS 中,我们经常会与各种方向方位打交道。 譬如 margin、padding,它们就会有 margin-left、margin-right 或者是 padding-left、padding-right。还有定位中的 left、top、right、bottom,它们表示了上下左右不同的方位。
原创
2022-04-30 22:01:10
105阅读
BFC(块级格式化上下文)是CSS中的独立渲染区域,能解决布局中的常见问题。它通过创建边界感,防止外边距塌陷、清除浮动影响、阻止元素被覆盖。
在这里致敬《css世界》的作者。在2003年1月,SVG1.1被确立为W3C标准,你没有看错,是2003年。要知道,CSS2.1是2007年才发布的,考虑到SVG开始火起来是最近几年,也就是差不多10年的时间,SVG都默默无闻,鲜有人问津,到底是怎么回事。很多人认为SVG的竞争对手是flash。对,是竞争对手。但是现在看来,SVG显然要比flash优秀得多,SVG开放,标准,和CSS和Java...
原创
2021-07-05 11:34:53
211阅读
使用缺省 src 的<img>元素实现滚屏加载效果,但是,就有可能存在这样一个体验问题:如果我们的 JavaScript 加载比较慢,我们的页面就很有可能出现一块一块白色的图片区域,纯白色的,没有任何信息,用户完全不知道这里的内容是什么。 虽然 alt 属性可以提供描述信息,但由于视觉效果不好,被隐藏掉了。我们可以在图片还没加载时就把 alt 信息呈现出来: 1 <
转载
2021-02-08 19:28:05
135阅读
2评论
使用缺省 src 的<img>元素实现滚屏加载效果,但是,就有可能存在这样一个体验问题:如果我们的 JavaScript 加载比较慢,我们的页面就很有可能出现一块一块白色的图片区域,纯白色的,没有任何信息,用户完全不知道这里的内容是什么。 虽然 alt 属性可以提供描述信息,但由于视觉效果不好,被隐藏掉了。我们可以在图片还没加载时就把 alt 信息呈现出来: 1 <
转载
2021-01-21 11:25:18
169阅读
2评论
大厂技术坚持周更精选好文1. 前言在学习 CSS 的过程中,我经常会被数不清的属性和特性弄得晕头转向。作为前端新手,经常会坐在显示器前花很多很多时间去 “追” 视觉稿,也经常会在 “为什么这个属性不生效” 和 “为什么这个属性生效了但是不是我想要的效果” 之间摇摆,直到我开始看张鑫旭老师的《CSS 世界》,才开始渐渐地走进 CSS 世界,才明白原来 CSS 的背后...
转载
2022-08-05 15:16:17
128阅读
CSS 是前端开发的重要基础之一,掌握它不仅能让网页更美观,还能让用户体验更流畅。然而,对于初学者来说,CSS 可能会因为规则繁多而感到复杂。本文将通过简单清晰的示例,帮助你从基础入手,逐步掌握 CSS 的核心技巧,并为成为 CSS 高手打下坚实的基础。
在《从零到高手:揭秘 CSS 的魔法世界(一)》中,我们学习了 CSS 的基础知识以及一些常用的样式技巧。接下来,在本篇中,我们将深入探索一些进阶的 CSS 技术与应用,让你更进一步掌握 CSS 的魔法,为前端开发增添更多创意。
原图:grayscale滤镜(灰度滤镜)彩色图片通过滤镜实现图片转变灰色.sub02{ width: 330px; float: right; background: grey; filter: grayscale(80%); -webkit-filter: grayscale(80%); -moz-filter:grayscale(80%); heigh
原创
2022-10-28 04:29:17
79阅读