CSS禅意花园初试,仅供学习,欢迎交流(文末有链接哦)
花语
传说有一位美丽端庄、冰清玉洁的女孩。因为她的温柔贤淑,村里的人都很喜欢她。有一年年初,气候寒冷,村庄遭受了严重的冰灾,春天迟迟不来,人们把过冬的粮食都吃光了。看着大家饿得倒下,冰凌花心急如焚,向上苍祈祷:“伟大的上苍,快让田野里长出也才吧。救救孩子们,救救老人们,救救大家吧!” 上苍听了非常感动。
一天晚上,女孩在梦里梦见了一位白胡子老爷爷对她说:“你能光着脚在冰雪里走遍山川田野吗?” “能”,冰凌花坚定的回答到。说完,老爷爷就递给了她一包种子。然后老爷爷就消失不见了。当她醒来的时候,发现自己的手里有一包种子。她光着脚跑向了田野,一边跑一边回头把种子撒在她的脚印里,脚底的鲜血滋润着种子,不一会就长出了小绿芽。接着就看见一朵朵黄色的小花从雪地里探出头来。
这些小花拯救了全村人的性命。
然之
众所周知,“CSS禅意花园”,无论是CSS从入门到精通(放弃?),还是深入浅出CSS系列,她都是令人难以忘怀的经典。
所以,近期带着滔滔江水之情,试手了这次初探之作。
附言
仅此一人? No No No,佳人相伴才能有心望月。3年同窗,即是故交,亦是新知。 —— 致亲爱的大鹏
前期先大致实现视觉稿的还原,后期再进行适配和兼容调整等优化。So,目前需在现代较新浏览器下浏览才能达到最佳效果。
吐槽
- 内容:同行的小伙伴都应该(需要)知道,CSS禅意花园的规则:同一份HTML代码,用不同的CSS样式创造天下。那么问题来了,由于小伙伴可能对于代码的不熟悉,偏向于UI的调整,忽视了实际代码无法改变的从上到下的顺序和文章内容结构,这带来了一些小麻烦:
- 比如截取两个独立section中的内容合并为第三者?
- 同一个section中的内容,一个放在右边自成一体,另一个放在左下边当作点缀,还好机智的我没有放弃治疗(英俊脸)
- 上下颠倒两个section的位置(内容高度不固定)
- 字体:设计稿中有几种不同的字体,很不幸的在我的电脑上都不存在(相信大部分人也不存在,来咬我呀),在打开PSD的时候文字提示框点击“不要解决”我其实是拒绝的,得准备讨论一下(迷茫脸)
- 貌似定死的1080p宽屏稿让我有点忧伤
- 奇淫技巧当然还得过奇淫浏览器的关啦(深沉脸)
重点
重点当然是链接啦,无图无真相(调皮脸)


