CSS

2019-09-26 · 阅读 12800 · 字数 262

移动设备网页上使用 vantui 开发 form 提交界面，在手机上表现良好，但是到了 ipad 等平板设备上时，就会发现字体非常小，严重影响用户的浏览和操作。 解决方法就是替换 vantui 的默认 font size 。 我们希望得到的效果是，屏幕越大，对应的字体越大。 当然这是针对功能页面而言，对应内容页面来说，其实没有太大的问题。 ipad 上 rem 的使用 html { font-size: calc(100vw/3.75); } .button { font-size: 0.16rem; } 什么是 vw vw 是视窗的宽度 vh 是视窗的高度 视窗是指浏览器窗口，还 ...

阅读全文...

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

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

阅读全文...

2019-09-21 · 阅读 4933 · 字数 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 · 阅读 7887 · 字数 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 · 阅读 7793 · 字数 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 · 阅读 13860 · 字数 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 · 阅读 18193 · 字数 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 · 阅读 8848 · 字数 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 · 阅读 13928 · 字数 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 · 阅读 5387

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

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

阅读全文...

2018-10-25 · 阅读 9099

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

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

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

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

阅读全文...