CSS
关注
分享
扫一扫
YodgeGGG
一个雄心勃勃想要深入前端的小菜鸟
展开
-
vue如何制作动态效果的进度条
vue如何制作动态效果的进度条先看效果图制作这样动效的进度条其实很简单，我们只需要将进度条原本的背景通过transparent画出如下图片的效果之后我们通过keyframes设置背景的动画效果就做成了下面上代码首先进度条的进度提示这个就比较简单了，例如我们给一个div中设置了宽高，想要显示进度为50%的进度条，那么我们只需让这个进度条的div宽度等同于父级div宽度的50%就可以了<div class="progresswrapper"> <div class=原创 2020-12-18 16:11:04 · 6429 阅读 · 2 评论 -
如何将button或是input框外面的黑色边框线去掉
如何将button或是input框外面的黑色边框线去掉简单一句话outline:none原创 2020-12-09 18:42:30 · 2532 阅读 · 0 评论 -
line-height:1是什么意思
line-height:1是什么意思其实仍旧是设置行高的一种方法，只不过简化了语句举个例子，比如此时你设置了font-size：20px，之后你设置了line-height:1，转义过来的意思就是line-height:20px，行高为20px，这种定义样式的方法通常会用于iconfont的设置好啦，就是这么简单，希望可以解答你的疑惑！...原创 2020-12-09 18:40:41 · 6752 阅读 · 1 评论 -
通过案例(面试题)来讲解class优先级的问题
通过案例(面试题)来讲解class优先级的问题首先先看问题<html><style> .class1{ color:red; } .class2{ color:blue; }</style><p class="class1 class2">abc</p><p class="class2 class1">abc</p><html&g原创 2020-12-08 17:19:30 · 257 阅读 · 0 评论 -
vue如何根据屏幕的滚动展示不同样式的导航栏，即超过某一位置后，更改导航栏的样式
Vue如何根据屏幕的滚动展示不同样式的导航栏，即超过某一位置后，更改导航栏的样式闲话少说，先上效果图可以看到，当页面超出某一位置时，主导航消失，副导航显示，当页面重新回到该位置时，主导航会再次显示简单说下原理，其实页面当中本身就存在着两个导航栏，只是通过v-show来控制他们俩之间的显隐而副导航是固定在浏览器窗口的，所以他的position必须是fixed，即相对浏览器窗口进行定位剩下的事情就是我们监听页面的滚动高度来判断在什么时刻进行动画效果的展示原理是不是很简单！原理搞懂后，我们就抓紧实现原创 2020-11-24 16:04:19 · 1837 阅读 · 2 评论 -
CSS样式中解决背景图片不能完美填充页面(页面高度很高)
先上个图这里我的图片是1920x1080像素的但页面高度有2000像素左右，想要图片可以完美填充页面背景只需写入以下代码body { margin: 0; padding: 0; background-image: url(assets/img/bg15.png); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }重中之重就原创 2020-12-07 11:19:25 · 2008 阅读 · 3 评论 -
通过案例(面试题)深度理解absolute与relative的关系(有无TRBL,有无父级）
通过案例深度理解absolute与relative的关系(有无TRBL,有无父级）我们先通过一段代码来引入这个问题<style> span { background-color: #FFFFFF; } p { background-color: blue; position: absolute; top: 0; left: 0; } </style&g原创 2020-12-08 11:39:46 · 354 阅读 · 0 评论