Vue中使用v-html内容图片过大的解决方法
Deshun 发布于 8个月前 (07-01) 阅读(1147) 评论(0) 赞 (0)
在同事的项目中遇到一个问题,使用 Vue 的 v-html 后,内容里边的图片太大,显示不全。但是设置 style 又不管用:.img { max-width: 100%; height: auto; }实际上还是 Vue 的 scoped 穿透问题:参考我之前的文章(Vue项目中scoped属性的作用,及scop...
Deshun 发布于 8个月前 (07-01) 阅读(1147) 评论(0) 赞 (0)
在同事的项目中遇到一个问题,使用 Vue 的 v-html 后,内容里边的图片太大,显示不全。但是设置 style 又不管用:.img { max-width: 100%; height: auto; }实际上还是 Vue 的 scoped 穿透问题:参考我之前的文章(Vue项目中scoped属性的作用,及scop...
Deshun 发布于 1年前 (2019-11-13) 阅读(4718) 评论(0) 赞 (1)
CSS 的 border 属性,可以设置实线,虚线还有点线。不过直接使用 border: 1px dashed #F00 虚线距离太小,非常难看,很难满足UI图的效果。可以使用 background 背景的渐变属性,来替代 border 方案,方法如下:width: 100%; height: 1px; background-image: linear-gradi...
Deshun 发布于 1年前 (2019-10-24) 阅读(904) 评论(0) 赞 (0)
日常的工作中可能会用到,选取处某个或者某些元素外的所有元素。这时我们可以使用 jQuery 遍历中的 not() 方法来排除某些元素,例如根据元素的 #id ,.class 等排除,代码如下:$("div.content *").not(".keep");表示 .content 类的 div 下除 .keep 类以外的所有元素;另外,注意这里的&n...
Deshun 发布于 1年前 (2019-10-17) 阅读(12941) 评论(0) 赞 (3)
作为一个工作两年的前端小菜鸟,今天被一个后端的同事问到。他说他的控制台报错:Uncaught SyntaxError: Unexpected token '.' ,像下面这样。嗯,在他确定代码没有语法错误之后,我决定来翻译一下:一头雾水。检查 .css...
Deshun 发布于 1年前 (2019-10-14) 阅读(769) 评论(0) 赞 (2)
分享12个CSS小技巧,让你的代码简洁高效。使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框/* add border */ .nav li { border-right: 1px solid #666; }……然后再除去最后一个元素……/* remove&...
Deshun 发布于 2年前 (2019-08-06) 阅读(773) 评论(0) 赞 (0)
前端工作者肯定或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对...
Deshun 发布于 2年前 (2019-05-08) 阅读(1031) 评论(1) 赞 (0)
在做一些银行或者理财的项目时,有的需要兼容IE浏览器叫老版本,比如IE678,简直是前端开发人员的噩梦。在较低版本的IE浏览器中,td 内容为空时,就不会显示边框,可以通过下面两种方法解决:通过CSS在 table 的 css 里面添加 border-collapse:collapse; 在 td 的css里面添加 empty-cells:show; ,代码如下:<style>...
Deshun 发布于 2年前 (2019-05-05) 阅读(1592) 评论(0) 赞 (0)
今天写了一个银行/信用卡/贷款审核进度的页面,除背景和 logo 之外,均使用 HTML+CSS 编写。只做了简单的手机端兼容,主要是审核进度的进度条效果实现。代码如下:HTML:<div class="review-box"> &nb...
Deshun 发布于 2年前 (2019-04-29) 阅读(2368) 评论(0) 赞 (1)
今天在改一个响应式网站,兼容手机时需要写一个下拉菜单。其实用纯 CSS 就能实现,利用 checkbox 的 checked 属性,设置菜单的显示隐藏。HTML:<nav> <label fo...
Deshun 发布于 2年前 (2019-04-25) 阅读(3300) 评论(0) 赞 (1)
input 的单选框 radio 和复选框 checkbox 是样式是很难调的,设置背景和边框都不起效。我们可以使用下面的方法进行样式美化:纯CSS就能实现。HTML:<h1>你喜欢我吗?</h1> <label for="ch...