CSS

分类下相关文章

去掉网页 type 为 number 的 Input 输入框的右侧箭头

去掉 input 输入框右侧的箭头 禁用的原因是,在空间有限的情况下,这个箭头太浪费空间。 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; } 禁用鼠标滚轮上下滑动更改 禁用的原因是,页面较长时,向下滚动浏览,容易引起误操作,导致无意间修改了数值。 <input type="number" on ...

阅读全文...

Bluma - 一个简洁易用的 css 框架

前段时间偶然发现了 bluma 这个前端样式框架,看起来比 bootstrap 要清晰简洁的多。 https://bulma.io/ 正好我有个个人股票小工具的开发需求,所以决定尝试并了解一下 bluma. container container 用来限制宽度,居中。例如: desktop 为 960 widescreen 1152 fullhd 1344 如果要全屏要加上 class is-fluid。 https://bulma.io/documentation/layout/container/ hero 英文翻译为主角,即,页面顶部的全屏 banner。 如果内容要居中显示,需要内 ...

阅读全文...

修改 Android 下 Chrome 浏览器的顶部地址栏颜色

我看到很多网站在 Android 手机的 Chrome 浏览器里,可以更改顶部的地址栏及 status bar 的颜色。 而我目前的网站就没有这个效果。说明不是 Chrome 默认的行为。 查了一下,原来在 Android 5.0 以上, Chrome 版本 39 以上,可以通过设置 <meta name="theme-color" content="#SOME_COLOR"> 来实现此效果。 例如,我设置的颜色是 <meta name="theme-color" content="#375680&qu ...

阅读全文...

px,em 与 rem 的区别,及各自使用场景

px 是绝对值,em 与 rem 都是相对值。 em 是相对父级元素字体大小的倍数。例如,父级 div 字体设置了 20px, 在设置 2em 之后,该元素的字体大小就变成了 40px。 rem 是相对 html 根元素字体大小的倍数。而 html 默认的字体大小是 16px。所以,1rem 就相当于 16px。当然这个默认值也可以调整。 使用场景 em。中文段落的首行两格缩进,2em。 ...

阅读全文...

使用 CSS 限制商品标题行数不超过两行

标题超出两行的部分显示为省略号 .name { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; word-break: break-all; font-size: 0.9rem; height: 2.5rem; } 文本截断效果如图: 注意: font-size: 0.9rem; height: 2.5rem; overflo ...

阅读全文...

区域内指定 element 的第一个,样式与后面的同类 element 不同

例如,article-content div 内,第一个 h2 标签不需要设置 margin-top,可以这样实现 .article-content h2 { font-size: 1.6em; border-bottom: 1px solid #ddd; padding-bottom: .1em; margin-bottom: 2.4rem; } .article-content h2 ~ h2 { margin-top: 2.2em; } 确实能达到预期的效果,但是这语法根本看不懂,也记不住。。。 但是,这样做,漏掉了一种情况,即 h2 不是第一个元素,有可能 p 是第一个元 ...

阅读全文...

中文段落行首缩进使用 2em

即 text-indent: 2em; 为何不使用 px 行首缩进如果使用 px 的话,代码非常不好维护,因为一旦 font-size 从 15px 调整到 20px,那对应的 text-indent 也得做对应得调整。 em 是什么 Em 是一个相对值,而不是一个绝对值。即 即,相对于当前的 font-size。 所以,em 天生就是为中文行首缩进而生。 ...

阅读全文...

去除网页输入框右侧出现的 LastPass 账号密码自动填充图标

原代码 <input type="text" class="form-control" placeholder="请输入您要查找的内容"> 解决办法是在 Input id 中加入 search 关键词。 <input type="text" class="form-control" placeholder="请输入您要查找的内容" id="search-input"> 可见 LastPass 会分析 input 输入框的 i ...

阅读全文...

CSS class 共存/不共存选择器

<div class="a b c"></div> 同时包含多个 class 的元素选择 例如,同时包含 class a b .a.b { color: blue; } 包含某个 class 但是同时不能包含另一个 class 例如,包含 class a 但是不包含 class d .a:not(.d) { color: black; } ...

阅读全文...

linear-gradient 实现渐变背景色

作为渐变背景色非常合适 .header-filter-gradient { background: linear-gradient(45deg, rgb(168,29,132) 0%, rgb(234,57,111) 100%); } 效果 代码 https://codepen.io/anon/pen/aKNJwz ...

阅读全文...

去掉 wordpress hestia 主题轮播图区域的背景色

hestia 主题顶部的 .header-filter 部分是一个背景图,但是被加了一层阴暗的遮罩色。经常有同事反馈说太阴暗了这个色调,不适合作为官网的主色调。 来看看 hestia 的 style.css 里的代码 .header-filter { background-image: url(https://www.sunzhongwei.com/wp-content/uploads/2018/05/meitu_1.jpg); position: absolute; top: 0; bottom: 0; left: 0; right: 0; ...

阅读全文...

CSS 实现的水波纹效果

在 Chrome 帮助页看到的。 实现代码 img src="http://www.google.com/intl/en/chrome/assets/common/images/chrome_logo_2x.png" alt="Chrome" id="logo" style="-webkit-mask: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb ...

阅读全文...

Bootstrap 中 .container 与 .container-fluid 的区别

二者的区别 .container 是 fixed-with, .container-fluid 是 full-width 看编译之后的 bootstrap 代码,即可一目了然 @media (min-width: 1200px) .container { width: 1170px; } @media (min-width: 992px) .container { width: 970px; } @media (min-width: 768px) .container { width: 750px; } .container { padding-right ...

阅读全文...

被滥用的 inherit

今天调样式,被 inherit 坑了一把。 这份 CSS 样式原来是这样写的 你能想到的所有标签 { font: inherit; } 然后我看了半天一段文字的样式,永远是粗体,但是我从 chrome styles 里怎么也看不出来,这个样式是怎么加上去的,从 computed 里才发现,样式来自这行全局的 font: inherit。(computed 真是神器,特别是代码不规范的情况下) 我第一感觉 inherit 被滥用了。你想,整个页面里的 font 属性都要继承祖先的样式,这算哪门子的逻辑。。。 MDN 的一个例子,就很好 /* 头变绿 */ h2 { color: green ...

阅读全文...

动起手来发现自己啥也不会系列之 z-index

开始以为只需要在 div 1, div 2 上分别设置不同的 z-index 值就可以了。没想到完全不行。 <div id="card1"> </div> <div id="card2"> </div> #card1 { z-index: 1; width: 300px; height: 300px; background-color: yellow; } #card2 { z-index: 2; width: 200px; height: 200px; background-colo ...

阅读全文...

近期节日

2019年07月23日 大暑
2019年07月30日 非洲妇女日
2019年08月01日 八一建军节
2019年08月06日 国际电影节
2019年08月07日 七夕
2019年08月08日 立秋
2019年08月15日 日本投降日
2019年08月15日 中元节
2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
查看更多节日