摘要：
CSS的positon，我想做为一个Web制作者来说都有碰到过，但至于对其是否真正的了解呢？那我就不也说了，至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用，觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。在图解这十个过程之前，我将实例的代码放上来，好让大家一个实体参考：HTML Markup 1 <div id="example"> 2 <div id=&qu 阅读全文
posted @ 2012-03-19 17:25
爱睡觉的鱼
阅读(329)
评论(0)
推荐(0)
摘要：
记得以前读书时有一个黄金分隔线，今天在网站上看到一些有关于这个黄金比例在Web设计中的应用，觉得很有意思，于是在GG中寻找了这方面的相关资料学习了一回。个人觉得有必要了解一下，如果你对这个也感兴趣的话，不仿跟着我一起往下阅读。Phi (Φ)所指的是黄金分割比例，说得简单点他就是一个常数1.6180339887。这种黄金分割比例，几千年来得到了广泛的运用，比如说，艺术、建筑、设计、甚至音乐。那么什么是黄金比例我在此不详细介绍，因为怎么一个由来，我自己也是说不清楚的。如果你对这个东东的原理感兴趣的话，你可以点击这里，进入详细的阅读。简单一点的，我们来看下面的一个图：下面我们简单的来了解一下这个1. 阅读全文
posted @ 2012-03-19 17:10
爱睡觉的鱼
阅读(333)
评论(0)
推荐(0)
摘要：
前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单，方便大家急用时有地方可查。别的不多说了，直接看代码。为了节省时间，下面图形都采用的一个标签，可以是块元素也可以是行内元素，不过行内元素需要加上“display:block;”，唯一不同的是，在此用了不同的类名来区别，相关类名我放在了标题的后面，以便大家对应查看。1、正方形（square）：CSS Code:.square { width: 100px; height:100px; background: #E5C3B2; } 上面的方法是，设置宽度和高度一致就可以实现正方形的效 阅读全文
posted @ 2012-03-19 16:54
爱睡觉的鱼
阅读(440)
评论(0)
推荐(0)
摘要：
我们写CSS的在写CSS总会碰到一些这样那样的问题，为了应付这些问题，我们需要一些特殊的技巧才能解决。今天这篇文章我收集了几个怪异的问题，放上来给大家分享，希望大家以后碰到这样的问题能得心应手的解决。Select最佳设置昨天在携程UED中看到一篇关于表单元素中的Select的设置的文章，写的很有意思，详细的不多说，截了里面的一张图来说明Select的在各浏览器的测试情况：最终得到select的最佳设置的值：select{height:22px; line-height:18px; padding:2px 0;font-size: 12px;} 详细的介绍参考：携程UED的《select的最佳预 阅读全文
posted @ 2012-03-19 16:40
爱睡觉的鱼
阅读(290)
评论(0)
推荐(1)
摘要：
最近一直在整理一些CSS的知识，稍加整理放上来与大家分享，希望对有需要的朋友有所帮助，别的不说，感兴趣的就接着往下看吧：一、默认边框植通常我们写一个元素的border属性会这样的写：border: border-width border-style border-color; 例如“border:3px solid #000;”我们将元素的边框值设置为3px的黑色实线边框效果，然而这里唯一需要的值是“border-style”，因此，你要是这样写边框样式将会没有任何效果：.elm {border: 3px red;} 此时浏览器将“border-style”解析成“none”。如果你这样设置又 阅读全文
posted @ 2012-03-19 16:16
爱睡觉的鱼
阅读(151)
评论(0)
推荐(0)
摘要：
大家在Web页面制作中时常有碰到浮动元素被周围的文环绕的现像，这种现像时常发生在当浮动元素周围的内容高度大小于浮动元素的本身高度时，其内容就会环绕浮动元素，如下图所示：可是我们时常需要的不是这种效果，而以需要达到下图所示的效果：那么要实现上图所展示的效果其实并不是件很复杂的事情，我想大家都有自己的解决方法，只不过哪种方法是最简单而且是最实用的。前面我在《十个CSS小技巧》一文中的第四个小技巧中展示了一段解决的代码。但今天我想给大家介绍的是另外一种实现方法。这个方法是非常的简单，而且解决起来相当的快速。寻找问题的根源发生这种情况时，大家都知道是什么原因——浮动元素自身的高度低于相邻元素的文本的高 阅读全文
posted @ 2012-03-19 16:08
爱睡觉的鱼
阅读(925)
评论(0)
推荐(0)
摘要：
纯属转载，大致看了下，文章里推荐的书都不错，设计前端的常见内容（html、css、js、jq），当然，前端不仅仅包含这几个方面。文章如下（链接均指向豆瓣的书评）：----------------------------------- 时常遇到朋友问我前端学习该如何学习, 看哪些书藉. 自己也希望将自己的一些学习心得与经验传教于初学者. 抱着对初学者负责的态度, 如何学习前端, 我还需要在心成有个成熟的底稿后再来写, 本文先以自己学习过程中看过的书为基础, 总结一下前端学习各个阶段书籍的选择.HTML与CSS阶段书藉选择 对初学都来说,这一阶段应该是XHTML与CSS2的学习. 学习前期... 阅读全文
posted @ 2012-03-19 09:57
爱睡觉的鱼
阅读(180)
评论(0)
推荐(0)
摘要：
在本篇文章中，我将讲述色彩理论的基础知识以及 3种简单的配色方案，以让你们在为 Web 站点选择色彩时能有把握。在后面的文章中，我将讲述如何简化这些色彩选择。听着别人对你设计的 Web 站点的赞扬，毕竟比苦心孤诣地去进行色彩选择更让你愉快。颜色、亮色、暗色 颜色，或色调，一般被划分为原色、间色、复色。原色包括红色、黄色和蓝色，它们被称为三原色，这是因为其它颜色不能调配出这三种颜色。在将三原色转换为 Web 颜色时，你可以将它们表示为十六进制的颜色代码，分别为 #ff0000，#ffff00 和 #0033cc，如图1所示：图1：原色和间色，以及它们的十六进制颜色代码 间色指红、黄、蓝三原色中的 阅读全文
posted @ 2012-03-19 09:48
爱睡觉的鱼
阅读(318)
评论(0)
推荐(0)
摘要：
暖色 vs. 冷色 在网站中使用互补色方案效果非常好，这是因为互补色方案同时包含暖色和冷色。使用暖色和冷色提供了一种对比的效果。同时，哪些颜色是暖色，哪些颜色是冷色，是很容易记住的，你在图8中就可以看到（在生成器网站上也可以看到）标出的暖色和冷色：图8：暖色和冷色 暖色是那些可以让你联想起夏天、太阳或火的颜色，包括色轮中从紫色起到黄色止的多种颜色。而冷色则是那些可以让你联想起春天、冰或水的颜色，包括色轮中从黄绿色起到紫色止的多种颜色。如果你仔细观察一下色轮，就会很快发现你选择一种主色后，生成器自动选出的相对应的互补色在冷暖色方面与主色是相反的。因此，如果你选择“暖”红色，相对应的互补色就是“冷 阅读全文
posted @ 2012-03-19 09:38
爱睡觉的鱼
阅读(586)
评论(0)
推荐(0)
浙公网安备 33010602011771号