- 综合排序
- 最热优先
- 最新优先
- 来自专栏白菜博客
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笔记(9)
CSS笔记(9) 圆角边框(重点) 语法: border-radius : length 采用的是半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果. CSS部分: .box2 { width: 100px; height: 100px; border: 1px solid 盒子阴影 CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影. 文字阴影: 在CSS3中,我们可以使用text-shadow来添加文字阴影效果.
51210编辑于 2022-09-20 - 来自专栏coding for love
CSS入门9-定位机制
CSS也提供了position属性，控制队伍的定位。 static 默认定位，元素框按照块级元素从上到下，行内元素从左到右依次排列，在普通文档流中。就是最原始的队形。 （具体的覆盖规则可以看CSS入门11-定位与覆盖） fixed 固定定位，元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身，脱离了普通文档流。 参考： CSS 定位 (Positioning) 脱离文档流分析 css定位流布局 CSS中的三种基本的定位机制（普通流、定位、浮动） CSS定位的三种机制：普通流、绝对定位和浮动 html/ css基础篇——DOM中关于脱离文档流的几种情况分析 CSS position绝对定位absolute relative CSS绝对定位absolute详解
48030发布于 2018-08-27 - 来自专栏初见Linux
9.背景样式-CSS基础
一、背景样式 在CSS中，背景样式包括两个方面：背景颜色、背景图片。 在Web2.0 时代，对于元素的背景样式，我们都是使用CSS属性来实现。 ② 用法 背景图片是使用CSS来实现的，而图片是使用HTML来实现的。 ③ 用途 大多数情况下都是使用图片img元素来实现，但在某些场合无法使用图片的的时候再考虑背景图片。 height: 160px; border: 1px solid #66A9FE; background-image: url(.. height: 500px; border: 1px solid #66A9FE; background-image 背景图片位置(background-position)示例1.png （2）实际开发 在实际开发中，background-position属性一般用于实现CSS Spirit（精灵图片）。
1.3K30发布于 2020-10-29 - 来自专栏WordPress果酱
WordPress 主题教程 #9：Style.css 和 CSS 介绍
Style.css 和 CSS 介绍是从零开始创建 WordPress 主题系列教程的第九篇，学习 CSS 最好的方法就是去使用它，不像 XHTML 和 PHP 需要接触模板的核心文件，同样不要需要理解任何基本概念 在主题信息两边的 /* 和 */ 符号是为了让主题的信息不影响该文件的其他内容，这是 CSS 的注释。 下面是处理后的主题信息 第1步：打开 style.css 文件 打开 Xampp，主题文件夹，FireFox，IE 浏览器和 style.css 文件。 第2步：添加 CSS 代码 在 style.css 文件中输入以下代码： body{ margin: 0; font-family: Arial, Helvetica, Georgia, Sans-serif （我在涉及到 XHTML，PHP，CSS的时候都使用标签，属性和值这些术语是为了保持简单，实际上 PHP 和 CSS 有不同术语。
1.2K30编辑于 2023-04-15 - 来自专栏前端知识分享
第9天：CSS精灵图
今天重点学习了CSS精灵图。 “CSS精灵”，英语css sprite，所以也叫做“CSS雪碧”技术。 是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 css精灵有什么优点，就是减少了http请求。 但是用了css精灵，小图片变为了一张图，http请求只有1个了。 ="UTF-8"> 5 <title>精灵图练习</title> 6 <style> 7 .box{ 8 height:138px; 9
1.2K30发布于 2018-09-11 - 来自专栏达达前端
Day9:html和css
标题图 Day9:html和css <head> <meta charset="UTF-8"> <title></title> <meta name="description -- 针对浏览器 --> <link rel="stylesheet" href="<em>css</em>/normalize.<em>css</em>" /> <! -- 对网页 头部和底部样式 --> <link rel="stylesheet" href="<em>css</em>/base.<em>css</em>" /> <! -- 首页的css 只写首页的 独有的--> <link rel="stylesheet" href="<em>css</em>/index.<em>css</em>"> </head> 案例: <! ) border-radius: 50%; 盒子阴影(CSS3) box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； box-shadow:
1K30发布于 2019-07-03 - 来自专栏前端自习课
【CSS】599- 9个很棒的CSS边框技巧
CSS图像边框 你是否曾经想象过你的元素周围有甜甜圈？ 现在，你无需过多的编码即可通过纯CSS添加它们。 为此，你需要在元素的CSS代码中使用 border-image 属性。 padding: 40px; box-shadow: inset #009688 0 0 0 5px, inset #059c8e 0 0 0 1px, inset #0cab9c 0 0 0 10px, inset #1fbdae 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #48e4d6 0 0 0 17px, inset #e5f9f7 0 0 0 21px, inset #bfecf7 0 0 0 22px } 效果 5.只有阴影CSS边框 有时我们需要在现成的设计中添加边框 box-shadow: 0 0 0 10px #009688; border: 10px solid #009688; outline: dashed 10px white; } 效果 9.
2.7K10发布于 2020-05-26 - 来自专栏菜鸟计划
CSS基础语法(二) CSS的9种选择器
就是不合法的 p:before{content:"text"} 4、:after 在元素内容后面插入内容 默认这个伪元素是行内元素，继承元素可继承的属性 p:after{content:"text"} 9. 属性值以"b"开头的所有元素 [class $="b"] 选择class属性值以"b"结尾的所有元素 [class *="b"] 选择class属性值包含"b"的所有元素 上面三个属于正则匹配，是CSS3
1.5K30发布于 2018-04-10 - 来自专栏html5期末大作业
使用HTML+CSS实现一个静态页面——面包蛋糕 (9页)
其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效 --- 四、网站效果 图片 图片 图片 图片 图片 图片 图片 图片 图片 图片
五、 代码实现 HTML结构代码 <! "> </ 1px solid; BORDER-LEFT: #d1d6c4 1px solid; BORDER-BOTTOM: #d1d6c4 1px solid; BACKGROUND-COLOR: #f7f9f3 (GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid;77930编辑于 2022-08-23 - 来自专栏coding for love
4-9 css 文件的代码分割
简介 本节主要是介绍 MiniCssExtractPlugin 插件，该插件用于将 css 提取成单独的文件。 2. 打包 css 我们来看一下，webpack 是如何进行 css 文件的打包。 /style.css'; console.log('index'); /*style.css*/ body { background: green; } 打包如下： ? image.png css 文件不存在，index.html 中也不存在 style 或者 link，但是 index.js 中却存在 css 先关逻辑: ? image.png 最终 css 因为 styleloader 执行后被注入到 html 中。那如果我们想单独输出 css 文件该如何做呢？ 3. 关于 css 为什么要单独提取，我并没有看到哪里有说原因。我所能想到的，第一是方便资源的管理和更新，css 和 js 放到线上以后可以单独更新。
76830发布于 2020-03-20 - 来自专栏python成长之路
CSS实现表单
-- 9.清空数据 --> <input type="reset" > <input type="button" value="普通按钮">
91020发布于 2019-03-01 - 来自专栏算法与编程之美
使用for语句实现9*9乘法表
1 问题 9*9乘法表的数量较大，直接打印需用大量的代码，如何用更简单的方法实现对9*9乘法表的打印。 2 方法 运用for循环结构对1-9进行循环处理，以得到9*9乘法表及运算结果 3 实验结果与讨论 解决此类问题需要用到fori循环结构，以及if条件语句。 实现结果: 4结语 在编写代码时，由于没有提前理清fori结构之间的关系，导致一直没有得到想要的结果。这也提醒了我们在每次编程之前对该程序的算法要先理清逻辑关系，以免在编程时出错。
47110编辑于 2023-01-03 - 来自专栏云开发小程序1
【积水成渊】9 个CSS 伪元素
这是一个例子： video::backdrop { background-color: gray; } ::target-text 如果浏览器支持文本片段，则CSS::target-text伪元素表示已滚动到的文本
40130编辑于 2023-10-14 - 来自专栏腾讯NEXT学位
9个独特的 CSS 背景视觉效果
其实，借助于CSS和JavaScript的力量，可以创建一些独特的视觉效果，可以使体验更加优雅。 CSS颜色混合模型(Blend Mode)视觉效果 CSS的混合模型(Blend Mode)是一个新属性，可以实现Photoshop中的图层的混合模型的效果。 利用它和鼠标的滚动可以实现一些非常酷的颜色滚动效果。比如下面这个例子就使用CSS的混合模型(Blend Mode)和背景图片实现的一个效果： ? 在之前要实现这样的效果，可能要做很多额外的事情。不过现在好了，利用CSS新的属性transform可以非常轻松的实现这样的效果： ? 这个效果完完全全只需要一点点CSS代码，不需要JavaScript。 ? 图片移动放大缩小视觉效果 下面这个效果在一些电商网站上用的比较多。
2.8K50发布于 2018-05-14 - 来自专栏grain先森
css实现漂亮弧形
在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？ 好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css的after伪类来实现弧形。 ? 实现效果如下图： ? 上面的图看起来好像弧度太大，几乎要看不出。依上面的实现原理，弧度要多少可以是自己微调。 看下图的实现： ? 学会了就快去实现你丰富多彩的界面吧~
2.2K30发布于 2019-03-29 - 来自专栏Cellinlab's Blog
CSS 实现各种形状
/body> </html> <style> #curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; transform: rotate(10deg); } #curvedarrow:after { solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px
77030编辑于 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>
1.7K40发布于 2020-09-03
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号