- 综合排序
- 最热优先
- 最新优先
- 来自专栏白菜博客
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 - </body> 1.10.4固定定位（fixed） 固定定位实现的功能是比如侧边功能调，不管你怎么滑动网页，它都会固定在某一个位置不变。来自专栏python、mysql、go知识点积累
css(2)
一、css属性及用法 1.1css样式操作 块级标签的长度和宽度都是可以设置的，但是行级标签不可以直接设置长度和宽度。 1.7css盒子模型 值 描述 margin 控制元素与元素之间的距离 padding 控制内容与边框之间的距离 border 内容外面的边框 content 内容 ? 1.8float（浮动） 在css中任何元素都可以浮动，浮动的特点： 浮动的框可以左右移动，直到碰到网页的边框或者另一个浮动的框，浮动的框可以覆盖固定的框，而且浮动的框会把原来框占有的位置让出来。 >
div2p
</body> clear属性规定元素的哪一册不允许其他浮动元素。 >
2.CSS特性-CSS进阶
CSS继承性示例1.png ② 例2 <! CSS继承性示例2.png Ⅰ.a标签的继承 按照例1 体现的CSS继承性，例 2 的子元素也应该是蓝色，但是子元素（a元素）却显示深紫色。 2.层叠性 在网页中，对于同一个元素，我们重复定义了多个相同的属性时，CSS将会怎样处理？ （1）“后来者居上”原则 CSS的层叠性，指的是样式的覆盖。 CSS层叠性示例1.png ② 例2 <! CSS层叠性示例2.png
css入门（2）
一、基本选择器 1、元素选择器 元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。 语法： image.png 举例： <! html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/<em>css</em> <em>2</em>、id选择器 我们可以为元素设置一个id，然后针对这个id的元素进行<em>CSS</em>样式操作。注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理一样。 我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行<em>CSS</em>样式操作。 p元素和span元素是两个不同的元素，但是我们可以为这两个不同的元素设置相同的class，这样就可以同时为这两个不同的元素设置相同的<em>CSS</em>样式了。 举例<em>2</em>： <!
CSS笔记(2)
CSS字体属性 CSS Font(字体)属性用来定义字体系列:大小,粗细和文字样式(如斜体). 文字字体 CSS使用font-family属性定义文本的字体系列 文字大小 CSS使用font-size属性定义文字大小 文字粗细 CSS使用font-weight 设置文字的粗细效果 文字样式 CSS使用font-style属性设置文本的风格 平时我们很少给文字加斜体,反而要把斜体改为默认不倾斜的字体. font-weight font-size/line-height font-family; } 注意: 1.使用font属性时,必须按照上面的语法格式中的顺序书写,不能更换顺序,各个属性之间一空格隔开. 2. CSS文本属性 CSS Text睡醒可定义文本的外观,比如文本的颜色,对齐文本,装饰文本,文本缩进,行间距等. ①文字颜色 color用于定义文本的颜色 ②对齐方式 text-align
【CSS3】css开篇基础（2）
2.Emmet语法 它是前端开发者提高编码效率的强大工具。 使用自增符号 $ 的示例 : 使用{}的示例： 以上都是html结构标签快速生成，下面是css的快速生成 CSS 基本采取简写形式即可： 1.比如w200 按tab 可以生成 width: 200px ; 2.比如lh26 按tab 可以生成 line-height:26px; 总之该快捷生成都输入首字母。 这种方法可以减少代码冗余，提高CSS的可维护性和效率。 任何形式的选择器都可以作为并集选择器的一部分，包含其他复合选择器和简单选择器。 要实现固定背景图片，关键在于将 background-attachment 设置为 fixed。
css基础样式2
本文设计到的css属性有background、inline-block、line-height 一，background 1.background-color 设置背景图片的颜色 background-color 属性是css3的属性，IE9 以下不支持，需要注意其的兼容性。 cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。 按照容器高度来缩放背景图片。 ? （2）设置空白字符的fontsize为0，就消除了空白字符的占用位置。 再重新设置子元素的font-size ? 4.两个行内元素容易会产生对不齐的状况。 ? <数字> 代表行高为本身文字高度的2倍，下面例子中.box和p的行高都是自身字体高度的两倍 ? line-height=20px<长度> line-height=200%<百分比> 代表是父元素的字体行高的2倍。
CSS基础学习（2）
CSS-盒模型 1-1 盒模型-content 设置一个矩形 用到新标签—div 标签 content
css 总结2 原
background-repeat: no-repeat、 repeat; （5）background-attachment:fixed //固定背景的位置，不随滚动条滚动 background-origin是css ; 等价于： border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; 请参阅 CSS 颜色值。 inset 可选。将外部阴影 (outset) 改为内部阴影。 scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 ; } div:hover { width:300px; } 8、CSS3 @keyframes div { width:100px; height:100px;
CSS(CSS3)选择器（2）
该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1） 一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。 [id ^= start]{ background-color:red; ] /*匹配以id属性的值为start开头的，如id="start1",id="start2",id="start3" [id $= hass]{ background-color:red; ] /*匹配以id属性的值包含hass的，如id="1hass",id="hass2",id="3hass444"的元素 input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然， 参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
CSS实现表单
-- 2.密码 --> <label for="">密 码:</label> <input type="password" name="pwd"> type="checkbox" name="like" value="1">学习写代码 <input type="checkbox" name="like" value="<em>2</em>" option> <option value="1">上海</option> <option value="<em>2</em>"
2.CSS选择器-CSS基础
若出现多个相同id，那么CSS或JavaScript会无法识别，这个id对应的是哪个元素。 2.class属性 class，类。思想和别的编程语言相似。 属性n : 取值n; } 1.元素选择器 元素选择器，就是选中指定的相同的所有元素，然后给相同的元素定义同一个CSS样式。 （2）示例 ① 例1 <! 元素选择器示例1.png 2.id 选择器 其实，id 选择器就像是我们的身份证号码一样，在同一个页面中，不允许出现 2 个相同的 id。 （2）示例 ① 例1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <! （2）减少大量重复代码 要为两个及以上元素定义相同的样式，建议使用class 选择器，因为可以减少大量重复代码。 （3）示例 ① 例1 <!
前端基础-CSS-2
上篇我们介绍了css的的由来和编写语法，并展示了一个基本的例子，这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示，css包含非常多的样式设置，在这里我会把最基础和常用的样式设置展示给大家 这个文件就是我们一会要写的样式文件，为了展示不带样式的页面，我先把这行注释掉了，那这段代码用chrome打开截图如下： 那接下来我们完成样式文件的编写，首先我们完成的任务如下： 1、设置背景颜色浅蓝色 2、 : #a8e6ff; } /*h1的边框*/ h1{ border: 1px solid black; } /*h2颜色*/ h2{ color: purple; } /*段落背景色,注意是div下的p : 5px solid gray; width: 400px; height: 200px; } /*超链接红色*/ a{ color: red; } /*表单边框*/ input{ border: 2px 的一些基本使用已经解了，那下篇我们要说css中的盒子模型，这是css学习的一个重点，我们下篇见。
css实现漂亮弧形
在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？ 好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css的after伪类来实现弧形。 ? 实现效果如下图： ? 上面的图看起来好像弧度太大，几乎要看不出。依上面的实现原理，弧度要多少可以是自己微调。 看下图的实现： ? 学会了就快去实现你丰富多彩的界面吧~
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; borderCSS 实现“故障”特效
当然，广义的故障艺术不仅仅指这种效果，我觉得是很宽泛的，本文将介绍一些 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 去实现这样一些类似的效果比较有意思，就动手尝试实践了一番，相关术语或者名词理解错误烦请各位谅解指出。
CSS实现eq(n)
在某些特殊情况下，我们需要用纯CSS实现jQuery的eq(n)选择器，而CSS没有直接提供类似方法。 我们可以通过CSS的:nth-child。
Css实现聊天框
DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>css聊天框</title> <style> position: relative; max-width: 260px; padding: 10px 6px; border: 2px
CSS实现渐变字
CSS 实现渐变字 先来下前置知识。如果想速通，也可指直接到渐变字实现 什么是渐变 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。 然而，我的 chrome 浏览器都需要-webkit-background-clip: text;才能实现。另外，文字的颜色应该设置为透明，否则会覆盖掉背景色。 渐变字实现 看到这里，基本就能实现渐变字啦。 代码如下。 <! 渐变 - CSS（层叠样式表） | MDN (mozilla.org) CSS3 渐变 | 菜鸟教程 CSS3 新特性概述_阿锐丫的博客-CSDN 博客_css3 新增特性
CSS实现图形效果
CSS实现图形效果
CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星、心形、消息框。 正方形
