CSSPod
  • Home
  • Contact
  • 求贤

CSS

A collection of 17 posts

CSS

在 Web 内容中使用系统字体

某天(2016.07.12)发现 GitHub 的字体比原来宽了一些,打开开发者工具一看,字体设置中多了两个奇怪的玩意: body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", R...

  • minwe
    minwe
3 min read
CSS

等宽列背后的表格布局算法

引子 网页开发中,经常需要实现等宽列效果,比如 Web App 中的 TabBar、Slider 底部的等宽指示条,而且往往元素的个数是不确定的,无法设定固定的百分比宽度。 虽然借助 flexbox 可以轻松实现: .container { display: flex; }...

  • minwe
    minwe
8 min read
CSS

Flexbox 完全指南

背景 CSS Flexbox Layout(Flexible Box)模块(目前为 W3C 最终草案2016.03.01 更新为 CR —— 候选推荐规范)致力于提供一种更高效的布局方式,即便子项尺寸未知(或动态)的情况下,对齐、分布容器子项之间的空间,因此谓之「flex」。 弹性...

  • minwe
    minwe
8 min read
CSS

HTML 和 Body 在 CSS 中的区别

在 CSS 中,<html> 和 <body> 的区别往往被忽略,全局样式或者定义在 <html> 上,或者定义在 <body> 上。实际上,两者是有区别的,不论是 CSS 老鸟还是新手,都应该了解。 HTML 和 Body 如何关联...

  • minwe
    minwe
2 min read
CSS

:nth-child 和 :nth-of-type 的区别

基本语法 :nth-child(an+b) 选择符匹配有父元素、前面有 an+b-1 个兄弟元素的元素。 element:nth-child(an + b) { style properties } :nth-of-type 选择符匹配有父元素、前面有 an+b-1 个同名兄弟元素的...

  • minwe
    minwe
2 min read
classList

五种鲜为人知的 CSS / JS 交互方式

使用 JavaScript 获取伪元素样式属性 众所周知,JS 可以使用 style 属性获取普通元素的 CSS 样式,那伪元素呢?也是可以的。 // Get the color value of .element:before var color = window.getCompu...

  • minwe
    minwe
2 min read
CSS

将HTML和CSS解耦

多年来,Web 标准社区一直在谈论关注分离(separation of concerns),就是将 CSS 、JavaScript、HTML 分开放在各自的文件里。我们也已经这样做了。 CSS Zen Garden (CSS 禅意花园)证明相同的 HTML 结构可以通过改变 CSS...

  • minwe
    minwe
9 min read
.htaccess

20个来自Html5 Boilerplate的代码片段

前言: 整理文章的时候发现草稿里躺着这样一篇文章——竟然是三年前的了,光阴飞逝啊!Html5 Boilerplate 看似简单,实则是前端优化的集大成者,每个前端开发者都应该仔细阅读其代码,包括注释里的一些链接,你将会受益匪浅。Divya Manian 还写了一本 HTML5 Boi...

  • minwe
    minwe
13 min read
Clearfix

CSS 浮动清除方法总结

添加额外标记 少年,还记得当年页脚的 <br clear="all" /> 吗?最早、也是W3C推荐的方法,简单明了,缺点就是要添加额外的标记。 <br style="clear:both"/> 浮动父元素(Float...

  • minwe
    minwe
7 min read
CSS

那些让 Web开发者们深感意外的事情

作为 Web 开发者,对自己的行业前景,人人都有自己的看法,然而,任何行业都有出人意料的地方。著名的 Web 开发设计博客 Nope.com 曾向他们的读者做了一个调查,请他们列举 Web 开发领域那些让他们感到意外的事情,收到了各种各样的反馈,本文就是这次调查的结果与分析。 一个...

  • minwe
    minwe
4 min read
animation

“性感”的CSS链接翻转

鼠标悬停时,链接文字向左或向右舞动、倾斜。为了增强效果,为悬停状态设置不同的颜色(演示)。 [css] .cpojer-links a { display: inline-block; padding: 4px; outline: 0; color: #3a599d;...

  • minwe
    minwe
17 min read
CSS

7个提高用户体验的CSS技巧

CSS之美在于能通过少量的声明并可使网页变得很与众不同。下面是7个CSS小技巧,可以让你的网页更加时尚,让用户获得更佳的用户体验和浏览愉悦感。 改变选中文字的默认颜色 [css] selection { background:#c3effd; color:#000; /* Safa...

  • minwe
    minwe
2 min read
CSS

使用CSS3实现Faux列

这是一个CSS3的小技巧,不使用图片便实现Faux Columns。边栏在布局中的问题是它不能随着内容的扩展而延伸到相等的高度。常规的方法是创建一个图片背景应用到内容的父容器上。本文将介绍如何使用CSS3渐变实现相同的效果。 旧的方法 先来回顾一下让边栏背景沿着页面延伸的常规方法。...

  • minwe
    minwe
3 min read
CSS

CSS3 Media Queries 详解

说起CSS3的新特性,就不得不提到 Media Queries 。 本文比较详细,所以很多实际中用不到。所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非...

  • minwe
    minwe
6 min read
CSS

CSS3 Media Queries

CSS2允许为特定的媒体指定样式表,如screen(屏幕)和print(打印),CSS3通过添加media queries(媒体查询库)使其更加有效。CSS3可以通过添加查询语句来确定不同的媒体类型,应用不同的样式表。例如为大的显示器指定一个样式表,为移动设备指定另一个样式表。有了这...

  • minwe
    minwe
4 min read
CSS

CSS3 Media Query:移动 Web 的完美开端

移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸 的屏幕,这是一个很久以来都没有完美解决方案的问题,直到有了 CSS3。 CSS3 的 Media Querie...

  • minwe
    minwe
9 min read
CSS

CSS 3渐变跨浏览器实现

CSS渐变大约两年被Webkit浏览器引进,但是由于和大多数浏览器不兼容而很少使用。现在Firefox 3.6+开始支持CSS渐变,我们可以用样式创建渐变而无须使用图片。本文将介绍如何使用CSS创建支持主流浏览器的渐变:IE, Firefox 3.6+, Safari, Chrome...

  • minwe
    minwe
3 min read
CSSPod © 2023
Latest Posts Ghost