乐趣参与 » Web Design

Happy New Year! 2010

leplay — Fri, 25 Dec 2009 08:08:43 +0000

新年还早，其实我要说的只是下面这张图片。

这是我刚刚根据这个教程做出来的图，并且可以作为壁纸，如果你也感兴趣，那就去试试吧。

祝大家圣诞快乐。稍后再写下今年的总结吧。

焰火效果图片

leplay — Sun, 13 Dec 2009 08:18:24 +0000

这是我昨天做的一张图，如果没有对比，我想还算不错的。可是当我告诉你，我本打算按照这篇教程来做的，你是不是失望不少呢?

CSS打造简洁的导航栏

leplay — Sun, 15 Nov 2009 12:37:32 +0000

其实要考虑的问题只有两个：一个是两个栏目直接的间隔线，另一个是鼠标放到栏目上时背景颜色的变化。
我们一个一个来解决。

间隔线其实是由一条颜色为#DDD和一条颜色为#FFF的边框组成，可以由border-left 或者 border-right实现。

.leftborder{ background:#EEE;border-left:1px solid #FFF;}
.rightborder{ background:#EEE; border-right:1px solid #DDD;}

这是所有浏览器都能实现的方法。但如果你用的是Firefox浏览器，那么还有更简单的方法。因为Firefox支持border-colors(详见CSS3.0参考手册),所以你可以直接把两种颜色同时加到一个边框里。代码如下。

.ffrightborder{ -moz-border-right-colors:#FFF #DDD; border-right-width:2px; border-right-style:solid;}

这样就搞定了第一个问题。然后给出第二个问题的代码，我负责解释。

ul{position:relative; clear:both; padding-top:20px;}
ul li{ width:100px;  float:left; list-style:none; text-align:center;}
ul li a,ul li a:visited{position:relative; display:block; text-decoration:none; color:#005A9C;}
ul li a:hover{display:block; background: #FAFAFA; margin:0 auto; width:100%; color:#424242;}

应该都很好理解，重点在于 “display:block;”，这个属性让整个

区域的背景都改变的关键，否则只是文字的背景发生变化。

好吧，给出Demo你自己看看就知道了：http://leqcany.com/demo/nav.html

PS: 在Firefox下可看到两个导航栏具有同样的效果。

改版之后的W3C

leplay — Sat, 14 Nov 2009 08:30:41 +0000

不知道W3C什么时候改版的，只是今天逛到那就发现变样鸟～看图：

看过后发现，原来组织性质的网站也能这么漂亮。

然后我又有了一点儿疑问，那些设计牛逼的网站（如Apple,Twitter等）的效果实现起来似乎也不是很难，就像上面W3C的那个网站一样。可是为什么我们做设计时候总是想不出来这种style呢？或许我们都被background-color和boder-width之类的束缚住了。至少我是这样。你说呢？

博客大变样

leplay — Thu, 21 May 2009 11:40:30 +0000

友情提示：如果你是在阅读器中看到这句话，那么我建议你还是爬出来继续看吧。: )

最近几天说闲不闲，说忙不忙。在面对那几个变态的老师之余，我还为我的博客做了一番大改变。

给个图先：

然后再细说说都有哪些改变：

把博客的后台改为英文版。这个不是装×，而是在使用非中文主题时，wordpress 总会主动将部分单词译为汉语，结果把博客弄的中不中、洋不洋的。索性就将wordpress改为英文版了。
不过这一个过程可麻烦死我了。我将服务器上所有文件都删除之后，又把英文版的wordpress传上去，然后还得导入以前的文章和评论……
最明显的变动就是，将主题改为 Portfolio Press 。以前用的主题是 iNove 1.0.5 ，作者是 mg12 ，其实那个主题很不错，很多细节处理的很好。只不过这个主题过于流行，现在遍地都是，总感觉有些不舒服。所以就……
精简了插件。从备份的文件来看，以前博客用到的用不到的插件居然有20几个。现在精简了，只留下不能不用的。其余都pass掉。暂时用的插件只有5个：Akismet / Clean Archives Reloaded / Dean’s FCKEditor For Wordpress / Ozh’ Better Feed / Wordpress Thread Comment 。
增加了 twitter 页面。本来打算用 thread twitter 这个插件来做，但用起来麻烦些，暂时先用这个 Flash widget 代替一下。
好像没啥了。

给网站设计公司的建议

leplay — Wed, 08 Apr 2009 12:59:29 +0000

(via)

前一段时间在网上闲逛，顺着某小吃网站底部的链接，来到了一家本市的网站制作公司。可是发现这家给别人做网站的公司网站在样式上却有些问题。由于爱管闲事，所以就给这个网站写了封信，提出了几点我业余的建议（客套话省略）：

贵站的首页在Firefox 浏览器下居左显示，而非居中显示。设计时或许应该多考虑一下非 IE 用户的体验。 // 将body的 margin 属性设为 "auto" 即可解决在 Firefox 下不居中显示的问题。
贵站的风格好像不一致。首页的背景是蓝色，而投票页的背景却是白色的，大事年纪又是另一样了。 //有些网站改版很多次，但改版并不彻底，所以残留着各种不同的样式。
进入首页时，影片栏目自动播放或许不那么和谐。并且下面的字母所代表的意思对于大多数人不好理解，不如改成按钮样式的。 // 网页自动播放音频或视频的习惯不好（除非你是干这个的），尤其是首页。该网站播放器下面的字母有V/S/F/P,谁能理解这是什么意思？
贵站的应该为自己建立一个 favicon ，毕竟自己是一家设计公司。
贵站的 title 太长，简洁一些或许更好，其余的在keywords 下设置。 //该网站的title是这样的“网络公司，吉林市网站制作,吉林市网页设计,吉林市网站建设, 吉林市百航网络科技有限公司吉林市网站推广,吉林网站建设,吉林网站制作,吉林网站推广，吉林市网站优化，吉林市SEO”。
贵站的首页有些部分显得有些拥挤。可以考虑将首页加宽一些（如960px），现在的显示器的分辨率都比较高了。
在为客户制作完成网站后，最好帮助客户进行一下简单的SEO ，或许几个 keywords 就会帮助其在搜索引擎中获得更好的排名。//这个只是随手的事儿。

当然，这家公司给予了礼节性的回复：

谢谢您的宝贵意见！希望经常保持联系！

但不知道它具体听取了几点。

PS : 黑色字体为原邮件内容，蓝色字体为个人评论。

校内模板——不要在校内浪费太多时间

leplay — Wed, 04 Mar 2009 03:52:29 +0000

预览

名称：Waste-time

主题：不要在校内浪费太多时间！

代码：
body {
    margin:10px auto;
    color: #3C3940;
    font:13px , "Comic Sans MS", "Trebuchet MS", verdana, sans-serif;
    background: #1A1B1F url(‘http://xiaopback.cn/images/wastebg.gif’) fixed no-repeat top left;
}
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */
.profile .profile-panel{ background:url() no-repeat 50% 0;border-bottom:none;}
.betabar { opacity:0.0; }
.menu-bar { opacity:0.0; }

.left-column{ margin:0 auto; background-color: #FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}
.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}
.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}
#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

使用方法：你比我清楚。

使用代价：原则上免费，但你要是非要请我吃饭或者棒棒糖的话，我是不会拒绝的。

另三款 Twitter 风格校内模板

ZhouGe — Tue, 20 Jan 2009 17:24:48 +0000

昨天凌晨，ZhouGe 发布了自己的第一款校内模板 “Twitter Theme 4”，今天同样按照 Twitter 所提供的样式，做成了另外三个校内模板—— Twitter Theme 1 、Twitter Theme 9 、Twitter Theme 10 。

一、 Twitter Theme 1.

Twitter Theme 1代码：

body { background: #9ae4e8 url(http://assets2.twitter.com/images/bg.gif) fixed no-repeat top left; padding-top:0px;}
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */

.profile .profile-panel{background:url() no-repeat 50% 0;border-bottom:none;padding-top:100px;}
.left-column{ margin:0 auto; background-color:#FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}
.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}
.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}
#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

二、Twitter Theme 9.

Twitter Theme 9 代码：

body {

color: #666666;

background-color: #1A1B1F;

background: #1A1B1F url(‘http://static.twitter.com//images/themes/theme9/bg.gif’) fixed no-repeat top left; }

a:link {color: #2FC2EF; text-decoration:none;}

a:visited {color: #2FC2EF;text-decoration:none;}

a:hover {color: #bc2931; text-decoration: underline;}

a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */

.profile .profile-panel{background:url() no-repeat 50% 0;border-bottom:none;padding-top:150px;}

.left-column{ margin:0 auto; background-color:#FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}

.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}

.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}

#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

三、 Twitter Theme 10 .

Twitter Theme 10 代码：

body {
color: #3D1957;
background-color: #642D8B;
background: #642D8B url(‘http://static.twitter.com//images/themes/theme10/bg.gif’) fixed repeat top left;
}
a:link {color:#1f3a87; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */

四、要说的.

关于这三款模板要说的都和第一款（Twitter Theme 1）一样，使用方法也相同。

一款 Twitter 风格的校内模板

ZhouGe — Tue, 20 Jan 2009 11:46:27 +0000

话说，ZhouGe 在公元2009年1月20日，凌晨2:58分完成了自己的第一款校内模板—— Twitter Theme 4。

你可以到我的个人主页上查看该模板的效果(如果看不到，说明你将其他人的涂鸦板屏蔽了，可在编辑涂鸦板里设置)。下图为被校内压缩的效果图：

关于这款模板，要说明的几个问题：

该模板的创作灵感来源于 Twitter 的 Theme 4 主题，所以我将这款模板命名为“Twitter theme 4”。
该模板背景设置为固定。
该模板采用了圆角样式，看起来更和谐（但在IE下可能显示不出来）。
该模板只采用了一张23K的背景图片，原则上不会耗费太多打开个人主页的时间。
盖模板的背景图片盗链于 Twiiter ，在这里道歉一下，嘿嘿。
这是本人的第一款校内模板，没有深入到细微之处。
这个模板真的是我原创的，虽然我不知道该怎么证明， ^^ 。

如果你觉得这款模板还凑合，或者仅仅是给我面子，你可以按照下面的方法使用：

校内模板其实就是一堆 CSS 代码，你在 CSS 中设置好的样式会根据正文的 DIV 位置相应的显示。我的这款模板的CSS代码是：

body {
    margin:0px auto;
    color: #3C3940;
    background-color: #0099B9;
    background: #0099B9 url(‘http://static.twitter.com//images/themes/theme4/bg.gif’) fixed no-repeat top left;
}
a:link {color: ; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */

.profile .profile-panel{background:url() no-repeat 50% 0;border-bottom:none;padding-top:150px;}
.left-column{ margin:0 auto; background-color:#FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}
.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}
.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}
#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

你选择个人主页右上角的在这里修改新版涂鸦板的CSS栏中，将这堆代码复制粘贴过去就可以使用了。

如果你认为这款模板有不足之处，我会进行相应的修改。

任何人均可免费使用此模板，只要在下面留言告诉我一声就可以，ZhouGe 不会收取任何费用，但如果你非要请我吃饭，或者请我吃棒棒糖以表谢意的话，我还是十分愿意接受的，哈哈~。

『乐趣参与』发布“我”系列壁纸

ZhouGe — Mon, 05 Jan 2009 04:45:17 +0000

突然觉得壁纸的颜色有点过于鲜艳，所以萌发了自己创作壁纸的冲动。

于是乎，用了不到5分钟制作完成了下面的两个简单的壁纸。看图：

1. 下载me_01 。 2. 下载 me_02 。

后来觉得意犹未尽，又按照思路创作了另外两个。接着看图：

3. 下载 me_03 。 4. 下载 me_04 。

嗯，暂时就这些，感觉怎么样？

算上之前的黑屏壁纸，这算是我的第2-5个壁纸作品。由于我是按照我的电脑制作的，所以最佳分辨率是1280*1024 。如果你需要更大的分辨率可以在下面留言，写下你所需要的壁纸大小，我会尽量满足你的需要。