CSS禅意花园示范作

CSS禅意花园初试,仅供学习,欢迎交流(文末有链接哦)

花语

传说有一位美丽端庄、冰清玉洁的女孩。因为她的温柔贤淑,村里的人都很喜欢她。有一年年初,气候寒冷,村庄遭受了严重的冰灾,春天迟迟不来,人们把过冬的粮食都吃光了。看着大家饿得倒下,冰凌花心急如焚,向上苍祈祷:“伟大的上苍,快让田野里长出也才吧。救救孩子们,救救老人们,救救大家吧!” 上苍听了非常感动。

一天晚上,女孩在梦里梦见了一位白胡子老爷爷对她说:“你能光着脚在冰雪里走遍山川田野吗?” “能”,冰凌花坚定的回答到。说完,老爷爷就递给了她一包种子。然后老爷爷就消失不见了。当她醒来的时候,发现自己的手里有一包种子。她光着脚跑向了田野,一边跑一边回头把种子撒在她的脚印里,脚底的鲜血滋润着种子,不一会就长出了小绿芽。接着就看见一朵朵黄色的小花从雪地里探出头来。

这些小花拯救了全村人的性命。

然之

众所周知,“CSS禅意花园”,无论是CSS从入门到精通(放弃?),还是深入浅出CSS系列,她都是令人难以忘怀的经典。

所以,近期带着滔滔江水之情,试手了这次初探之作。

附言

仅此一人? No No No,佳人相伴才能有心望月。3年同窗,即是故交,亦是新知。 —— 致亲爱的大鹏

前期先大致实现视觉稿的还原,后期再进行适配和兼容调整等优化。So,目前需在现代较新浏览器下浏览才能达到最佳效果。

吐槽

  1. 内容:同行的小伙伴都应该(需要)知道,CSS禅意花园的规则:同一份HTML代码,用不同的CSS样式创造天下。那么问题来了,由于小伙伴可能对于代码的不熟悉,偏向于UI的调整,忽视了实际代码无法改变的从上到下的顺序和文章内容结构,这带来了一些小麻烦:
    • 比如截取两个独立section中的内容合并为第三者?
    • 同一个section中的内容,一个放在右边自成一体,另一个放在左下边当作点缀,还好机智的我没有放弃治疗(英俊脸)
    • 上下颠倒两个section的位置(内容高度不固定)
  2. 字体:设计稿中有几种不同的字体,很不幸的在我的电脑上都不存在(相信大部分人也不存在,来咬我呀),在打开PSD的时候文字提示框点击“不要解决”我其实是拒绝的,得准备讨论一下(迷茫脸)
  3. 貌似定死的1080p宽屏稿让我有点忧伤
  4. 奇淫技巧当然还得过奇淫浏览器的关啦(深沉脸)

重点

重点当然是链接啦,无图无真相(调皮脸)

CSS禅意花园初试

晓月风尘 wechat
扫描二维码与我相识
你我共同创造价值,记得支持一下哦~