CSS

2019-09-27 · 阅读 5234 · 字数 130

我发现新建的英文网站，单词在行尾会被强行拆分换行，非常影响阅读。 word-break 的三种模式 normal：使用默认的断行规则。 break-all：对于英文单词，会在行尾强制将单词拆分，进行换行。如果是英文网站，这种体验会非常不好。 keep-all：即便是中文也不会断行。 word-wrap 作为补充 normal break-word: 对特别长的单词有效。特别长是指，自己独占一行时都装不下的情况。这种情况会强制换行，而默认的 normal 模式不会换行。 结论 英文网站应该采用： word-break: normal; word-wrap: break-word; 参考 ...

阅读全文...

2019-09-21 · 阅读 4424 · 字数 86

举个直观的例子： <div class="main"> <h1>Languages</h1> <!-- h1:first-child, h1:first-of-type --> <div>Javascript</div> <!-- div:nth-child(2), div:first-of-type --> <div>Golang</div> <div>PHP</div> </div> first-ch ...

阅读全文...

2019-09-07 · 阅读 7238 · 字数 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 · 阅读 7100 · 字数 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 · 阅读 12792 · 字数 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 · 阅读 16224 · 字数 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 ...

阅读全文...

2020-04-04 · 阅读 8087 · 字数 134

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

阅读全文...

2022-03-30 · 阅读 13114 · 字数 171

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

例如，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 · 阅读 6156

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

阅读全文...

2018-10-25 · 阅读 8286

原代码 <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 · 阅读 8432

<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 · 阅读 13404

作为渐变背景色非常合适 .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 · 阅读 7651

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 · 阅读 16149

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

阅读全文...