主页的重新设计
最近在作www.xoboy.net主页的重新设计，其实一直都很想做一个比较特别的主页，但因为自己懒，也没有很好的创意，一直都把它丢空了。突然有这个想法，却来源于在国外网站看到了一个非常棒的CSS效果。由于工程比较浩大，业余的时间也不太够，因此进度一直比较缓慢。不过我自己也非常期待它的面世，就像自己的孩子:)
给点耐心自己吧……
| 打印文章 | 这篇文章由xoboy于2008-04-14 01:19发表在Design。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |
没有引用
设计师必用的网址
大约3周前 - 没有评论
1、设计在线（新闻绝对是业界最及时的） www.dolcn.com
2、视觉中国（新新设计师的代表性网站，有些杂，速度也不快） www.chinavisual.com
3、设计前沿（从事工业设计的同胞们必去） www.foreidea.com
4、设计师家园（建筑与室内设计师非去不可） www.china-designer.com
5、亚洲CI网（网站本身不怎么样，但是论坛非常不错，高手云集） www.asiaci.com
6、V6DP（论坛，年轻设计师的天下） www.v6dp.com
7、ad110.com（云集非常多大师作品以及他们的网站导航） www.ad110.com
8、Arting365（有些不错的独门信息及作品） www.arting365.com
9、台湾创意设计中心（了解台湾设计的必去站点） a www.ddc.com.cn
10、ad110.com（云集非常多大师作品以及他们的网站导航，2004年底成立） www.ad110.com
11、鲜创意（综合性网站，2005年初成立） www.xianidea.com
12、数字艺术（搜狐数码频道的分栏目，2005年初成立） digi.it.sohu.com
13、涂鸦王国（自由开方性质的网上涂鸦站点，2004年底成立） poobbs.com
14、中国美术家（非常全面，但是速度非常慢，2005年初成立） www.artist.org.cn
15、中国CG联盟（数字内容创作、电影电视制作，视觉娱乐设计，2004年底成立） www.chinavfx.net
16、火星时代动画网（不说了，看题目就知道，2004年成立） www.hxsd.com.cn
17、视觉同盟网（综合性网站，2004年成立） www.visionunion.com
18、中国广告协会（不说了，看题目就知道，2005年初成立） www.ad-e.cn
19、GAMERES（游戏开发资源网游戏开发技术主题站点，内容主要包括技术文档，专栏，作品演示，开发资源，属于游戏制作人的中文网络平台，2001年创立）www.gameres.com
设计师应该看得40个英文网站
http://www.designaddict.com/ 工业设计
http://www.dmi.org/dmi/html/index.htm 设计管理
http://www.ddc.dk/ 丹麦工业设计
http://www.designdiffusion.com/index-en.htm 设计资讯
http://design-milk.com/ 最新产品设计介绍
http://www.trendir.com/ 最新卫浴产品设计介绍
http://www.form.de 著名的设计杂志
http://www.moma.org/ 现代艺术中心
http://www.ottagono.com/default.asp 著名的设计杂志
http://www.madmuseum.org/ 艺术设计博物馆官方
http://www.vam.ac.uk/ 维多利亚和阿尔波特博物馆
http://www.wilsonart.com/design/statement/ 现代设计史方面的东东
http://www.alessi.com/ 阿莱西官方网站
http://www.artlebedev.com/ 通过网络走红的俄罗斯设计团体
http://www.carlliu.com 卡尔刘，内有大量工业设计草图
http://www.gordoninternational.com/directory.htm 家具设计史
http://special.lib.gla.ac.uk/teach/gothic/ 17，18世纪设计史
http://www.designmuseum.org/design 设计博物馆，设计史
http://www.museum.vic.gov.au/design/
http://www.danskdesign.nu/index.php/language/en 丹麦设计产品在线商店
http://www.design-emotion.com/ 设计与情感，设计交流
http://douglas.typepad.com/content/design/ 设计资讯
http://www.droogdesign.nl 荷兰的设计组织
http://www.forma.co.hu/shop/ 设计商店，图多
http://www.frogdesign.com/
http://new.idsa.org/index.htm 美国商业设计组织
http://www.design-technology.info/home.htm 设计与技术
http://www.karimrashidshop.com/ 著名的工业设计师
http://www.danish-furniture.com/links/ 丹麦家具设计
http://www.marcelwanders.com/ 当红设计明星
http://www.uusimuoto.fi/ 内容很丰富可惜不是英文的
http://www.panik-design.com/
http://www.carbodydesign.com/ 汽车设计
http://swissmiss.typepad.com/ 瑞士设计
http://www.tendancehightech.com/blog/en/ 高科技趋势
http://www.jidpo.or.jp/en/ 日本工业设计组织
http://www.ziba.com/ 设计公司
http://www.scandinaviandesign.com/ 斯堪的纳维亚设计
http://www.arcadata.com/index.jsp
常用设计元素的高级CSS技巧
大约1月前 - 没有评论
在帕兰印象看到的关于CSS技巧的收集文章，转载一下，给自己收藏学习之用！
1. CSS布局和用户界面技巧
当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面，有几乎无限的可能性。下面是一些更有趣的CSSCSS技巧。
The simplest way to horizontally and vertically center a DIV
本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码，但这个特殊方法仅使用一个 DIV 元素，并且简单得多。
New CSS Sticky Footer – 2009
一个棘手的完全跨浏览器兼容的页脚CSSCSS技巧，兼容 Google Chrome 浏览器，并且不需要空 DIV 辅助。
Simple Page Peel Effect with jQuery & CSS
此教程结合 jquery 和 CSS 创建网页剥离效果。大多数网站都使用 Flash 来实现这种效果。因此如果不热衷于 Flash 技巧，这会是一个不错的选择。
Equal height boxes with CSS
一个使用 CSS
三个有趣的CSS3网站
大约2月前 - 没有评论
看到了三个很有趣的网站，都是关于CSS3的，挺有意思，先留位，有空再研究~
http://knb.im/css3/
http://desandro.com/articles/opera-logo-css/
http://shdianji.com/danboard.html
最近在研究最新版的WP
大约2月前 - 没有评论
很久没有碰过WP了，因为一个网友而触发了自己重新关注WP的兴趣。现在已经发布了2-9-2版本了，据说3.0测试版都已经提供下载了，信息万变，更新的速度那个快啊~
新版本的管理界面比原来更人性化了（仅限于2.5版本与新版的比较），模板的功能也大大提高了，编辑起来更得心应手，即使你不太懂CSS，也能编辑出一个属于自己个性化的结构，看来我们这些略懂CSS的人也要退化了：）
CSS经典技巧十则
大约5月前 - 没有评论
在我一个同事的blog里面看到的，搜集过来了。
1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2. 同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
<p class=”text side”>…</p>
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
补充：对于一个ID，不能这样写<p id=”text side”>…</p>也不能这样写
3. CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如：
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box { width:
再谈IE的hack
大约6月前 - 没有评论
最近频频接触CSS，对不同浏览器的显示效果不同很纠结。现再收集一下关于IE的hack。
1. 区别FF和IE
1-1
首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子：
插入代码：
div{
background-color: red !important;
background-color: blue;
}
因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。
1-2
还有一种方法，就是IE浏览器可以识别“>”等一些符号，如“~”、“`”、“
插入代码：
div{
background-color: red;
>background-color: blue;
}
在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“>”，则应该得到的蓝色的背景，因此可以知道“>”只有IE可以识别。
这样，我们就可以把FF和IE的样式分离开。下面就是解决IE自己的问题了。
2. 区别IE5.5和IE的其他版本
看一个例子：
插入代码：
div{
>background-color: black;
>background-color /*IE5.5*/: green;
}
这个例子使用了“>”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。
到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。
3. 区别IE5与IE5.5+
插入代码：
div{
>background-color: red;
}
div/*IE5.5+*/{
>background-color: black;
}
这里我们又用到一个HACK，就是“div/**/{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。
4. 完整的Hack
这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：
插入代码：
div{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”，因为“div/**/{}”这个HACK在FF中可以识别。
#hackme{
/*style for all browser here*/
}
* html #hackme{
/*style for ie here*/
}
下面是一个ie6 png hack，用于内联css
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
IE7的hack
IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack
补充说明图片垂直居中的问题
大约6月前 - 没有评论
由于IE与Firefox对CSS的解释不同，往往让我们在对一个图片处于一个div内垂直居中的问题伤透脑筋。上一篇讲述到用top:50%的方法，现在再展开补充说明一下。
首先我们定义一个放置图片的容器
.box{width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC;}
为了更清楚看到效果，我定义了这个box的边框和背景色。
然后我们在这个容器内再多放置一个
.imgbox {display:table-cell; vertical-align:middle; text-align:center;}
由于IE不支持CSS2中的display:table和display:table-cell，而对于能解释这两个属性的浏览器来说，做到垂直局中到这里就已经足够了。因此我们要针对IE再下点功夫。对htm我们可以这样写：
<div class=”box”>
<div class=”imgbox”><p><img src=”图片的位置” /></p></div>
</div>
然后针对IE我们补充hack的内容：
.box {*position:relative;}
.imgbox {*width:100%;*position:absolute; *top:50%; *left:0;}
.imgbox p {*position: relative; *top:-50%; *margin:0; *padding:0;}
.imgbox img{ *margin-top:4px;}
对IE来说，用了绝对定位和相对定位，通过两次50%的偏移找到了图片所在div的中心，因此完整的CSS应该为：
.box { width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC; *position:relative;} /*这个层的长宽可以自定义*/
.imgbox { display:table-cell; vertical-align:middle; text-align:center; *width:100%; *position:absolute; *top:50%; *left:0;}
.imgbox p {*position: relative; *top:-50%; *margin:0; *padding:0;}
.imgbox img{ *margin-top:4px;}
大功告成！
几个CSS的技巧
大约7月前 - 没有评论
很多朋友在编写html的时候往往会被一些小问题所困扰，这里介绍几个小小的技巧。
1. 防止图片撑破div层
.div-img {margin: auto; width: 600px;}
.div-img img{max-width: 100%!important; height: auto!important; width:expression(this.width > 600 ? “600px” : this.width)!important;}
2. 让div的内容图片垂直居中（可兼容多浏览器）
.div-img {*position:absolute; top:50%;}
.div-img img {*position:relative; top:-50%; left:-50%;}
3. 让文字从右往左竖排写
.text { layout-flow: vertical-ideographic; height:400px; line-height:200%; }
简单而实用的CSS属性：min-height
大约7月前 - 没有评论
今天讲解一下一个简单而实用的CSS属性：min-height，它允许你指定元素的最小高度，在需要平衡布局时非常有用。看看下面的图解就一目了然了。
一般写法：
.with_minheight {
min-height: 550px;
}
但需要注意的是，IE6不支持min-height（又一个要杀死IE6的理由），但是有一个min-height hack的写法：
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}
以后在进行多栏式的布局时可以用这个属性控制美观度:coolsmile:
大约2年前
不错喔，你的新BLOG设计得
投入到国际性的BLOG程序当中去吧。