碎碎念ZWS

从一开始建站到如今，碎碎念网站经历了无法计数的修改，wordpress是个很不错的博客程序，说不上简单易用，至少我这个网站设计门外汉折腾了几个月也算是摸熟了，PHP我不懂，每次修改函数都需要查阅大量的wordpress关于function.php相关的函数的使用和修改、以及调用，新手修改难免出现语法错误、使用不当、代码冲突这些小麻烦，大问题很少，小bug不断。

几个月下来，合计一下，发现自己花费在这个博客网站上的精力丝毫不亚于我当年发狠劲学平面设计的情形。好在大学这几年接触过一些HTML和CSS，修改修改小细节还是不在话下的，再者说了，活到老学到老嘛，咱不也还在长知识呢，是吧！？

趁着暑假，碎碎念也终于如愿修改了网站的主题，基于N多普遍实用主题的功能和优秀代码，如威言威语的weisay、奶酪的raycms、热血洒红尘 的Rcloud等，有心的朋友可以发现，Mystyle跟RCLOUD风格很相似，不过碎碎念并不是复制粘贴，只是看着很喜欢那种配色，就使用了配色，文章列表的每一个细节几乎我都重新编排过，自适应的典型比例尺寸、不同分辨率下不同的网站布局与宽度。

一、顶部导航栏

顶部导航栏包含了三个部分：载入进度条、导航菜单、微博与订阅按钮。载入进度条沿用raycms的尺寸，样式不变，位置也不变，没什么可多说的，导航菜单理论上支持无限子级菜单，需要在样式表加入footnav ul ul ul…来添加样式，一般我们使用最多是三级导航，过多的子级菜单反而拖累了导航的本质功能——快速指南。微博与订阅按钮来自weisay，做得很好，不过我很懒，所以没怎么做大的修改，后台支持修改微博地址。

顶部导航栏在所有的设备上都是自适应宽度的，经过我自己的测试，自适应效果还不错，保持了整齐的感观。

二、头部

头部也是包含三个块：logo、搜索框、时间。说说这个动感时间，是来自一个叫鸟的博客，说起来惭愧，已经很久没去那个博客看了。这个动感时间的每一个数字都是一个动画小人，用各种闷骚的姿势来摆出数字造型，乍一看，哎哟，有种猥琐大叔的味道啊，特别是那个报秒的小人，每一秒都在那摆造型，你不累么？

三、首页

首页幻灯片值得一说，来自有X的，修改了切换的间距为零，另外重写了样式，把一些不太必要的文章信息也去掉了，主要是觉得幻灯片最重要的一点是突出焦点部分，太多的信息反而没有那么好的浏览体验，所以这一次的风格就比较简洁风啦！main的内容全部都是自适应，话说CMS部分还是可以继续优化做得更完美的。

四、文字链接

文字链接有点搜索引擎风格，未点击过的文章链接、友情链接都是用#333即黑灰色显示，鼠标指向是则变为棕色，点击过得链接将呈现#08b即蓝色，不知道你发现了没有呢？看过的、没看过的，一一给你呈现出来，是不是很方便，既不漏看也不重看，给浏览多一点色彩，少一些烦恼！

友情链接页面的文字链接边框带霓虹特效，忽明忽暗、忽大忽小，第一次看到就爱上了这样的效果，使用CSS3实现的哟！

文章列表标题链接在点击后颜色会变暗，成#bbb，未阅读过得文章标题为棕色，鼠标指向呈蓝色，阅读过的为灰色，如同您已点击过的搜索链接相似，自动为你标记阅读过的文章，很不错吧~

五、特色瀑布流、图片列表布局

文章列表初默认图文列表外，我还加入了瀑布流排版和图片列表排版，瀑布流的感觉很不错，让淡雅的页面增加了些许动感，配合的很舒服，唯一美中不足的，如果可以把边栏在这两个布局中隐去的话，那就更好了，不过鉴于网站结构，修改起来比较麻烦，所以就暂时不做修改了。假如你在wordpress后台设置中设定了固定链接为默认链接的话，可以轻松在后台的Mystyle主题设置中设置分别用瀑布流或图片列表的分类了，你可以选择用分类的ID或者分类名（不是别名）来指定，目前仅提供4个分类，理论上可扩展实现N多分类的个性布局，为避免使用过多反而影响体验，建议图文列表指定分类不超过3个，瀑布流不超过2个，用个性的排版让每一次点击都带来新奇的精彩，瀑布流布局很适合做产品展示，而图片列表则适合电影推介、美图共赏等，多重选择任君挑选，让网站飞起来！

六、纯CSS悬浮按钮

相信很多来碎碎念的朋友都会发现，在页面的右边中部漂浮着两个蓝底白字的悬浮按钮，鼠标上移时则呈现为棕底白字，这可不是用图片来实现的哟，这是正宗的CSS3效果哦，纯代码也可以构筑精彩的风景，这就是CSS3的魅力呀！主要的渐变效果background-image: linear-gradient让我特别喜欢，要是我可以把CSS3基本掌握了，写出一个纯代码的动感主题，那绝对是自己都觉得很舒服、很满足呀！

更多的精彩内容，欢迎关注碎碎念的后续介绍，多多挖掘，说不定哪个角落就能带给你寻觅许久的设计灵感哟！