Web前端-Html
文章平均质量分 70
QC班长
CSDN程序员学院讲师,CSDN内容合伙人,全栈领域优质创作者,高级瑜伽导师-阿斯汤加瑜伽练习者,透过IT看世界!
展开
-
使用html2canvas转换table为图片时合并单元格rowspan失效,无边框显示问题解决(React实现)
(对于使用了第三方表单的Table组件)-如果用的组件table,tr的背景色也是组件设置的。所以tr样式用这个覆盖background-color: transparent;,再设置单元格的background-color。为tr设置了背景色,然后td设置了rowspan,设置了rowspan的单元格就会出现边框不显示的问题。最近使用 html2canvas导出Table表单为图片,但是转换出的图片被合并的单元格没有显示边框。把tr的背景色设置为透明,在td里设置背景色。最后就正常显示了,可以打印了。原创 2023-11-17 10:16:14 · 2590 阅读 · 1 评论 -
浏览器如何捕获元素的hover事件弹出的内容,并进行样式调整修改
最近前端需要重写antd的tab卡片的更多内容弹框,默认的背景色和文本颜色不合适,需要更改。只有鼠标指针放上去后才会显示弹出的内容 直接用审查元素还无法进行获取。如何用浏览器的开发者工具去捕获这些浮框内容或其他节点元素来调试其样式呢?原创 2023-06-29 13:42:54 · 1594 阅读 · 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报错Warning: This synthetic event is reused for performance reasons. If you‘re seeing this, 解决方法
使用React的NavLink标签作为菜单列表,点击菜单列表按钮,动态更换菜单名称。React报错Warning: This synthetic event is reused for performance reasons. If you're seeing this, 解决方法原创 2022-10-08 10:20:30 · 3310 阅读 · 0 评论 -
React AntV/G2Plot环形图Pie添加点击事件,即点击图环触发获取相关数据。
/ 图表的点击事情,可参考文档添加其它事件,https://charts.ant.design/zh/examples/pie/donut#basic。* @param plot 在 Plot 上通过 on 绑定事件、off 移除绑定事件。1、添加相关依赖,引入AntV/G2Plot图表组件。原创 2022-09-26 10:59:27 · 2762 阅读 · 1 评论 -
React中样式调整“横线“的使用
height:2px;skyblue 下颜色。dotted:点线;dashed:虚线;double:双线;groove:槽线;outset:外凸;groove 上颜色。原创 2022-08-20 15:00:03 · 835 阅读 · 0 评论 -
前端样式排版布局技巧汇总杂记
最近在做前端的可视化大屏展示,记录一下相关的知识点。1、布局display属性根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值为“inline”,称为“行内”元素。display常用属性值1. none:隐藏对象1.1 不用none前:1.2 用了none的时候:...原创 2022-05-29 16:08:35 · 1155 阅读 · 1 评论 -
Mac(版本10.15 (19A583))执行npm install xxxx报错gyp类错误解决方法
最近新装了MacOS的最新版10.15,重新安装开发环境,nodejs安装的是最新的,再用npm 安装包时总会报 gyp ERR!错gyp ERR! configure errorgyp ERR! stack Error: EACCES: permission denied, mkdir解决方法,在命令后加上--unsafe-perm例如sudo npm insta...原创 2019-10-12 13:31:41 · 3895 阅读 · 0 评论 -
一劳永逸的搞定 flex 布局
寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在 float: center 的写法,那么 text-align: center、verticle-align:原创 2017-10-23 16:30:12 · 567 阅读 · 0 评论 -
利用npm 安装删除模块
npm安装模块【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录;【npm install -g xxx】利用npm安装全局模块xxx;本地安装时将模块写入package.json中:【npm install xxx】安装但不写入package.json;【npm install xxx –save】 安装并写入package.json的”d原创 2017-10-10 11:25:18 · 7666 阅读 · 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 评论 -
使用js动态绘制报表
使用js动态绘制报表只要惠灵活运用JQuery的.find().each().attr().filter().remove().indexOf().after().append()的方法就好弄HTMLtr> td> table id="servertab" width="100%" border="1" cellpadding="1" cellspacing="0"原创 2017-09-21 14:23:53 · 2472 阅读 · 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 · 6411 阅读 · 5 评论 -
npm常用命令总结
npm是什么NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。npm的原理??每当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定的脚本命令。因此,只要是 Shell(一般是 Bash)可以运行的命令原创 2017-09-28 10:36:11 · 4482 阅读 · 0 评论 -
vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突
使用cli构建项目后,在根目录下有个index.html文件,其中有一行代码为:// index.htmlbody> div id="app">div> body>而src目录下的App.vue中也有id="app"的代码// APP.vue div id="app"> h1 class="title">头部h1> router-view原创 2017-10-15 20:08:37 · 15227 阅读 · 8 评论 -
解决vue-cli element-ui打包报错Unexpected token: punc (() [./~/element-ui/packages/row/src/row.js
1.问题描述我用vue-cli写了项目,界面都是用element-ui写的,打包时报错:ERROR in static/js/19.7a249ea6c2bf376ba720.js from UglifyJsUnexpected token: punc (() [./~/element-ui/packages/row/src/row.js:24,0][static/js/19原创 2017-12-17 22:02:41 · 6644 阅读 · 2 评论 -
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 · 112449 阅读 · 0 评论 -
Java POI Excel导出为HTML页面(去掉行号、列号)
Excel导出为HTML页面(去掉行号、列号)在页面上显示import java.io.ByteArrayOutputStream;import java.io.InputStream;import java.net.URL;import java.net.URLConnection;import javax.xml.parsers.DocumentBuilderFactory;原创 2018-02-02 15:32:38 · 2339 阅读 · 3 评论 -
使用LocalStorage、sessionStorage报异常DOMException: Failed to execute 'setItem' on 'Storage': 解决方法
本次项目需要用到前台缓存,使用了LocalStorage、sessionStorage,但使用过程中报异常,原因及解决方法如下:缓存到LocalStorage调用localStorage.setItem方法保存缓存对象。一般来说,只要这一行代码就能完成本步骤。但是LocalStorage保存的数据是有大小限制的!我利用 chrome 做了一个小测试,保存500KB左原创 2018-02-06 13:53:06 · 39956 阅读 · 6 评论 -
VueJS2.0 生命周期和钩子函数的一些理解
所谓“生命周期”,是指对象从构造函数开始执行(被创建)到被gc回收销毁的整个存在的时期。“钩子”就是在某个阶段给你一个做某些处理的机会。vuejs2.0的生命周期可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁...原创 2018-02-24 10:57:46 · 677 阅读 · 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 评论 -
TD不换行 nowrap属性
表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况)。换行后的表格显得乱糟糟,不太好看,我不喜欢这样的换行。当然可以通过对每列td都设置宽度,那样太麻烦了,并且有时没法预计td中的文字会有多长,没法给固定宽度。为了让表格里文字不换行(预计也不会太长的字符串),可以给表格里td添加一个nowrap属性,如转载 2016-07-17 12:48:40 · 1305 阅读 · 0 评论 -
Vue项目目录说明
.|-- config // 项目开发环境配置| |-- index.js // 项目打包部署配置|-- src // 源码目录| |-- components // 公共组件| |-原创 2017-09-26 11:27:53 · 527 阅读 · 0 评论 -
搭建Vue开发环境的过程(通过控制台启动)
说明由于不想按照vue文档上说的,起步学习。决定首先学习vue环境的搭建。按文档上说的命令行的操作,相对简单一点,但是这样操作下去对环境搭建的原理是不清楚的。于是就开始研究node等相关知识了。研究node研究webpack在IntelliJ IDEA里面搭建环境安装nodejs,安装完成后再控制台输入node -v显示版本信息,成功。原创 2017-09-26 10:23:05 · 2881 阅读 · 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 评论 -
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的$.event.fix函数统一浏览器event事件处理
function eventHandler(e) { var event = $.event.fix(e); var elem = event.target; alert('当前点击对象的标签名是:' + elem.tagName); alert('当前点击按钮文本是:' + elem.value); alert('pageX:' + event.pageX + ',pag原创 2016-08-03 20:40:03 · 1080 阅读 · 0 评论 -
jQuery控制 checkbox单选
jQuery控制 checkbox单选 //checkbox单选 $(':checkbox[name=wa_status]').each(function() { $(this).click(function() { if ($(this).attr('checked')) {原创 2016-07-30 13:45:21 · 740 阅读 · 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 · 2342 阅读 · 0 评论 -
理解伪元素 :before 和 :after
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。你一定听说过这个词,尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :fir转载 2016-07-26 22:43:12 · 611 阅读 · 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 评论 -
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&CSS&JavaScript思维导图
转载 2016-09-07 22:44:51 · 623 阅读 · 2 评论 -
jsp EL表达式截取字符串
${fn:substring("你要截取的字符串"),beginIndex,endIndex}下面是JSTL中自带的方法列表以及其描述函数名 函数说明 使用举例 fn:contains 判断字符串是否包含另外一个字符串 fn:containsIgnoreCase 判断字符串是否包含另外一个字符串(大小写无关) fn:endsWith 判断字符串是否原创 2016-12-06 14:05:02 · 4952 阅读 · 0 评论 -
关于jsp EL表达式<c:if>没有<c:else>解决方案
c:if>没有c:else>可以用c:choose>来取代结构: c:choose> c:when test=""> 如果 c:when> c:otherwise> 否则 c:otherwise> c:choose> 举一个典型的 c:choose>、c:when>和c:other原创 2016-12-06 16:04:18 · 23232 阅读 · 1 评论 -
JS动态根据前面的列合并后面的列
需求合并行,在上一篇的基础上改进。解决思路1、获取前排列的rowspan值,存入数组,2、再循环取出数组,根据rowspan的值合并3、关键点用到jQuery的$("#xxx tbody td:nth-child(xx)")方法获取指定列,在循环遍历处理代码: /** * 依据前面的列内容合并后面的列内容 * @param table_i原创 2017-09-25 16:16:45 · 2106 阅读 · 0 评论 -
js代码 设为首页 加入收藏
li>a href="javascript:setHome(this,window.location)"> span class="glyphicon glyphicon-home">span> b>设为首页b>a>li> li>a href="javascript:addFavorite()"> span class="glyphicon glyphicon-heart">s原创 2017-07-24 14:21:28 · 9526 阅读 · 0 评论 -
bootsrap解决悬浮层(悬浮header、footer)会遮挡住内容的方法
固定FooterBootstrap框架提供了两种固定导航条的方式: ☑ .navbar-fixed-top:导航条固定在浏览器窗口顶部 ☑ .navbar-fixed-bottom:导航条固定在浏览器窗口底部使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应的类名即可: 实现原理:实现原理很简单,就是在navbar-原创 2017-07-21 22:37:24 · 8420 阅读 · 0 评论 -
marquee实现通知公告例子
红色划线部分就是marquee div style="text-align: left;margin-top: 35px;margin-bottom: 5px;"> table style="padding-bottom: 3px;"> tbody> tr> td style="width: 60px;">span> 公 告s原创 2017-06-08 10:52:05 · 1213 阅读 · 0 评论