网页设计学习笔记

摘要： 在 CSS2 的盒模型中，一个元素的渲染宽度（rendered width）等于 width + padding + border，渲染高度等于 height + padding + border。元素的渲染大小就是它在网页中实际占用的盒子大小。这种规定在很多时候让人很头疼。比如你想让子元素的 padding-width: 10px 和 border-width: 2px，然后填满父元素的所有空间，这时候简单地来一个 width: 100% 和 height: 100% 是会溢出的。当父元素的大小是固定的时候，我们很容易计算出正确的 width 和 height。但是，如果父元素的大小也不是固 阅读全文

摘要： 这里收集见过的一些美观的个人博客，不定时更新：Home - G2WHeroic Yang's BlogJS Mix - 不会做蛋炒饭的小提琴手不是好程序员Kingauthur's Blog ←LucifrPIZnRay未志掌心这些博客可以供设计时参考。另外 WordPress 官方主题站里也有许多博客主题可以参考。 阅读全文

摘要： CSS 的轮廓(outline)属性有点像边框(border)属性，但两者还是有明显不同之处的。我们先看一个例子：div#test { width: 100px; border: 1px solid #000000; outline: 3px solid #6688AA;}可以看到在宽度为 1px 的 border 外面由多了一层宽度为 3px 的 outline。考虑到两者的写法也一致，为何有了 border 还需要 outline 这个属性呢？实际上，outline 和 border 的最大区别在于，它不占用空间，无论 outline 多宽也不会影响正常的页面流。所以，可... 阅读全文

摘要： 在 CSS 中，由于浮动元素不包含在正常的页面流中，所以如果父元素只有浮动子元素，浮动子元素将会脱离父元素，产生我们不想要的结果。例如（结果见这里）： Hello World可以看到两个浮动的子元素并不会撑开父元素，而是跑到下边去了。这个问题的解决方法有下面几种：父元素设置 overflow 为 hidden 或者 auto父元素设置 float 为 left 或者 right父元素设置display 为 table添加空白 div 或者 br 并设置为 clear: both添加 :after 伪元素并设置 content: '' '';display: ta 阅读全文

摘要： 在 CSS 中我们可以设定用 color 和 background-color 设定元素的前景色和背景色。例如：a { color: #123456; background-color: #ABCDEF;}CSS2 中使用的是 24位 RGB 颜色：即一个颜色由红绿蓝三部分组成，每部分用两位 16 进制数表示，总共可以表示 2^24 =16777216 种不同的颜色。在 RGB 颜色中，最小值 #000000 表示黑色，而最大值 #FFFFFF 表示白色，而 #FF0000，#00FF00 和 #0000FF 分别表示纯红色，纯绿色和纯蓝色。RGB 颜色值还有其它的表示方式：#33... 阅读全文