CSS

2018-05-04 · 阅读 295

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

在 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 · 阅读 2901

二者的区别 .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 · 阅读 1495

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

阅读全文...

2017-01-17 · 阅读 1140

开始以为只需要在 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 ...

阅读全文...

2017-01-02 · 阅读 1687

在临摹 semantic-ui 的 feed 实现时，发现我对 Two-Column Layout 的实现并没有掌握。 这是我第一次做出来的效果 而我想要的效果是这样的 双栏布局不就是加个 float: left 这么简单么？看起来并没有这么简单，我之前用 placehold.it 图片来模拟 div float 布局，看来是忽略了很多隐藏的问题。 Google 了一下，原来只需要在右侧 div 加上 overflow: hidden 即可。 WTF，overflow: hidden 与 float 布局有什么关系 我印象中，这应该不是第一次查到这么诡异的 CSS 解决方案了。如果是之前， ...

阅读全文...

2016-12-13 · 阅读 1607

我一直有个疑惑: "iPhone 从 4 到 7，屏幕的清晰度有了多次质的提升, 但是，为何在 Chrome 的 Toggle Device Toolbar 中, iPhone 设备对应的像素却基本没有提升?" 今天在看 CSS The Missing Manual 的时候才明白是怎么回事? CSS 像素与物理像素并不是一回事。在 iPhone 升级换代过程中，iPhone 单位空间内的物理像素点越来越多。 而 CSS 像素与物理像素并不是 1:1 的关系， 而是 1:N 的关系，随着屏幕升级，这个 N 在不断增大。 Device Pixel 设备像素。即，物理像素。 CS ...

阅读全文...

2016-12-13 · 阅读 379

网页设计的两个流派 fixed-width liquid 液体的、流式 responsive web design 则为第三个流派。针对不同屏幕尺寸采用不同的布局 (media query)。例如，PC 上使用 fixed-width, 移动设备上使用 liquid. fixed-width 常见的宽度是 960, 以便于支持 1024*768 分辨率的屏幕。 早期的 table 排版方式，相对于如今的 div 方式最大的劣势就是没法使用一套代码兼容移动设备，即，采用 liquid 方式是不可能的。 div 内部排版 padding-left & padding-top 使用 HT ...

阅读全文...

2016-12-02 · 阅读 1556

absolute left right top bottom 绝对是指，相对网页的坐标系来说的。这是我最初的理解，后来在实战中 z-index 从精通到入门 ，发现我的理解有误。 看一下 MDN 的说明 Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow a ...

阅读全文...

2016-11-15 · 阅读 1855

CSS 冲突通常由两种情况引起 继承自不同祖先的样式 多个样式应用于同一个标签 对于第一种冲突，很好理解，nearest 祖先样式优先。 第二种冲突的实现很有趣，采用了打分机制。 一句话概括，即 tag 一分，class 十分，id 一百分，inline 一千分。得分高者胜！ 例如： p 得1分 .name p 得11分 #name p 得101分 #main #name p 得 1101分 #name .content p 得 111 分 最终 #main #name p 获胜！ 但是假设两个 style 得分一样呢？例如，.name a 与 p .name 得分均为 11, 这时哪 ...

阅读全文...

2016-11-13 · 阅读 1588

这个从名字上就很好理解，即根据属性来选择元素。 举几个例子： input[type="password"] input[type] /* 有 type 属性的 input */ 当然，也支持复杂的正则方式匹配 a[href$=".pdf"] 即，属性 href 以 .pdf 为结尾的 a 标签。 ...

阅读全文...

2016-11-13 · 阅读 2113

Pseudo-Class & Pseudo-Elements 这两个名词起的非常不友好，让人看了完全摸不着头脑。可想而知，到了国内，一定有土鳖将其翻译成“伪类”/“伪元素”。伪类。。。好吧，听上去还不如叫变态假面。 首先看一下 MDN 上的解释 A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers ...

阅读全文...

2016-11-13 · 阅读 342

目标 将博客、网站的模板剥离出来，在 wordpress / tumblr 模板市场免费开放下载，如果有一定的用户量，说明你的功力已经得到了认可。 如果改成收费，还有人愿意使用，说明你已经成为了 CSS 大师 ...

阅读全文...

2016-11-02 · 阅读 586

本以为是本小书，两个小时就能看完，没想到七百多页。额，挑战一下吧 作者推荐的编辑器里居然没有 VIM，印象分减一。 div 与 span 的区别 div 是 block，即前后会自动加上 line break span 是 inline 的 HTML5 对 div 的功能/场景细化 section aside。页面的侧边栏 footer。这个并不局限于页面的 footer, 也可以是文章的 footer nav。导航 figure 兼容性问题，IE8及之前浏览器不支持这些 tag. 不支持的原因是，这些浏览器不识别 HTML5 新标签，所以在这些标签上使用的 css 都会失效。解决方法 ...

阅读全文...

2015-12-12 · 阅读 1344

为何要响应式设计 方便手机阅读 提高搜索排名 目标分解 了解目前的布局是怎样的。PC上和移动设备上的效果分别是怎样的。 理想的布局是怎样的。PC上和移动端的目标效果是怎样的。布局以内容、功能优先，例如，若广告与正文在一起，影响了用户评论的积极性。新布局应将广告移至PC侧边栏，移动设备的底部。 当前布局的分解，划分为几大块。核心内容区，辅助功能区。 html 代码拆分。先保证在移动端显示正常。 对 PC 端的显示做调整。 mobile first 原则 mobile first 并不是一个设计原则，而是一个 css 代码编写原则。 参考 How To Write Mobile-first ...

阅读全文...