css
文章平均质量分 58
北巷`
前端之路漫漫兮,吾将上下而求索
展开
-
样式污染引发的思考:scoped原理
1、用法scoped是实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。(事实上, scoped是一个boolean值)2、原理(postcss)给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性<style scoped lang="less"> .example{ color:red; }</style><template> <原创 2022-02-11 11:32:47 · 1876 阅读 · 0 评论 -
阿里巴巴矢量库的用法
阿里巴巴矢量库的用法:1.将选中的图标下载到本地然后把文件解压 , 里边的文件放在自己项目的font文件夹下2.Unicode 使用步骤如下:第一步:拷贝项目下面生成的 @font-face@font-face { font-family: 'iconfont'; src: url('../font/iconfont.eot'); src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),原创 2021-03-24 21:28:01 · 588 阅读 · 0 评论 -
CSS毛玻璃选中效果
毛玻璃选中效果知识点总结:在本次学习中,新get到一种图标的开源使用方式网址:https://fontawesome.dashgame.com/使用方法:将以下代码粘贴到网页HTML代码的 head 部分<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">然后搜索你想要的图标,将他的代码放入适当的位置即可<i class=原创 2021-02-20 17:57:45 · 153 阅读 · 0 评论 -
CSS一个摇摆的大红灯笼
一个摇摆的灯笼知识点总结:box-shadow: 是给元素块添加周边阴影效果@keyframes 自定义动画通过这个例子,让灯笼上部的线,下边的三部分组成的穗 待在一个合理的位置是一个挑战,通过改变bottom属性来完成。HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl原创 2021-02-17 18:12:03 · 479 阅读 · 2 评论 -
CSS+js动态时钟
一个动态时钟知识点总结:document.querySelector()方法返回文档中匹配指定 CSS 选择器的一个元素。setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。HTML+js部分<!DOCTYPE html><html .原创 2021-02-16 16:53:36 · 143 阅读 · 0 评论 -
CSS一个渐变色的登录页面
一个登录页面知识点:cursor:pointer;pointer 光标呈现为指示链接的指针HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt原创 2021-02-14 19:32:05 · 501 阅读 · 2 评论 -
CSS动态会发光的按钮
一个动态会发光的按钮 CSS动态发光按钮 知识点总结:min-height: 100vh;设置最小行高overflow:hidden;清除浮动,解决外边距塌陷transition-delay: 0.5s;过渡效果等待时间HTML部分<!DOCTYPE html><html lang="en"><head> <meta原创 2021-02-13 18:04:40 · 471 阅读 · 1 评论 -
CSS太阳地球月亮转圈圈loading
一个css例子 css太阳 月亮 地球转转转 知识点总结:justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。box-shadow: offset-x offset-y blur spread color position;offset-x用于声明阴影的水平偏移,offset-y用于声明阴影原创 2021-02-12 14:16:19 · 368 阅读 · 1 评论 -
CSS一个动态加载图案例
一个动态加载图 动态加载图案例 HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-02-08 14:03:51 · 336 阅读 · 0 评论 -
CSS选择器学习笔记
CSS 选择器大致可分为:元素选择器、类选择器、ID 选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器。1. CSS 元素选择器最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。在 W3C 标准中,元素选择器又称为类型选择器(type selector)。“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”原创 2021-01-25 18:43:51 · 107 阅读 · 0 评论 -
CSS定位学习笔记
1. 一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。但是在一种情况下,即使原创 2021-01-21 14:16:26 · 80 阅读 · 0 评论 -
css表格学习记录
表格边框table, th, td { border: 1px solid blue; }边框折叠table { border-collapse:collapse; }表格宽度和高度table { width:100%; }th { height:50px; }表格文本对齐td { text-align:right; /*text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:*/ } td { hei原创 2021-01-11 13:36:51 · 70 阅读 · 1 评论 -
CSS 框模型学习笔记
今天也要好好学习哦!element : 元素。padding : 内边距,也有资料将其翻译为填充。border : 边框。margin : 外边距,也有资料将其翻译为空白或空白边。paddingpadding 属性接受长度值或百分比值,但不允许使用负值。td { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }border2.1边框的样式我原创 2021-01-14 10:41:41 · 89 阅读 · 0 评论