![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
山海一哥
为者常成,行者常至
展开
-
修改组件默认样式之/deep/(less,sass)
在使用第三方组件时有时候我们想修改组件的样式,可以使用全局的方式,即不使用scoped。如果多处共用我们只需要统一修改,假如有多种类型呢?我们不得不另起一个名字。如果我们想要封装一个组件,定义的样式希望在该文件中生效,不影响其他组件,我们将使用scpoed的方式。这种方式去修第三方组件的样式往往是无效的,什么原因呢?怎么处理呢?使用scoped的方式生成的dom其实有额外的属性因为该属性的存在使得里面的样式在定义时无效。解决方式,在less或者scss等编译语言中使用/deep/或者在sty原创 2021-06-17 18:00:44 · 5486 阅读 · 0 评论 -
文本过长,hover时提示框显示全部信息,否则不出现提示框
使用的是vuetemplate <ul class="list"> <li v-for="(item, index) in operateData" :key="index" class="list-li" @mouseenter="handleCellMouseEnter" @mouseleave="handleCellMouseLeave"> <span>{{item.time}}</span>原创 2020-07-28 17:37:51 · 1518 阅读 · 0 评论 -
水平3d柱状图
最近做了查了很多资料,做了一个3D渐变水平柱状图,给大家做个参考,以更好的理解学习css3<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib原创 2020-06-09 13:29:22 · 359 阅读 · 0 评论 -
js实现动画效果
进度条动画跳过<h1>JavaScript 百分比进度条</h1><div id="myProgress"> <div id="myBar">10%</div></div><br><button onclick="move()">点我</button>#myProgre...原创 2020-01-02 15:48:41 · 831 阅读 · 1 评论 -
js点击页面空白处,实现操作
通过为window绑定click时间即可实现比如制作一个模态框,点在模态框上实现关闭模态框<button onclick="document.getElementById('id01').style.display='block'">注册</button><div id="id01" class="modal"> <form class="m...原创 2020-01-02 14:52:18 · 4396 阅读 · 0 评论 -
js事件改变css属性,增加动画效果
我们通过js直接改变css属性的话,增加些动画看起来更加好看,我们通常用到的是在css里直接使用:hover, :active, :focus等方式去改变属性.overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background...原创 2020-01-02 13:35:27 · 3297 阅读 · 0 评论 -
css3动画 实现字体闪烁或者灯泡上下浮动
话不多少,直接贴代码`&lt;style&gt; .el-loading-mask { position: absolute; z-index: 10000; background-color: rgba(255, 255, 255, .9); margin: 0; top: 0; right...原创 2019-02-28 11:15:28 · 3220 阅读 · 0 评论 -
前端调试技巧包含css,js
一,js篇通常来讲我们都喜欢一个console,简单方便,个别时候还能当日志来看,但是有些时候呢用console是不行的,比如判断一个值的时候,如果该值是‘fasle’,那么代码的运行结果可能并不能如你所料,这个时候最好的方式便是打个断点。运行的时候呢,打开控制台的source,如下所示二,css篇选中所要查看的dom节点,即可查看有个该节点的所有信息对于hover,active这样的样...原创 2019-08-02 11:15:16 · 266 阅读 · 0 评论 -
手机端使用rem自适应样式设置
html { font-size: 37.5px;}@media screen and (min-width:320px) { html { font-size: 32px; }}@media screen and (min-width:360px) { html { font-size: 36px; }}@...原创 2019-08-02 10:16:16 · 660 阅读 · 0 评论 -
CSS3自定义滚动条样式以及隐藏滚动条
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。滚动条的css样式主要有三部分组成:1、::-webkit-scrollbar 定义了滚动条整体的样式; 2...原创 2019-04-17 16:41:41 · 687 阅读 · 0 评论 -
CSS3属性-webkit-font-smoothing图标字体抗锯齿渲染
对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中,后由于某些原因从web标准中被移除了。但是,我们可以用以下两种定义进行抗锯齿渲染-webkit-font-smoothing: antialiased; /*chrome、safari*/-moz-osx-f...转载 2019-04-17 16:30:26 · 360 阅读 · 0 评论 -
初始化CSS样式
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { f...转载 2019-03-28 09:14:43 · 103 阅读 · 0 评论