CSS教程

刚才看某个大佬的博客，发现了一个很意思的东西，就是利用html和css代码来画一个冰墩墩和雪容融，下面放出代码，喜欢的小伙伴可以去测试了。html+css 实现冰墩墩效果html代码：<section class="bdd"><section class="m_body">&

下面记录一个利用纯CSS样式代码实现一个爱心形状的动态加载条，用到了CSS中的动画效果与伪元素样式，有一定的参考价值。感兴趣的小伙伴，不妨测试一下。纯CSS实现心形加载动画效果1、动画效果2、示例代码<style>#he{display: flex;justify-content: center;align-items: ce

发现一个有趣的东西，就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符，并且字符串中的每个一个字符一个接着一个的出现。纯CSS实现文字的打印机效果，要用到 animation 动画元素，下面先上示例代码。CSS实现文字打印机效果的方法1、先上效果图2、示例代码<style>.main {height:

写了一个带有表单的html页面，发现原生的 input 文件上传输入框样式太丑了，就琢磨着自己写个美化的样式，下面就是 html input 文件上传样的美化方法，单纯的只用CSS实现，很简单的。CSS 美化input上传按钮样式的方法美化实现逻辑：1、用 div 元素写一个美化的上传按钮2、将 input 上传按钮的透明度设置为 0 ，

html元素中checkbox与radio元素的样式在每个浏览器中显示的效果是不同的，为了统一它们在各个品牌浏览器中的显示样式，我们可以对它们做个简单的美化。html checkbox 元素美化实例：使用纯CSS代码就可以实现 checkbox 元素的美化，只需要隐藏掉 checkbox 选择元素，并使用css中的相邻兄弟选择器，来控制他

写几个利用纯CSS实现loading加载效果的示例，代码非常的简单，有需要的可以参考一下。CSS实现Loading加载的效果例1：loading 直线加载实例代码：<style>.load{width:120px;height:20px;background:linear-gradient(#000 0 0) 0/0% no-

web页面中使用一些CSS动画效果，可以使用网站看着更加的炫酷。下面这篇博文由飞鸟慕鱼说一个关于网页导航栏实现下划线跟随滑动效果的方法，此方法全部由CSS代码实现，非常的简单方便。CSS导航栏下划线跟随滑动效果示例图：实现代码：下面示例代码，复制保存到本为为html格式的文件，即可查看！<style>.items {displ

在web页面中 textarea 元素是默认可以通过鼠标来拖动大小的，但CSS也提供了一个 resize 属性，此属性可以用来设置 textarea 是否可以被鼠标拖动大小，以及拖动的方向等等。textarea 的 resize 属性resize：用来定义 textarea 元素是否可以被拖动大小。属性值：none：不能调整元素的尺寸；b

在CSS中px、em、rem都是计量单位都能表示尺寸，来标识字体的大小，但是他们之间是有所不同的，各有各的优缺点，下面就大略的说一下。css px1、px：像素，相对于显示器屏幕分辨率而言的。2、其作为单位是固定不变的，不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。css em1、em：其值是不固定，只会继承父元素的字体大小。

前端的html元素中，如果文字内容超出的其父元素的范围，该如何操作呢，下面就给出了一种CSS设置文本内容超出隐藏并显示三个点(省略号)的方法。CSS设置单行文本超出隐藏并显示三个点的方法示例代码：<style>#mo{width: 450px;border:1px solid #ccc;padding: 5px;/*下面设置文

写前端的一个input输入框的样式时，需要修改一下 input placeholder属性值字体的颜色，网上查了一下非常的简单，但也要记录一下，方便以后查看。CSS 设置修改 placeholder 的样式的方法使用下面的CSS选择器，就可以对指定的输入框 placeholder 属性进行设置！选择器代码：input::-webkit-i

记录几个CSS属性定义文本换行，不换行以及超出隐藏显示省略号的方法。CSS定义文本自动换行div{ word-wrap:break-word; word-break:normal;}CSS强制英文单词换行div{ word-break:break-all;}CSS强制不换行的方法div{ white-space:nowra

CSS画梯形的方法是很多的，下面就给出几个示例，各位参考一下。CSS画梯形的方法方法1：<style>#m{height: 0;width: 100px;border-top: 100px solid red;border-right: 37px solid transparent;}</style><div

利用CSS样式中的 filter 属性可以设置图片元素的可视效果，再配合使用 brightness() 来调整图片的亮度，就可以实现图片元素变暗的效果。CSS实现图片变暗的方法示例代码：<!--正常图片--><img src="https://www.feiniaomy.com/zb_users/upload/

现在很多网站的站长，都不喜欢别人任意复制自己网站上的内容。为了防止别人复制自己网站的内容，使用了各种各样的方法。下面就介绍一种。CSS user-select 属性user-select：规定指定元素中的内容是否被用户选中。语法：p{ user-select:none}可选值：auto：默认。如果浏览器允许，则可以选择文本。none：防止

在css中，可利用transform属性实现垂直翻转效果，此属性可对DIV元素，图片元素都有效果。而这篇博文所要说的图片垂直效果也要使用这个CSS属性。CSS 实现图片垂直翻转的方法实现代码：<img src="https://www.feiniaomy.com/zb_users/upload/2020/08/202008

在css中有一个属性 text-transform ，如果取其值为 uppercase 时，可以将所有的小写字符转为大写。其使用方法如下！CSS text-transform 属性text-transform：转换指定元素的中文章语法：p {text-transform:uppercase}可取值：none：默认。定义带有小写字母和大写字

在前端web页面中，美化表格时一般都是使用隔行变色的方案。而这种方案实现起来也非常的简单....table表格隔行变色的方法table表格选择奇数行或偶数数要利用CSS中的 nth-child() 选择器，其 nth-child() 选择器中的值可以是数字，关键词或公式。nth-child(2n-1) //奇数行nth-child(odd

如果CSS中的 pointer-events 属性，设置其值为 none 的话，可以禁止 button 元素被点击，并且也可禁止其 JS 点击事件。CSS pointer-events 属性pointer-events：设置元素是否对指针事件做出反应语法：pointer-events: auto|none;可选值：auto：默认值，可以

有个小需求，要利用CSS代码去掉或隐藏input输入框中的光标，当然是不能影响input输入，具体的方法如下。CSS 隐藏或去掉输入框光标的方法方法1：<p>下面的有光标</p><input type="text" value=""><p>下面这个没光

在css样式代码中，可以利用 text-indent 属性来设置文本块的首行缩进，使用方法也非常的简单，可以参考下面的示例。css text-indent 属性text-indent：为CSS样式代码中的一个属性，它规定文本块中首行文本的缩进大小，其默认值为0，可以将值设置为其父元素的百分比或指定的缩进长度。例：text-indent: