- 综合排序
- 最热优先
- 最新优先
- 来自专栏白菜博客
html结合css滑稽笑脸表情包实现思路
实现效果：首先先把 脸，眼睛，鼻子，嘴用div先搭建起来
开始书写css ，这里使用动画+关键帧实现区间内改变眼球的形状。 border-radius: 50%; transform: translateX(0); } }以上代码实现了 name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/<em>css</em>66410编辑于 2024-05-30 - 来自专栏睡不着所以学编程
CSS笔记(6)
CSS笔记(6) 上一节的背景图片位置还没写完就匆匆发表了,现在接着后面的内容. 的背景 背景色半透明 CSS为我们提供了背景半透明的效果 background : rgba (0, 0, 0, 0.3) ; 最后一个参数是alpha透明度,取值范围在0~1之间,越低透明度越高 fixed(背景固定) 背景简写 书写更简单 背景颜色 图片地址 背景平铺 背景滚动 背景位置 背景半透明 背景颜色半透明 background:rgba(0, 0, 0,alpha); 后面必须是4个值 CSS 层叠性原则: 样式冲突,遵循的原则是就近原则.哪个样式离结构近,就执行哪个样式 样式不冲突,不会层叠. 2.继承性 CSS中的继承,子标签会继承父标签的某些样式,如文本颜色和字号.简单理解就是:子承父业 恰当地使用继承可以简化代码,降低CSS样式的复杂性.
74210编辑于 2022-09-20 - 来自专栏网络收集
css入门（6）
，在CSS进阶阶段我们会深入讲解其他CSS单位。 ://www.w3.org/1999/xhtml"> <head> <title>background-position属性</title> <style type="text/<em>css</em> ://www.w3.org/1999/xhtml"> <head> <title>background-position属性</title> <style type="text/<em>css</em> 七、background-attachment属性 在<em>CSS</em>中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。 /www.w3.org/1999/xhtml"> <head> <title>background-attachment属性</title> <style type="text/<em>css</em>
66730编辑于 2022-04-12 - 来自专栏编程学习之路
【CSS3】css开篇基础（6）
2.属性选择器 属性选择器是CSS的一种选择器，用于根据HTML元素的属性来选择元素。它允许你根据元素是否具有某个属性，或属性的具体值来应用样式。 属性且值以val结尾的E元素 5.E[att*="val"] 匹配具有att属性且值中含有val的E元素 其 [] 权重跟类选择器一样都为10. 3.结构伪类选择器 结构伪类选择器是CSS 不过，可以通过CSS样式将伪元素修改为块级元素（block element）或其他显示类型。 6. 函数让你在声明CSS属性值时执行一些计算。
26410编辑于 2024-11-02 - 来自专栏达达前端
6-css样式
将元素转换为块级元素 inline,将元素转换为行级元素 inline-block,将元素转换为内联块元素 none将元素隐藏 描边border 线条的样式： dashed虚线,dotted点线，solid实线 css 知道浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它 浮动会产生块级框，而不管该元素本身是什么 清除浮动带来的影响 clear清除浮动 none不清除,left不允许左边有浮动对象，right,both 利用伪类实现清除浮动
2.6K20发布于 2020-05-18 - 来自专栏司六米希
css背景 ( 6种实例）
css背景实例 图片网站 背景 1.设置页面的背景颜色 2.设置图像作为页面背景 2.1图片加入至背景的方式 2.1.1通过链接 2.2背景样式 3.定位背景图像 4.固定背景 5. 多图片背景 6.渐变背景 CSS背景属性 图片网站 阿里巴巴矢量图标库 pixabay 图片转链接网站 背景 1.设置页面的背景颜色 <style> body { background-color background: url('') no-repeat 10px 0px..., url('') no-repeat 10px 60px..., url('') no-repeat 10px 120px...; 6. 渐变背景 background: linear-gradient(45deg, blue, red); CSS背景属性 背景属性 菜鸟教程 background-color：设置元素的背景颜色。
61210编辑于 2022-11-15 - 来自专栏马涛涛的专栏
CSS6：flex布局
30分钟彻底弄懂flex布局 Flex 布局教程：语法篇 CSS3【Flex布局】有趣的青蛙游戏 游戏一共24关，每关把所有颜色青蛙移动到对应颜色荷叶上即可过关 通关后就会使用影响布局的属性。
97320发布于 2019-03-14 - 来自专栏菜鸟计划
CSS基础语法(三) CSS的6种特性
(但注意有一些css样式是不具有继承性的。如border:1px solid red;) 继承时会一直向上找，如果在父级找到了就继承父的样式，如果父级没找到会去祖级去找，找到后会继承祖级的样式。 是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。 下面是权值的规则： 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
6.重要性： 我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。 如下代码： p{color:red!1.1K40发布于 2018-04-10 - 来自专栏coding for love
CSS入门6-盒模型
因此，CSS3中提供了一个新的属性，box-sizing，来控制和模型的表现形式。box-sizing有三个取值，分别是content-box，border-box和inherit。 只有Firefox实现了这个值，它在Firefox 50中被删除。） content-box 默认值，表现形式同W3C标准和模型。 border-box 表现形式同IE盒模型，常用值，经常在css-reset中设置。 inherit 规定应从父元素继承box-sizing属性的值。 参考 深入理解盒模型 CSS 盒子模型 css 盒子模型理解 想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC CSS 布局_1 盒模型 学会使用box-sizing布局
79610发布于 2018-08-27 - 来自专栏初见Linux
6.列表样式-CSS基础
但我们应该遵顼结构与样式分离的原则，所以我们应该在CSS中通过list-style-type属性来定义列表项符号。 -- <link rel="stylesheet" type="text/<em>css</em>" href=".. /<em>css</em>/边框样式.<em>css</em>"/> --> <style type="text/<em>css</em>"> ul{ list-style-image 列表项图片示例1.png 2.字体图标（iconfont）重点 （1）实际开发 在实际开发中，对于列表项图片一般都不会用list-style-image属性来实现，而是使用更为高级的字体图标（iconfont ）来实现。
1.1K40发布于 2020-10-29 - 来自专栏达达前端
Day6:html和css
Day6:html和css 复习 达叔与他的朋友们-复习.png margin: 0; padding: 0; 效果 <! margin-top: -100px; } </style> </head> <body>
</body> </html> 推荐 Day1:html和css Day2:html和css Day3:html和css Day4:html和css Day5:html和css 如果看了觉得不错 点赞！62330发布于 2019-07-03 - 来自专栏python成长之路
CSS实现表单
-- 6.下拉列表 --> <label for="">籍 贯:</label> <select name="address
91020发布于 2019-03-01 - 来自专栏前端劝退师
6 个没人讲过的 CSS 属性
原文地址：6 CSS Properties Nobody Is Talking About 原文作者：Anurag Kanoria 译文出自：掘金翻译计划 本文永久链接：https://github.com /xitu/gold-miner/blob/master/article/2021/6-css-properties-nobody-is-talking-about.md 译者：霜羽 Hoarfroster 尽管创建 Web 应用广受欢迎且日趋复杂，但大多数开发者仍有很多不了解的 CSS 属性和技巧。 以下是你可能从未听说过的 6 个 CSS 属性： 1. all 你是否曾经使用过 CSS 框架呢？ horizontal-tb 属性则实现默认排列文本的效果。 ? 来源：MDN Web 文档 你可以在这里找到相关实现和代码块。 尽管我分享了一些较少被人们所提及的 CSS 属性，但这样的属性还有很多。 虽然 CSS 已有 20 多年的历史了，但它仍然具有许多奇技淫巧。 知道这些 CSS 属性可以实现具有艺术气息的网站。
1.3K10发布于 2021-05-11 - 来自专栏python3
CSS属性汇总--(6) 定位属性3
把元素的顶端与行中最低的元素的顶端对齐 text-bottom 把元素的底端与父元素字体的底端对齐 length % 下面的例子演示了如何在文本中垂直排列图象： <html> <head> <style type="text/<em>css</em> 如果此值被用在其他的元素上，会呈现为 "hidden" inherit 下面的例子演示如何使表格元素叠加 <html> <head> <style type="text/<em>css</em>"> tr.coll <html> <head> <style type="text/<em>css</em>"> img.x { position:absolute; left:0px; top:0px; z-index:-
2.4K20发布于 2020-01-14 - 来自专栏全栈技术
2023 年 6 大最佳 CSS 框架
Tailwind CSS Tailwind CSS 是一种流行的实用程序优先 CSS 框架，它提供了一组可用于设置 HTML 元素样式的预定义类。 更快的开发：Tailwind CSS 可以轻松创建响应式的现代 UI，而无需编写大量自定义 CSS 代码。这节省了开发时间和精力。 过度使用类：如果不仔细考虑，很容易 过度使用 Tailwind CSS 类，导致 CSS 和 HTML 文件膨胀，这会对网站性能产生负面影响。 设计限制：Tailwind CSS 是一个实用程序优先的框架，与传统的 CSS 框架相比，它可能会限制设计的灵活性和创造力。 它的 CSS 类非常易于使用和理解，是初学者的绝佳选择。 与其他 CSS 框架相比，Bulma 的文件非常小，因此页面加载时间更快。
5K10编辑于 2023-04-07 - 来自专栏grain先森
css实现漂亮弧形
在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？ 好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css的after伪类来实现弧形。 ? 实现效果如下图： ? 上面的图看起来好像弧度太大，几乎要看不出。依上面的实现原理，弧度要多少可以是自己微调。 看下图的实现： ? 学会了就快去实现你丰富多彩的界面吧~
2.2K30发布于 2019-03-29 - 来自专栏Cellinlab's Blog
CSS 实现各种形状
# 原理 # border-width 三角形 图片 <html> <body>
</body> </html> <style> #border-triangle { height: 0; width: 0; border-left: 50px solid red; border-top: 50px solid blue; border-right: 50px solid green; border77030编辑于 2023-05-17 - 来自专栏全栈前端精选
CSS 实现“故障”特效
当然，广义的故障艺术不仅仅指这种效果，我觉得是很宽泛的，本文将介绍一些 CSS 能够模拟完成的故障艺术效果。 使用混合模式实现抖音 LOGO 首先从静态的开始，抖音的 LOGO 就是很好的一个例子。 而实际上，是两个 J 形重叠在一起，重叠部分表现为白色，这个特性，使用 CSS 的混合模式 mix-blend-mode 非常好实现，而单个 J 形示意图如下： ? 关键点 主要借助伪元素实现了整体 J 结构，借助了 mix-blend-mode 实现融合效果 利用 mix-blend-mode: lighten 混合模式实现两个 J 形结构重叠部分为白色 所以整个效果只需要两个标签 /clippath/clippath-img-glitch 总结 本文重点介绍了纯 CSS 下使用混合模式和 clip-path 实现的一些故障艺术（Glitch Art），当然，上述的几个效果都不仅仅是靠这两个属性单打独斗就能完成的 我自己对 Glitch Art 的理解其实也比较浅显，只是觉得使用 CSS 去实现这样一些类似的效果比较有意思，就动手尝试实践了一番，相关术语或者名词理解错误烦请各位谅解指出。
2.8K10发布于 2020-02-19 - 来自专栏零域Blog
CSS实现eq(n)
在某些特殊情况下，我们需要用纯CSS实现jQuery的eq(n)选择器，而CSS没有直接提供类似方法。 我们可以通过CSS的:nth-child。
2K30编辑于 2022-03-16 - 来自专栏前端开发随笔
Css实现聊天框
DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>css聊天框</title> <style> .chat { position: relative; max-width: 260px; padding: 10px 6px
1.7K40发布于 2020-09-03
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号