Deshun 发布于 7个月前 (11-13) 阅读(1888) 评论(0) 赞 (0)
CSS 的 border 属性，可以设置实线，虚线还有点线。不过直接使用 border: 1px dashed #F00 虚线距离太小，非常难看，很难满足UI图的效果。可以使用 background 背景的渐变属性，来替代 border 方案，方法如下：width: 100%; height: 1px; background-image: linear-gradi...
Deshun 发布于 7个月前 (10-24) 阅读(530) 评论(0) 赞 (0)
日常的工作中可能会用到，选取处某个或者某些元素外的所有元素。这时我们可以使用 jQuery 遍历中的 not() 方法来排除某些元素，例如根据元素的 #id ，.class 等排除，代码如下：$("div.content *").not(".keep");表示 .content 类的 div 下除 .keep 类以外的所有元素；另外，注意这里的&n...
Deshun 发布于 8个月前 (10-17) 阅读(3959) 评论(0) 赞 (1)
作为一个工作两年的前端小菜鸟，今天被一个后端的同事问到。他说他的控制台报错：Uncaught SyntaxError: Unexpected token '.' ，像下面这样。嗯，在他确定代码没有语法错误之后，我决定来翻译一下：一头雾水。检查 .css 文件，也没有发现语法问题。搞了半天，最后找到问题的原因。我来还原一下：<s...
Deshun 发布于 8个月前 (10-14) 阅读(424) 评论(0) 赞 (2)
分享12个CSS小技巧，让你的代码简洁高效。使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框/* add border */ .nav li { border-right: 1px solid #666; }……然后再除去最后一个元素……/* remove&...
Deshun 发布于 10个月前 (08-06) 阅读(455) 评论(0) 赞 (0)
前端工作者肯定或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及<a>标签的:link、visited等，伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类...
Deshun 发布于 1年前 (2019-05-08) 阅读(640) 评论(1) 赞 (0)
在做一些银行或者理财的项目时，有的需要兼容IE浏览器叫老版本，比如IE678，简直是前端开发人员的噩梦。在较低版本的IE浏览器中，td 内容为空时，就不会显示边框，可以通过下面两种方法解决：通过CSS在 table 的 css 里面添加 border-collapse:collapse; 在 td 的css里面添加 empty-cells:show; ，代码如下：<style>...
Deshun 发布于 1年前 (2019-05-05) 阅读(968) 评论(0) 赞 (0)
今天写了一个银行/信用卡/贷款审核进度的页面，除背景和 logo 之外，均使用 HTML+CSS 编写。只做了简单的手机端兼容，主要是审核进度的进度条效果实现。代码如下：HTML：<div class="review-box"> <span class...
Deshun 发布于 1年前 (2019-04-29) 阅读(1548) 评论(0) 赞 (1)
今天在改一个响应式网站，兼容手机时需要写一个下拉菜单。其实用纯 CSS 就能实现，利用 checkbox 的 checked 属性，设置菜单的显示隐藏。HTML：<nav> <label for="menu-check" id="m...
Deshun 发布于 1年前 (2019-04-25) 阅读(2502) 评论(0) 赞 (1)
input 的单选框 radio 和复选框 checkbox 是样式是很难调的，设置背景和边框都不起效。我们可以使用下面的方法进行样式美化：纯CSS就能实现。HTML：<h1>你喜欢我吗？</h1> <label for="check1"> ...
Deshun 发布于 1年前 (2019-04-13) 阅读(2560) 评论(0) 赞 (1)
一直以为行内元素设置内外边距会不起效，之前也没有具体的去实验，只是在需要设置 margin 或者 padding 的时候给元素设置一个 display: inline-block; 就得了。今天正好有时间，就来实验了一把。原来 span 标签默认的不是只能设置左右边距，还有更有意思的现象。我给 span 标签设置了 10px 的内边距和外边距，并设置了背景色...
w3h5