博客文章 / Blog Posts

扫码订阅微信公众号 “CSS魔法”：
[微信公众号：“CSS魔法”]

2024

2023

2022

2019

2018

2017

2016

2015

2014

2013

更早

视频 / Videos

书籍 / Books

关于站长 / About Me

网名
CSS魔法
简介
前百姓网前端架构师，QCon 等技术大会讲师。十余年全栈工程师和架构师，自称“披着工程师外衣的设计师”。
《AI 辅助编程入门》作者，《CSS 揭秘》《AI 辅助 Python 编程》译者。
居住地
中国 上海
社交网络
CSS魔法 (微信公众号)
@CSS魔法 (微博)
@cssmagic (GitHub)
内容专栏
魔法哥聊AI (知乎专栏)
魔法哥聊AI (掘金专栏)
@魔法哥聊AI (B 站)
@魔法哥聊AI (视频号)

习题与演示 / Practices and Demos

2009-07-17

爆牙齿的 Web 标准面试题Ⅱ

[CSS练习题设计稿] （习题原稿图片与解说 by 爆牙齿）

说明：神龙见首不见尾的前端牛人爆牙齿又有新题问世。与上次不同，此次纯粹考核 CSS，同时也更有难度。然而题目似乎没有交待清楚，素材图片也没有提供。好吧，顺道连 PS 也一并考了。

理解题目需要花点功夫，我来概括一下。结构代码已经给定，由 CSS 实现如下布局：单行文字泡泡的宽度自适应，多行文字泡泡的宽度固定但高度自适应。单行文字泡泡的类名是 me 或 he，而多行文字泡泡的类名是 vme 或 vhe。这些类名由服务器端根据文字内容判断输出，不需要我们前端操心了。

此题切中 CSS 布局的两大技术要点――浮动和定位。把这两点吃透了，这一题应该难不倒你。当然还有一个隐形的问题――跨浏览器兼容性，比如我在做题时就发现或重温了 IE6,7 的多个 CSS bug。我的体会是，尽量选择一个简单清晰的（通常也是健壮的）布局思路。自己都无法梳理清楚的布局思路，浏览器通常也很难漂亮地完成。

其它感想：当我们面对简洁的结构代码时，利用好每个钩子。

自加难度：用 CSS Sprites 整合所需的图片资源。

【查看演示】

2009-06-16

迅雷 2009 页面重构工程师面试题

[CSS练习题设计稿] （习题原稿图片 from cody）

说明：目前公布的迅雷 2009 面试题中一道有点意思的题目。这是一个看似平常的新闻列表模块，但实际上暗藏玄机。难点在于日期紧跟新闻标题之后，而新闻标题不等长且要求超长截断。解题方法有很多，论坛里已经出现多个答案。这次我同样给自己设了一些限制：无 CSS Expression、无定位、尽可能实现省略号截断。

【查看演示】

2009-02-15

弧形排列的可折叠二级导航

[CSS练习题设计稿] （习题原稿图片 from 瑶子）

说明：不规则的弧形排列，还要实现手风琴效果，确实令人伤透脑筋，但也极具挑战性！不依靠 JS 来计算定位，仅仅由轻量级的纯 CSS 代码来实现灵活的可扩展布局，这真的可以做到吗？或许这个演示真的可以称作“奇技淫巧”式的炫技，因为这种效果本该是由 Flash 来完成的。

【查看演示】　　教程(布局篇) >>

2009-03-03

爆牙齿的 Web 标准面试题

[CSS练习题设计稿] （习题原稿图片 by 爆牙齿）

说明：这是前端牛人爆牙齿在两年半之前推出的一道颇为经典的 HTML+CSS 面试题。据他本人说，真正的考点不在于 CSS 技巧，而在于应试者对结构的认知，以及是否具有“结构与表现分离”的思想，而这一思想正是 Web 标准的核心之所在。

网上有一些解答，出题人也有自己的讲解，我自己“闭卷”做了一份，简单谈一下。CSS 布局方面没什么问题，有一点小疑惑就是题中“页面居中”与“页面自适应”的含义，我的理解是浏览器视口够大时则页面以固定宽度居中，视口过小时则页面宽度自动收缩适应，说白了也就是 max-width 的概念。为了在弱智的 IE6 下实现此效果，我使用了 IE 私有的 CSS Expression，我认为这就是私有属性存在的意义（CSS Expression、HTC、CSS Filter 莫不如是）。这里需要说明的是，CSS Expression 非常耗资源，实战中应尽量避免使用，推荐使用 JS 在 IE6 下模拟 max-width 的效果。另外为了修补 IE6 的浮动 3px + hasLayout bug，我使用了一点儿 CSS Hack。

在结构方面，爆牙齿本人推崇“独立于根”的原则，即各栏目区块直接隶属于 <body> 元素。很巧，我也有类似的代码洁癖。不过在这个案例中，我还是选择为所有内容添加一个外围容器（wrapper），客观地说，这样的结构在布局时更加灵活和强壮（为此牺牲一点结构的纯度也是可以接受的）。――当然，“独立于根”也完全可以实现这个布局，因为 <body> 本身就是一个现成的 wrapper。对“考题说明”的处理，我与爆兄一致。在具体的标签语义方面，各栏目的说明文字是采用 <dl> 还是 <hx>+<ul> 或是 <hx>+<p>，我认为都说得过去，仁者见仁智者见智。

【查看演示】　　爆牙齿本人的解述 >>

2009-02-09

“高于一切的标题” - 一道有意思的 HTML+CSS 面试题

[CSS练习题设计稿] （习题原稿图片 from linxz）

说明：除了两列等高、列高度随文章内容自适应这样的常规布局要求之外，还有补充要求：在写结构时，不论 <h1> 嵌套在多少层 <div> 标签中，它必须是第一个出现的实体标签，即裸奔时出现在页面的最顶部。因此，结构代码的开头部分大致可能如下：

<body><div><div><h1>标题</h1>...

这也是这道题最有意思的部分，它强调了结构的重要性，考虑到文档流顺序与 SEO，其意义远远超过一般的 CSS 习题。这也就是我们常说的：为结构写样式，而不是为样式写结构。

半年前做这道题，我需要在 <h1> 外面套三层 <div>，现在只需要两层。结构代码清新自然、干净漂亮！

【查看演示】

2009-02-05

“个性酷包” - 电子商务网站产品展示模块

[CSS练习题设计稿] （习题原稿图片 from 芋头）

说明：“产品展示模块”是工作中具有较高代表性的案例。实战时应考虑到模块的可扩展性，比如高宽可调整，样式可重用等等；并尽可能减少图片数量。此外，我还给自己设了一个限制――把产品缩略图和标题放在一个链接中。这个“BT”的限制增加了布局的复杂度，实际项目中是没有必要的。

【查看演示】

优品推荐