Web前端-CSS
文章平均质量分 58
QC班长
CSDN程序员学院讲师,CSDN内容合伙人,全栈领域优质创作者,高级瑜伽导师-阿斯汤加瑜伽练习者,透过IT看世界!
展开
-
浏览器如何捕获元素的hover事件弹出的内容,并进行样式调整修改
最近前端需要重写antd的tab卡片的更多内容弹框,默认的背景色和文本颜色不合适,需要更改。只有鼠标指针放上去后才会显示弹出的内容 直接用审查元素还无法进行获取。如何用浏览器的开发者工具去捕获这些浮框内容或其他节点元素来调试其样式呢?原创 2023-06-29 13:42:54 · 1591 阅读 · 0 评论 -
用纯CSS和DIV绘制播放按钮样式
最近在做前端的视屏监控播放对接,前端弄了个播放按钮,记录下,效果如图所示:CSS代码:因为是大屏的项目,所以像素单位是vh的,对应的是1920x1080px的设计稿,请根据需要换成px或者其他单位。原创 2023-06-29 11:00:30 · 875 阅读 · 0 评论 -
前端React项目的Next.js项目通过CSS引入自定义字体文件
最近在Web3的项目,需要引入自定义字体,做下记录:1、如果是下载的字体文件,直接能使用的就不需要转换,如果是TTF格式则需要转换成eot、svg、woff、woff2,这里提供一个网站Font Squirrel | Create Your Own @font-face Kits,进行文字转换。原创 2022-11-23 09:33:48 · 1335 阅读 · 0 评论 -
React封装APP端弹框筛选组件带div蒙层遮罩层
先看下效果:点击筛选,弹出框显示筛选面板,再点击确定关闭面板,取消遮罩层出。第三方依赖组件:antd-mobile、antd-mobile-icons。index.less样式代码。index.tsx代码。原创 2022-09-28 17:09:34 · 769 阅读 · 0 评论 -
React中样式调整“横线“的使用
height:2px;skyblue 下颜色。dotted:点线;dashed:虚线;double:双线;groove:槽线;outset:外凸;groove 上颜色。原创 2022-08-20 15:00:03 · 831 阅读 · 0 评论 -
React中为className添加多样式名的几种方式
问题需求,我需要在jsx中的className中同时引用SCSS文件中的.top .A这两个CSS样式类,如何实现呢? .top { width: 250px; height: 250px; font-size: 3rem; z-index: 0; position: absolute; } .top:hover { box-shadow: 0 0 10px #ccc; z-index: 999; } .A {原创 2022-02-25 19:28:42 · 2041 阅读 · 0 评论 -
Vue3使用element-plusUI解决菜单高度自动自适应的问题,使用CSS3的vh单位
最近在升级Vue的前端项目,把所有的框架升级到较新稳定版,前端UI用的elementUI,也升级到了element-plus,菜单组件的高度设置了height:100%也无效,于是设置了min-height:800px可以用,但我想让它占满屏幕高度,于是查询到了css3的单位属性:vw 、vh。vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实原创 2022-01-20 18:07:23 · 11251 阅读 · 4 评论 -
Vue3安装最新版sass-loader node-sass报错解决方法
最近在升级前端项目框架,之前的前端框架是Vue2.0构建的,最近打算全部都升级到最新版的,nodejs升级到了目前最新版v16.13.2,Vue ^3.0.0,VueCLI~4.5.0,然后在升级SASS预处理器时执行安装命令报错了执行vue-loder官网的安装命令npm install -D sass-loader node-sass报错如下:大概意思是依赖包冲突了,VueCLI4版本用的webpack版本依赖和sass-loader用的webpack依赖冲突,需要更新依赖或者降原创 2022-01-18 15:08:42 · 3709 阅读 · 0 评论 -
Mac OS 控制台使用Gulp报错Cannot read property 'apply' of undefined
gulp -vCLI version 3.9.1Local version 4.0.0这里的CLI版本是什么意思?不懂?但是npm上发布的gulp-cli的版本最新是2.0.0,执行gulp命令后才会出现下面的错误在gulp的github的issue里找到解决方案是全局安装下gulp-cli:sudo npm i gulp-cli -g ...原创 2018-11-26 07:57:57 · 1551 阅读 · 0 评论 -
最新Vue2.0+组件开源项目库集合
是最新的由OpenDigg整理并维护的Vue相关开源项目库集合。原文地址:https://github.com/opendigg/awesome-github-vue内容UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vu...原创 2018-07-16 09:55:10 · 5065 阅读 · 0 评论 -
最近帮其他项目组搭建的一个VueJS前端综合框架,把它开源了,有兴趣的可以看看
最近半年都在做VueJS的前端开发,搭了几个框架,今天开源个还算不错的,分享出来下,如果你觉得不错就点个赞!效果图如下:项目地址:https://gitee.com/QCBZ/vwnUI用的是elementUI2.2.0版本的,VueJS 2.5.0,webpack3.9的。vwn-综合后台框架vwn-基于vuejs2.5-elementUI2.2-webpack3....原创 2018-03-22 13:53:05 · 6410 阅读 · 5 评论 -
VueJS2.0 生命周期和钩子函数的一些理解
所谓“生命周期”,是指对象从构造函数开始执行(被创建)到被gc回收销毁的整个存在的时期。“钩子”就是在某个阶段给你一个做某些处理的机会。vuejs2.0的生命周期可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁...原创 2018-02-24 10:57:46 · 677 阅读 · 0 评论 -
CSS3的:nth选择器
CSS3的:nth选择器列出具有的选择方法::first-child选择某个元素的第一个子元素;:last-child选择某个元素的最后一个子元素;:nth-child()选择某个元素的一个或多个特定的子元素;:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;:nth-of-type()选择指定的元素;:nth-last-of原创 2018-02-06 16:04:42 · 567 阅读 · 0 评论 -
vuejs 页面跳转和跳转到外链(其他外站)
1、vuejs 是单页面应用,应用内的跳转,可以用router-link标签 router-link tag='a' :to="'/'" >跳转demorouter-link>router-link tag='span' to="#" @click.native="handleEditPassword">span class="a-inner">i class="el-ic原创 2017-12-27 11:21:42 · 112445 阅读 · 0 评论 -
前端编码规范及 SASS、SCSS和CSS的关系
最近在做的新项目用到了nodejs、ECMAScript 6 、Vue.js、SCSS、element-UI的一些东西,这里记录下SASS、SCSS和CSS的关系;SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。 SCSS即是SASS的新语法,是Sassy CSS的简写原创 2017-10-15 13:22:45 · 2054 阅读 · 0 评论 -
一劳永逸的搞定 flex 布局
寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在 float: center 的写法,那么 text-align: center、verticle-align:原创 2017-10-23 16:30:12 · 567 阅读 · 0 评论 -
bootsrap解决悬浮层(悬浮header、footer)会遮挡住内容的方法
固定FooterBootstrap框架提供了两种固定导航条的方式: ☑ .navbar-fixed-top:导航条固定在浏览器窗口顶部 ☑ .navbar-fixed-bottom:导航条固定在浏览器窗口底部使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应的类名即可: 实现原理:实现原理很简单,就是在navbar-原创 2017-07-21 22:37:24 · 8419 阅读 · 0 评论 -
CSS3 RGBA的高级属性
前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是什么呢?说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说,大家就跟着我一起往下看吧。语法:R:红色值。正整数转载 2016-07-26 22:37:43 · 1015 阅读 · 0 评论 -
HTML 5 <canvas> 标签 用法
定义和用法 标签定义图形,比如图表和其他图像。 标签只是图形容器,您必须使用脚本来绘制图形。实例如何通过 canvas 元素来显示一个红色的矩形:var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyl转载 2016-07-26 22:39:32 · 616 阅读 · 0 评论 -
理解伪元素 :before 和 :after
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。你一定听说过这个词,尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :fir转载 2016-07-26 22:43:12 · 611 阅读 · 0 评论 -
解决ie6、ie7、ie8下float为right换行的情况
解决ie6、ie7、ie8下float为right换行的情况IE6下有不少奇怪的Bug,今天就碰到一个,float:right换行bug,情况是并列的几个块级元素如div和span,一些设置了左浮动一些设置右浮动,一行的宽度足够放下所有的块级元素,但此时ie6则显示右浮动的其中一块换行了,下面给出实例和解决方法:实例说明下:html结构如下左边中间右边.转载 2016-07-17 12:44:28 · 2341 阅读 · 0 评论 -
TD不换行 nowrap属性
表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况)。换行后的表格显得乱糟糟,不太好看,我不喜欢这样的换行。当然可以通过对每列td都设置宽度,那样太麻烦了,并且有时没法预计td中的文字会有多长,没法给固定宽度。为了让表格里文字不换行(预计也不会太长的字符串),可以给表格里td添加一个nowrap属性,如转载 2016-07-17 12:48:40 · 1305 阅读 · 0 评论 -
div ul li 嵌套后如何解决增加多个li后ul高度自适应问题
关键属性设置:.m_wrapper ul { list-style:none; padding:2px 0px 0px 0px; width:100%; position:absolute; bottom:30px; left:0px; z-index:999; overflow-y:auto; max-height:500px原创 2016-07-30 14:38:30 · 4338 阅读 · 0 评论 -
jquery-highlight.js高亮显示
js高亮显示 .highlight{background-color:yellow;padding:2px;} //搜索类型 0标题,1正文,2作者 var searchType = "${(searchType)!}"; //搜索关键字 var replace_search原创 2016-07-30 18:33:25 · 1514 阅读 · 0 评论 -
jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示
jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示关键思路就是在父菜单栏的hover函数里再加入子菜单的hover函数jq代码:$(function() { PopoutMenu("police_computer_network");});function PopoutMenu(v) { $('#' + v).find('li').h原创 2016-08-11 19:32:00 · 6958 阅读 · 0 评论 -
jQuery控制Hover 给a标签列表添加鼠标移过换色
jQuery控制Hover 给a标签列表添加鼠标移过换色,用标准的HTML语言也有实现此功能,不过这里的重点不是HTML,而是jQuery的用法,因此用jQuery控制LI列表在鼠标移过时换色,这只是基本的操作。jq代码: $("#menu a").hover(function() { $(this).addClass("blue");原创 2016-08-11 20:12:21 · 11231 阅读 · 0 评论 -
HTML&CSS&JavaScript思维导图
转载 2016-09-07 22:44:51 · 623 阅读 · 2 评论 -
HTML中让表单input等文本框为只读不可编辑的方法汇总
有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使 的内容,"测试"两个字不可以修改。实现的方式归纳一下,有如下几种。 方法1: onfocus=this.blur() 当鼠标放不上就离开焦点测试" onfocus=this.blur()> 方法2:readonly 测试" readonly> 测试" readonly="true"> 方法3原创 2017-02-14 16:05:15 · 2629 阅读 · 0 评论 -
如何让css背景图片占满全部背景,并且随着浏览器缩放图片保持长宽不变呢?
style> .body{ background-image: url('${basepath}/resource/images/loginb1.jpeg'); background-size: 100%; background-repeat:no-repeat; }style>css代码添加背景图片常用代码 1 背景颜色 {原创 2017-06-02 12:13:07 · 50895 阅读 · 1 评论 -
JS判断客户端类型(含微信)
由于DOM对象是从上到下是顺序加载的,使用时请放在body内下方处。script type="text/javascript"> window.onload = browserRedirect(); function browserRedirect() {//判断客户端类型 var sUserAgent = navigator.userAgent.toLow原创 2017-07-15 11:42:38 · 989 阅读 · 0 评论 -
如何让一个div显示在页面最顶层
网站有个栏目的上拉菜单被挡住了,设置下拉菜单显示在网站最顶层解决办法style="z-index:999">数值越大,显示级越高,当然一般也不用999, 2,3就够了 全国公安信息网 全国公安信息网原创 2016-07-25 17:07:25 · 44055 阅读 · 0 评论