欢迎来到飞鸟慕鱼博客,开始您的技术之旅!
当前位置: 首页 CSS列表

CSS

微前端有哪些框架

什么是前端框架?答:在了解框架之前,大家至少要知道前端中的这三个部分:HTML,CSS,JavaScript。. HTML:负责结构,网页想要表达的内容由HTML书写. HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的基石。. HTML是一种基础技术,常与CSS、JavaScript一

在js中引入css文件

如何在html 中引入css 文件?答:1、 html引入css 文件之直接在div 中 使用 css 样式制作div+ css 网页 <div style="border:1px red solid;"> html引入css 文件</div> 说明:ht 1.导入外部 CSS 文件用的是link标签: 其

js 引入css文件

如何在html 中引入css 文件?答:1、 html引入css 文件之直接在div 中 使用 css 样式制作div+ css 网页 <div style="border:1px red solid;"> html引入css 文件</div> 说明:ht 1.导入外部 CSS 文件用的是link标签: 其

js文件引入css

如何引入js文件?答:二:使用import引入其它js,在添加了module属性的js代码块/文件里,import module from 'moduleName.js'即可引入一个js文件。 三:在被引入的js文件里,使用 export 输出指定的内容。如何在html 中引入css 文件?答:1、 html引入css 文件之直接在div

使用html+css代码实现冰墩墩和雪容融效果

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

CSS实现爱心形状动态加载条的方法

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

CSS实现打字机效果的方法

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

CSS美化html文件上传按钮的方法

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

html中checkbox与radio样式美化的简单实例

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

纯css实现Loading加载效果

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

纯CSS实现导航栏下划线跟随滑动效果

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

div设置可编辑内容的方法

在web页面中,如果要输入内容,就需要使用 input 或 textarea 元素,但它们只能输入或显示纯文本的内容,无论对一个带有CSS样式的内容进行显示或手机编辑的,所以DIV元素就提供了一个可编辑内容的属性 contenteditable 。HTML contenteditable 属性contenteditable 属性规定元素内

textarea 的 resize 属性介绍与使用方法

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

css中px、em、rem三者的概念与区别

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

css设置文本超出隐藏并显示三个点的方法

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

css设置placeholder的颜色样式的方法

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

CSS画梯形的方法

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

CSS实现图片变暗的方法

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

CSS实现网页内容禁止选中复制的方法

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

CSS实现图片垂直翻转的效果

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

1 2 3 4 5 末页
点击下拉