<![CDATA[雨风小站]]> http://www.56ui.com/blog/ zh-cn PBlog2 v2.4 雨风小站 http://www.56ui.com/blog/images/logos.gif http://www.56ui.com/blog/ 雨风小站 http://www.56ui.com/blog/default.asp?id=635 <![CDATA[水平居中和垂直居中的多种CSS实现方法]]> 99027074@163.com(雨风) Fri,05 Feb 2010 17:10:11 +0800 http://www.56ui.com/blog/default.asp?id=635
vertical-align是个不错的属性，但是这个属性起初是针对表格的cell的。当然这个属性虽然对块级元素不起作用，但是对行内元素比如span还是有作用的（这时候，这个属性设置为负值元素内容就下移，正值则上移）。

下面是比较专业的垂直居中的集中解决方案。记录于此，以便查阅。

1、单行垂直居中

文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
程序代码 程序代码
<div style="line-height:500px;height:500;">


2、层水平居中

设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。
程序代码 程序代码
#parentdiv
{
  width: 500px;
}
#childdiv {
  width: 200px;
  margin:0 auto;
}


3、层中的文字水平居中

在childdiv的css加上text-align:center;
程序代码 程序代码
#parentdiv
{
  width: 500px;
}
#childdiv {
  width: 200px;
  margin:0 auto;
  text-align:center;
}


4、div层垂直居中
程序代码 程序代码
<div style="width:275px;height:375px;border: solid red;">
  <div style="background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
    <div style="background:red;position:static;position:absolute\9; top: 50%;">
      <div style="background:blue;position: relative; top: -50%;">
       book.chinaz.com
      </div>
    </div>
  </div>
</div>


5、div层垂直水平居中，英文超长换行
程序代码 程序代码
<div style="float:left;width:275px;height:375px;border: solid red;">
  <div style="height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
    <div style="position:static;position:absolute\9; top: 50%;">
      <div style="position: relative; top: -50%; text-align: center;">
        <div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">
          book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
        </div>
      </div>
    </div>
  </div>
</div>


6、div垂直滚动
程序代码 程序代码
<div style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">
  book.chinaz.com
</div>


7、垂直居中和使用text-align水平居中
程序代码 程序代码
<div style="float:left;width:275px;height:375px;border: solid red;">
  <div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
    <div style="position:static;position:absolute\9;top: 50%;">
      <div style="position: relative; top: -50%; text-align:center;">
        <div style="width: 275px;">
          <div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">
            book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


8、垂直居中和使用margin水平居中
程序代码 程序代码
<div style="float:left;width:275px;height:375px;border: solid red;">
  <div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
    <div style="position:static;position:absolute\9; top: 50%;">
      <div style="position: relative; top: -50%; ">
        <div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">
          book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
        </div>
      </div>
    </div>
  </div>
</div>
]]> http://www.56ui.com/blog/default.asp?id=634 <![CDATA[专业的水处理行业公司的企业网站设计]]> 99027074@163.com(雨风) Wed,27 Jan 2010 21:57:03 +0800 http://www.56ui.com/blog/default.asp?id=634 帮一个水处理的公司设计的企业网站，主要是一个展示和体现公司形象，还有就是清楚的介绍他们的服务项目和服务介绍。。。。。。。。不多说了，看看设计的网站页子
专业的水处理行业公司的企业网站设计——首页设计


专业的水处理行业公司的企业网站设计——内页设计

]]> http://www.56ui.com/blog/default.asp?id=633 <![CDATA[2010-2012年间梦工厂的七部动画新片计划]]> 99027074@163.com(雨风) Sun,10 Jan 2010 00:02:24 +0800 http://www.56ui.com/blog/default.asp?id=633


2010年3月26日：《驯龙记》（How to train your dragon):

根据同名小说改编，讲述维京海盗首领之子Hiccup Horrendous Haddock 三世的故事。Hiccup面临一个巨大的问题：就是如何达到自己伟大父亲的期望，成为合格的海盗首领。为此，他必须通过所有维京海盗的考验：捉住一条强大的龙，将它驯服。不幸的是我们的主人公Hiccup捉住的是一条弱小的龙，甚至连牙齿都没有。在这样的情况下，他还能否完成使命，成为新的英雄呢？本片由《星际宝贝》导演Chris Sanders指导。

2010年5月21日：《怪物史莱克4》（Shrek Forever After，原名Shrek Goes Fourth）

由Mike Mitchell（迪士尼真人电影《超人高校》导演）指导。 史莱克系列最新续集。

2010年11月5日：《智者》（原名叫Mastermind，现在叫Oobermind)
梦工厂动画在这部作品中拿传统超级英雄电影开涮。讲述了一个坏蛋（小罗伯特唐尼配音）在无意杀死了英雄后发现"坏蛋生活"是多么无聊的故事。 本斯蒂勒和蒂娜菲也参与了本片配音。

2011年6月3日：《功夫熊猫2》（Kung Fu Panda:The Kaboom of Doom)

大家期待已久的"功夫熊猫"续集。本集导演将大换血，改用女将Jenifer Yuh Nelson指导，此人曾长期在梦工厂动画部的故事部门工作，这是她第一次担任导演。

2011年11月4日：《守护者》（The Guardians）

根据Wlliam Joyce即将出版的系列丛书改变，William之前的作品《与罗宾逊的一天》曾在2007年被迪士尼动画部改编为3维动画《未来小子》。本片将是一部以著名童话角色为主角的现代童话（梦工厂现代恶搞风格再现？），讲述了圣诞老人，牙仙，复活节兔等著名角色联合起来对抗一个可怕的妖怪坏人的故事，当然在片中这些角色将会被改名。梦工厂动画特效师，动画师Jeff Lynch将指导该片，这也是其第一次担任导演。

2012年3月20日：《靴猫》（Puss in Boots）
传闻已久的《怪物史莱克》中经典角色靴猫的外传终于要来了，事实上它的制作班底也和《怪物史莱克》脱不了关系。《怪物史莱克3》的导演Chris Smith将指导这部影片。

2012年5月27日：《马达加斯加3》（Madagascar 3）

"马达加斯加"系列最新续集，本集讲述4位主角随着"马戏团"周游欧洲的故事。《马达加斯加》和《马达加斯加2》导演Eric Darnell将继续指导该片。

除了以上新片外，梦工厂还将从《克鲁德》（The Croods，就是原来的Crood Awakening），《运输家》（Truckers，根据著名小说改编，本站之前有所报道）和《超级秘密鬼魂》（讲述鬼混如何看待人类的故事，梦工厂的 "怪物公司"？）3个项目中选择1个在2012年11月12日上映。 ]]> http://www.56ui.com/blog/default.asp?id=632 <![CDATA[移动云计算将成互联网主流]]> 99027074@163.com(雨风) Wed,06 Jan 2010 10:20:46 +0800 http://www.56ui.com/blog/default.asp?id=632
　　不仅如此，看手机浏览器、输入法、阅读器等客户端软件的竞争，更可感受到无线互联网的热度。即使是岁末政府加强了对WAP的监管，很多WAP站点被关闭，仍然抵不住众人的期待和热情，无线互联网还是在快车道上，一路狂奔。

　　2009年也是云计算在中国普及的一年，虽然大部分终端用户对“云计算”这个词还是云雾之中，但在业内，谷歌、亚马逊、IBM等IT公司推出的云计算平台，由于拥有开放的技术接口、分布式的计算理念，超强而又灵活的处理能力，已经赢得了中国IT业内人士的认同。我们看到，阿里巴巴宣布成立子公司“阿里云”，专注于云计算领域的研究和研发；搜狐推出搜狗云输入法；中国移动启动“大云”项目；中国电信推出“e云”服务；中国联通IDC开始“互联云”项目；甚至一些地方政府也启动“云计算”项目。

　　移动互联网与云计算合在一起就是“移动云计算”，可以称之为移动互联网中的云计算。但虽然“移动互联网”和“云计算”都是大红人，可“移动云计算”在中国却还不大为人提及。在全球范围，由于2009年7月ABI Research的一份关于移动云计算的研究报告，引起了投资界以及业内人士的高度关注。可以预见，移动云计算在中国也将被关注起来。

　　移动云计算与云计算的区分在哪里？是否是云计算在移动互联网的延伸？回答这些问题，我们要看两者各自的特点。移动互联网一般定义，是指在手持设备上通过无线的方式访问互联网。手持设备的特点决定了移动互联网与互联网的不同，也决定了移动云计算与云计算的不同。手持设备一般是个性化的（从外形设计到操作系统内核），CPU处理能力与PC比是极其有限的，存储空间与PC比是很小的，键盘与屏幕是受限制的，电池以及带宽不是没有限量的。云计算的一大优势是由“云端”（通俗的说是互联网上的一组服务器）来提供强大的存储和计算能力。存储和计算能力正好是手持设备的不足之处，毫无疑问，移动互联网更需要云计算。

　　但除储存以及计算能力外，移动云计算更是解决手持设备个性化的一大利器。目前在手持设备上，流行的操作系统就有Windows Mobile, Windows CE, Symbian S60, Linux，iPhone, Android。在Feature Phone上一般只能运行K-Java程序。在这些系统上，还有各种版本。不仅如此，很多厂家还做了一些定制。可以说操作系统上，手持设备还处于春秋战国时代。要在手持设备上开发一种应用，如果想覆盖一定比例的手机，相当大的工作量将花在代码移植和测试上。因此要能够快速开发，必须把应用软件做成“薄”的或者极其简单的客户端。简单的客户端就意味着大量的数据处理要放在“云端”进行，技术架构的设计一定要按照云计算的模式实现。同时，用户界面的设计要充分利用平台本身提供的接口，否则UI的移植也将消耗你大量的精力。因此，大多数移动云计算的应用是通过浏览器实现的，也有相当一部分是通过各种Widget实现的。我们也不难断言，通过语音以及其他各种传感技术进行的人机交互将逐渐普及起来，而背后的技术支撑也一定是移动云计算。

　　手持设备的电池和上网流量的消耗往往也成为一个技术门槛。如果一个应用要消耗大量的电池和流量，这个应用是很难在手持设备上推广的。要解决手持设备的电池和流量的消耗问题，移动云计算又将是一大法宝。通过对“云端”的优化，减少手持设备与“云端”数据交换的频率与数据量，将有效的降低电池与流量的消耗。对于各类实时消息或提醒服务，推送技术也至关重要，在PC上流行的轮询技术无法移植到手持设备。而实现好的推送技术，移动云计算也仍将是一大利器。可以预见，借助于移动云计算，通过其开放的技术接口，专注于推送服务的平台提供商一定会出现，而且将获得相当的成功。

　　由于在手持设备上开发的难度，不是所有的IT公司都能一下进入无线互联网的行业，但是他们又迫切希望将互联网上部分或全部服务延伸到无限互联网。在这种背景下，一些平台服务提供商一定会出现而且将有很好的前景。比如消息交互、支付、阅读、邮件推送、游戏、SNS等等。这些平台服务提供公司将对外提供标准的技术接口，让第三方公司能自由的使用，这体现出了云计算的魅力。利用云计算，每家公司都能专注于自己的领域，做精做强，做好食物链上的一个环节，而不是去打造整个生态系统。

　　借助于移动云计算，Google的手机导航系统，手机语音搜索系统以及Android平台上的各种服务的表现已经让人赞叹不已。值得一提的是Motorola于2009年10月推出的MotoBlur服务，也是移动云计算的典范。MotoBlur将传统的SMS与gmail, twitter、myspace, facebook溶为一体，在一小小的屏幕上，用户可以通过MotoBlur时刻与外界轻松联系起来。

　　在国内，移动云计算的典范是UCWEB与和信。撇开很多其他用户体验，使用UCWEB的用户都能感受到上网速度快，流量消耗的小，这好的背后是UCWEB采用了一流的网页转换技术，将一普通网页进行处理后才下发到手机的。而网页转换的速度以及数据压缩的比例完全归功于UCWEB的云计算平台。和信是一款基于无线互联网的提供实时消息服务的软件。利用移动云计算技术，在将电池与带宽的消耗降到最低的情况下，和信还能保证消息推送的实时性。比如和信抓客服务，网页上任何选中的文字或图片，点右键就即刻下载到手机或发送给朋友，令人惊叹。而且和信用是一相对较小的客户端软件，提供了推客、快邮、魔信、管家、抓客等众多的功能，将手机与互联网融合起来，这一切归功于和信从设计之日起，就采用了移动云计算模式。

　　2009年中国各大运营商获得3G牌照，是中国的3G元年，标志着移动互联网在中国的发展进入了快车道，其重要的技术“移动云计算”也必将流行起来。利用移动云计算的各种无线互联网的服务也将深入到人们的生活当中，人们对无线互联网各类服务的大量使用，又将反过来推动技术的发展。“移动云计算”不仅会流行起来，而且将在各种挑战下而不断的发展，而这正是我们的机遇所在。]]> http://www.56ui.com/blog/default.asp?id=631 <![CDATA[DIV清除浮动新说]]> 99027074@163.com(雨风) Sun,03 Jan 2010 20:12:21 +0800 http://www.56ui.com/blog/default.asp?id=631 起源：
程序代码 程序代码

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

说明：
*对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
*第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则：
* height:1% 用来触发 IE6 下的haslayout。
*重新对 IE/Mac 外的IE应用 block 显示属性。
*最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近标准的路上，这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后，新的清除浮动方法：
程序代码 程序代码

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

说明：
IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成：
程序代码 程序代码

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}


以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。

我平时都是用 overflow:hidden 来清除浮动的，因为够简单粗暴。但是 overflow 有时候也不太适用：

父级元素使用 overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。

对 css3 来说，也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。


其他可能被影响的元素如 text-shadow 和 transform。可以参考 Andy Ford 的 demo

对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。
程序代码 程序代码

.group:after,
#content:after,
#sidebar:after,
#some .other .thing:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}

这种情况下，html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了，css 代码却出现了一定的繁冗。而且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。

归结下来，还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，但是现在更倾向于使用 clearfix，感觉这种一体化的东西更靠谱，能避免偶尔对 zoom 的遗忘。

成熟的东西稳定性好，但是会比较复杂、厚重;简单的灵活性好，但是过于零散、随意，没有组织性，还没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题本身还让人头疼.

我个人的想法是没有好与坏的区别，只有合适不合适的区别。但是我们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。经常可见对一些工具的讨论，都是奔着争出个谁好谁坏而去的，例如 jQuery mootools YUI.相比起到底是好谁坏，我们还是最好赶紧转变思想，摒弃”一刀切”的思想吧。

最后，关于为什么要采用一下这种复杂方式来针对IE6/7，而不采用其他稍微简洁的方式，还希望大家给我指点下迷津。
程序代码 程序代码

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
]]> http://www.56ui.com/blog/default.asp?id=630 <![CDATA[“东方之冠”的45分钟展示体验方案 "水"元素纵贯中华智慧]]> 99027074@163.com(雨风) Sun,23 Aug 2009 00:47:22 +0800 http://www.56ui.com/blog/default.asp?id=630
“中华智慧”的45分钟体验

被喻为“东方之冠”的中国国家馆是一个倒斗形，而内部的展示区域主要分为3层，分别位于49米、41米和33米，整体展览面积约为15000平方米，游客如果全程参观大概需要45分钟的时间。

展示总设计师潘公凯透露说，参观者最先到达的是49米的顶层，这里的展览面积达到了8500平方米。“发展”和时空转换是这一层的关键词和特色。展厅的中间将设有一个超常规的多媒体剧院，让观众首先感受到当代城市化进程的巨大规模和宏伟气魄，并且展示在这个史无前例的中国城市化进程中中国人的建设热情和对于未来的信念。

从电影院出来，参观者开始回溯历史，展厅的北面墙壁上一幅放大了数百倍的《清明上河图》将展示一千多年前世界上最大城市汴京的繁华与生机。而在展厅的西面，历史转入现代，设计团队用意象化的绿色植物建构出一个梦幻的绿色环境，其中还穿插新老城市人在同一屋檐下和谐相处的影像装置，以体现未来中国城乡一体的理念。

随后，观众来到41米层的体验展区，参观者在这里将坐着轨道车游览，享受10分钟的轻松之旅，沿途观众可以看到中国城市营建的智慧，如木结构建筑、石桥、斗拱、砖瓦、园林，富有诗情画意的展示，让人心旷神怡。

最后一站是33米层的功能展区———《绽放的城市》，基调为白色，设计简洁、高雅、充满现代感。设计师利用内装修的流线型造型和光影变幻来营造一个充满未来感的舒展的空间，重点展示中国人如何通过生活的智慧面向未来城市化挑战，为实现全球可持续发展提交一份“中国式的回答”。

“中国元素”不等同于传统元素

中国馆的展示内容定位为“东方的寻觅———城市发展中的中华智慧”，而展示设计的内容离不开对中国元素的挖掘。

“水”将是贯穿整个中国国家馆的重要元素，体现中华智慧的特点，人类逐水而居，城市依水而建，“水”为人类带来动力与重要交通渠道。人与人之间、人与环境，城市发展与自然环境的和谐，借助“流淌”在3个层面的“水”得以充分展现。

在场馆中间层的“骑乘”区域，中国城市营建的特色透露出浓浓的中国味道。石桥、斗拱、砖瓦等中国首创的建筑技术营造出一种半抽象的诗意梦幻舞台效果。让观众能够在获得最大审美享受的同时，也能体会到关于古代建筑的智慧。

潘公凯表示，中国元素并不等同于传统元素，在展示未来的时候，将展现中国在节能降耗、资源循环利用和社会和谐方面的经验和展望。

“镇馆之宝”等三大“谜团”有待揭晓

尽管中国国家馆展示设计方案已经浮出水面，不过仍有三大“谜团”尚未揭晓。

中国馆届时会迎来哪些“镇馆之宝”？这是许多观众关注的焦点。据了解，一幅放大了数百倍的《清明上河图》将出现在中国馆的顶层，不过这幅画的真迹届时会否出现还是一个未知数。此外，场馆内还将通过一些重要的文物展现“四大发明”

对于中国城市生活和发展的影响。究竟有哪些“宝贝”文物将展露真容让我们拭目以待。

“骑乘”设计无疑是中国馆有待揭晓的第二大“谜团”。场馆内的中间层铺设了专门的轨道，为观众提供设计了一场活泼生动、充满魔幻色彩的“智慧之旅”，“骑乘”里具体有哪些环节，讲了哪些故事，这还需要观众到现场去体验。

展馆顶层多媒体剧院中放映的影片则是又一个“谜团”。导演陆川透露说，这个多媒体剧院将采用超常规设计，影片也将用最新的后期处理技术，呈现的不完全是现实生活中可见的影像。这部影片时间在8分钟左右，将会用诗意的风格展现改革开放30年来中国的城市化建设。]]> http://www.56ui.com/blog/default.asp?id=629 <![CDATA[诺基亚精心打造Maemo 5界面曝光]]> 99027074@163.com(雨风) Sun,23 Aug 2009 00:21:39 +0800 http://www.56ui.com/blog/default.asp?id=629

诺基亚Maemo 5界面曝光

这款Maemo 5可是诺基亚公司的大作，甚至一度有这么一个传言，那就是Maemo 5将取代现在的S60成为诺基亚智能手机的操作平台。尽管现在这个传言已经被澄清，但还是从侧面显示出了这款手机平台的强大功能与重要程度。



虚拟键盘界面曝光
]]> http://www.56ui.com/blog/default.asp?id=628 <![CDATA[web2.0真人视频互动交友社区平台游戏专区页面]]> 99027074@163.com(雨风) Thu,06 Aug 2009 15:43:28 +0800 http://www.56ui.com/blog/default.asp?id=628
web2.0真人视频娱乐平台还提供了众多时尚娱乐服务，如视频休闲游戏就是其中之一，这种face to face进行互动游戏的独特魅力，就将实现全新的真人视频互动游戏，完全打破传统休闲游戏格局；

web2.0真人视频互动交友社区平台————游戏专区页面：

]]> http://www.56ui.com/blog/default.asp?id=627 <![CDATA[web2.0真人视频互动交友社区平台官方网站设计]]> 99027074@163.com(雨风) Thu,06 Aug 2009 15:24:24 +0800 http://www.56ui.com/blog/default.asp?id=627
web2.0真人互动交友平台，多人视频聊天、视频游戏、群组等互动交友服务；风格各异的真实白领美女主持人，与你互动交流，排遣寂寞。
即时互动视频服务领域的新型网络产品，满足了现如今热衷视频聊天室的群居一族，越来越钟情于搜罗该平台的各类真人交友信息，网罗了虚拟网络世界里的非虚拟真人视频互动体验。

真人视频互动交友社区平台官方网站————首页设计：


真人视频互动交友社区平台官方网站————套餐购买页面设计：
]]> http://www.56ui.com/blog/default.asp?id=626 <![CDATA[网页背景设计制作六大技巧攻略介绍]]> 99027074@163.com(雨风) Wed,05 Aug 2009 17:33:08 +0800 http://www.56ui.com/blog/default.asp?id=626 1.颜色背景  

　　颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。在网页文件中，一般通过＜body＞标签来指定页面的颜色背景，其HTML语法为：  

　　＜body bgcolor="color"＞  

　　其中的"color"表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有直接用颜色的英文名称，如blue、yellow、black等等，还可以用颜色的十六进制表示方法，如#0000FF、#FFFF00、#000000等等，此外还可以用百分比值法和整数法，其效果都是一样的。  

　　颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。  

2.沙纹背景  

　　沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统称为沙纹背景。  

　　初学主页制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。  

　　读者到现在恐怕都已经知道了沙纹背景的原理和实现方法，就是找一个小的图片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。其实现的HTML语法如下：  

　　＜body background="picture"＞  

　　其中的"picture"表示背景图片的URL路径。  

3.条状背景  

　　条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看是重复排列的，而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。  

　　以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。也通过  
　　＜body background="picture"＞  

　　将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。  

4.照片背景  

　　把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢？只有想不到的，没有做不到的，这里我们用上一点简单的CSS。在网页文件的＜head＞……＜/head＞之间加入下面的CSS语句:  

　　＜style type="text/css"＞＜!--body{background-image:url(myphoto.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:50% 50%}--＞＜/style＞  

　　这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整"background-position"的值就可以了。　　

5.复合背景

　　如果你在练习上面的“照片背景”时“不小心”也设置了＜body＞标签里的颜色背景，那么你看到了什么？颜色背景还起作用吗？对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法，就不用我再多说了吧！  

6.局部背景  

　　前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容设置属于它自己的背景呢？回答是肯定的。  

　　最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。请看下面这个表格例子：  

＜table border="1" width="240" height="101" bgcolor="#C0C0C0"＞  
＜tr＞  
＜td width="80" height="46" bgcolor="#00FFFF"＞＜/td＞  
＜td width="80" height="46"＞＜/td＞＜td width="80" height="46" bgcolor="#00FF00"＞＜/td＞  
＜/tr＞  
＜tr＞  
＜td width="80" height="47" bgcolor="#FFFF00"＞＜/td＞  
＜td width="80" height="47" bgcolor="#FF0000"＞＜/td＞  
＜td width="80" height="47" bgcolor="#FF00FF"＞＜/td＞  
＜/tr＞  
＜/table＞  

　　在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。  

　　除此之外，我们还可以单独为某个文字段落设置背景，甚至为这个文字段落中的某几个文字设置自己的背景，是不是有点相当不错，这也需要用上一些CSS。请先看一下下面的这个例子：  

　　＜HTML＞＜HEAD＞＜TITLE＞不仅仅是页面的背景＜/TITLE＞＜STYLE TYPE="text/css"＞＜!--BODY{BACKGROUND:#FFFFDD;COLOR:red}div{BACKGROUND:red;COLOR:white}--＞＜/STYLE＞＜/HEAD＞＜BODY＞＜P STYLE="BACKGROUND:black url(../images/bg.jpg);COLOR:black}"＞  

　　记得毛主席有这么一首诗："＜div＞坐地日行八万里，巡于遥看一千河。＜/div＞"伟人就是了不起，……几万里就出去了。＜/P＞＜/BODY＞＜/HTML＞  

　　在浏览器中的显示效果如图所示，现在是不是有点兴奋了，啊，原来文段也可以有自己的背景。只要你愿意，你就可以为页面的任何一个部分定义自己的背景，从而把页面打扮得更加漂亮和吸引人。  ]]>