CSS

2019-09-07 · 阅读 132 · 字数 32

参考 ant design 的卡片 hover 效果 .feature7-block-group:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 6px 16px rgba(0,0,0,0.12); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } ...

阅读全文...

2019-06-20 · 阅读 659 · 字数 121

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

阅读全文...

2019-07-29 · 阅读 1192 · 字数 208

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

阅读全文...

2019-04-27 · 阅读 1641 · 字数 150

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

阅读全文...

2019-03-09 · 阅读 1351 · 字数 102

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

阅读全文...

2019-04-13 · 阅读 1037 · 字数 138

标题超出两行的部分显示为省略号 .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 ...

阅读全文...

2018-12-06 · 阅读 1467

例如，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 是第一个元 ...

阅读全文...

2018-11-30 · 阅读 1656

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

阅读全文...

2018-10-25 · 阅读 1760

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

阅读全文...

2018-06-06 · 阅读 2912

<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; } ...

阅读全文...

2018-06-05 · 阅读 5281

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

阅读全文...

2018-05-04 · 阅读 2966

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; ...

阅读全文...

2017-06-22 · 阅读 7191

在 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 ...

阅读全文...

2017-04-06 · 阅读 9099

二者的区别 .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 ...

阅读全文...

2017-04-05 · 阅读 3611

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

阅读全文...