http://blog.china.com:80/u/070905/75121/ 我是一只飞翔的兔，谁说兔子不会飞翔？只要你想，没有不会成功的事！ 飞翔的兔 飞翔的兔 http://blog.china.com:80/u/070905/75121/200801/1656098.html <![CDATA[ <DIV> <P>据国外媒体报道，研究人员揭开了吃大蒜为什么能保持心脏健康的秘密。秘密的关键在于蒜素，它被分解成为刺鼻而有害健康的硫磺化合物。</P> <P>这些化合物与红血球反应，生成硫化氢气体，硫化氢可舒缓血管，让血流更畅通。伯明翰阿拉巴马大学的这项研究发表在《美国国家科学院会刊》上。但是，英国专家警告说，服用蒜素补品可能会有副作用。硫化氢产生一种腐鸡蛋气味，过去人们用它来制作臭气弹。但是，低浓度的硫化氢在帮助细胞相互交流中扮演着重要角色。在血管中，硫化氢刺激形成“衬里”，使其放松，从而导致血管扩张。</P> <P>这样就可以降低血压，让血液为一些基本器官输送更多氧气，释放心脏压力。阿拉巴马研究组在浴室中用含有碎大蒜的汁液“沐浴”了老鼠血管。结论令人惊讶，血管压力减少72%。研究人员还发现，把红血球暴露在从超市购买的大蒜提取的汁液中片刻，便开始生成硫化氢气体。更多研究显示，这种化学反应主要发生在血细胞的表面。</P> <P>研究人员表示，红血球中硫化氢的生成可能被用于规定蒜素补剂的每日摄入量。主要研究人员大卫·克劳斯说：“我们的结果暗示，我们日常生活中的大蒜是非常好的东西。在大蒜消费量高的地区，例如地中海和远东，人们的心血管病发病率较低。”</P> <P>英国心脏基金会心脏病护理人员朱迪·奥苏里万说：“这是非常有趣的研究，研究显示，大蒜可能有益心脏健康。但是，把吃大蒜作为一种医疗方法以降低冠心病风险的方式还缺乏足够的证据。把大蒜作为日常饮食中的一部分基于个人选择。值得注意的是，大量蒜素补剂可能会与稀释血液的药物相互作用，增大出血的危险。”</P></DIV>]]> 星期五, 04 一月 2008 02:12:29 GMT http://blog.china.com:80/u/070905/75121/200801/1656098.html 2008-01-04T02:12:29Z http://blog.china.com:80/u/070905/75121/200801/1656091.html <![CDATA[ <DIV> <TABLE cellSpacing=0 cellPadding=0 width=1002 align=center border=0> <TBODY> <TR> <TD vAlign=top background=../web/images/style_28.jpg> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD vAlign=top width="100%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class=para vAlign=top height=533> <P><STRONG>子弹般一飞冲天，时速百多公里的风驰极速，尖叫声此起彼落……全球游乐场的过山车多不胜数，爱玩的当然希望愈刺激愈好。美国《福布斯》杂志选出全球十大最惊吓的过山车，款款都标榜速度高、落差大及转动角度大，路轨扭扭曲曲，直上直落。虽然看上去都极其恐怖，但仍然大把人排长龙，怕归怕，玩照玩！ </STRONG></P> <P class=STYLE1>No. 1 </P> <P><STRONG>京达卡Kingda Ka </STRONG></P> <P><STRONG>美国新泽西州六旗大冒险乐园 </STRONG></P> <P><STRONG>最快速度：206公里/时 最高点：139.5米</STRONG></P> <P align=center>&nbsp;</P> <P>“京达卡”是世界上最快、最高的过山车，号称过山车之王。过山车瞬间由零加速至时速206公里，像火箭般直上，过程中有一次270度扭转，到达139.5米高的顶点后猛地俯冲41层楼的高度，还有一次270度的扭动。然后，过山车又进行第二次攀爬，到达40米高，短暂的失重后，通过磁力刹车，全程28秒玩完，怕了吗？因为京达卡刺激系数太高，所以只在4至10月份开放。 </P> <P class=STYLE1>No. 2 </P> <P><STRONG>超级赛车Top Thrill Dragster </STRONG></P> <P><STRONG>美国俄亥俄州杉点乐园 </STRONG></P> <P><STRONG>最快速度：193公里/时 最高点：128米</STRONG></P> <P align=center>&nbsp;</P> <P>“超级赛车”曾经是世界第一，直到2005年京达卡的建成。超级赛车是一个“等级过山车”，完成完整的一圈有122到152米的不同高度。过山车在出发4秒内达到最大速度，在开始攀爬到90度的倾斜弯时，有个逆时针的90度的翻转，然后过山车直接冲到152米的高度，越过制高点从另一边直下，再来个270度的顺时针翻转，然后促使电磁减速，使车既快又舒适的停止，仅30秒玩完。</P> <P class=STYLE1>No. 3 </P> <P><STRONG>终极飞车Dodonpa </STRONG></P> <P><STRONG>日本山梨县富士极乐园 </STRONG></P> <P><STRONG>最快速度：172公里/时 最大落差：52米</STRONG></P> <P align=center>&nbsp;</P> <P>“终极飞车”启动后在连续500米长的直线滑道上持续平稳下滑，此段滑道被称作“零G下滑”地段，然后以接近时速172km的速度向下行驶，乘客会感觉身体象漂浮在宇宙中一样，近似失重状态。此后，突然来了个急转弯，猛然冲向52米的垂直耸立的塔形滑道，以时速120公里的速度飞驰而来的过山车垂直上升，即便在最高处，仍能保持每小时105公里的速度，然后毫不迟疑地垂直落下。</P> <P class=STYLE1>No. 4 </P> <P><STRONG>恐怖之塔Tower of Terror </STRONG></P> <P><STRONG>澳大利亚昆士兰州梦想世界 </STRONG></P> <P><STRONG>最快速度：161公里/时 最高点：129米</STRONG></P> <P align=center>&nbsp;</P> <P>“恐怖之塔”的路线与前三名过山车不同，它是倒后型过山车。7秒钟加速到161公里/时，一直冲上129米相当于38层高的高度，随着这种上升，在实行90度反转前，有6.5秒的失重，然后倒着降落，往后加速俯冲的感觉比正面俯冲更为强烈更让人害怕。</P> <P class=STYLE1>No. 5 </P> <P><STRONG>超人：逃亡Superman: The Escape </STRONG></P> <P><STRONG>美国加州六旗魔法山乐园 </STRONG></P> <P><STRONG>最快速度：160公里/时 最高点：126米</STRONG></P> <P align=center>&nbsp;</P> <P>倒后型过山车“超人：逃亡”可能是这里面最有幽默感的，它的整体造型是个L字，在最顶点矗立着面向乘坐者的钢铁超人。没有绕圈和扭转，过山车7秒钟内加速到161公里/时，直直冲上126米的高度，暂停，6.5秒的失重就像超人飞天，再倒后俯冲风驰电掣般地回落。</P> <P class=STYLE1>No. 6</P> <P><STRONG>钢铁之龙Steel Dragon 2000</STRONG></P> <P><STRONG>日本长岛温泉公园</STRONG></P> <P><STRONG>最快速度：152.9公里/时 轨道长：2479米</STRONG></P> <P align=center>&nbsp;</P> <P>“钢铁之龙2000”是世界上轨道最长的过山车——2479米。它使用了传统的链式提升，由于梯倾斜度过长，所以有两条链子，一个在底部的一半，一个在最高的一半。链子很长很重，至少有两个过山车的重量。而这么结实的链子，所以可以同时安全地运行两辆过山车。</P> <P class=STYLE1>No. 7</P> <P><STRONG>千禧力量Millennium Force</STRONG></P> <P><STRONG>美国俄亥俄州雪松点公园</STRONG></P> <P><STRONG>最快速度：149.7公里/时 最高点：94.4米</STRONG></P> <P align=center>&nbsp;</P> <P>“千禧力量”保持了10项世界记录，其中一项是耗时最长、圈地最广——2分20秒内走过的轨道，圈起来的话覆盖了5.2万平方米。当你以为一个大俯冲过后可以稍事安神时，第二个俯冲又紧接着来了，接着就是第三个、第四个，过山车可以说是以飞快的速度从头到尾穿越了杉点乐园。</P> <P class=STYLE1>No. 8 </P> <P><STRONG>太阳神Titan </STRONG></P> <P><STRONG>美国德克萨斯州六旗乐园 </STRONG></P> <P><STRONG>最快速度：136.7公里/时 最大落差：77.7米</STRONG></P> <P align=center>&nbsp;</P> <P>“太阳神”的设计者与第9名“巨人”的由同一个瑞士团队设计，因此它俩有类似的夸张筋斗环和螺旋翻转。轨道共长1584米，其间有一个接一个的上升俯冲、翻筋斗和螺旋翻转。当过山车从77.7米的高坡以136.5公里/时的速度冲进一条长36.5米的漆黑隧道，心脏和眼睛骤然同时收缩，这是最刺激的。</P> <P class=STYLE1>No. 9 </P> <P><STRONG>巨人Goliath </STRONG></P> <P><STRONG>美国加州六旗魔法山乐园 </STRONG></P> <P><STRONG>最快速度：136.7公里/时 最大落差：77.7米</STRONG></P> <P align=center>&nbsp;</P> <P>“巨人”的速度排名第9、高度排名第7，而落差则排名第3。惊险环节里，它和“太阳神”一样以136.5公里/时的速度俯冲下77.7米的高坡，但它的最特别之处在于缓行轨道上的数个小拱，乘坐者经过这里就像骑着小兔子一样上下颠簸，因此被公认为是世界上最娱乐的过山车。</P> <P class=STYLE1>No. 10 </P> <P><STRONG>复仇幻影Phantom's Revenge </STRONG></P> <P><STRONG>美国宾州肯尼伍德乐园 </STRONG></P> <P><STRONG>最快速度：131.9公里/时 最大落差：69.4米</STRONG></P> <P align=center>“复仇幻影”的前身“钢筋幻影”曾经是世界排名第五的过山车，“复仇幻影”保留了传统的钢筋轨道，但大大增加了挑战性，最快速度131.9公里/时、69.4米的落差、轨道进入地下的等等，而且“复仇幻影”取消了圆圈轨道和螺旋翻转，只采用了翻坡道让人们感受失重的落差。</P><!-- InstanceEndEditable --></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR> <TD align=middle colSpan=2><!-- InstanceBeginEditable name="页面链接" --><!-- InstanceEndEditable --></TD></TR> <TR> <TD align=middle width=661><!-- InstanceBeginEditable name="友情链接" --><!-- InstanceEndEditable --> <DIV align=center></DIV></TD> <TD scope=col align=middle width=38><A href="file:///F:/&aelig;&#150;°&aring;&raquo;&ordm;&aelig;&#150;&#135;&auml;&raquo;&para;&aring;¤&sup1;%20(2)/&aring;&#133;¨&ccedil;&#144;&#131;&aring;&#141;&#129;&aring;¤§&aelig;&#156;&#128;&aelig;&#131;&#138;é&#153;&copy;è&iquest;&#135;&aring;±±è&frac12;&brvbar;.HTML#top"><IMG height=11 alt="" src="file:///F:/web/images/up.gif" width=11 border=0></A></TD></TR></TBODY></TABLE></TD> <TD vAlign=top width=22 background=../web/images/style_25.jpg><IMG height=685 src="file:///F:/web/images/style_15.jpg" width=22></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width=1002 align=center border=0> <TBODY> <TR> <TD></TD></TR></TBODY></TABLE> <P>&nbsp;</P></DIV>]]> 星期五, 04 一月 2008 02:11:42 GMT http://blog.china.com:80/u/070905/75121/200801/1656091.html 2008-01-04T02:11:42Z http://blog.china.com:80/u/070905/75121/200801/1656065.html <![CDATA[ <DIV> <P align=center>艾德·贾勒特向世人展示自己的得意之作——一座高达31.7英尺的沙雕城堡</P> <P>美国缅因州一名男子使用沙子建造起了一座32英尺(9.75米)高的“沙雕城堡”，该男子希望自己的得意之作是世界上最高的沙雕作品。据悉，这名男子通过此方式为患病的儿童以及他们家庭筹集善款。</P> <P>据美联社报道，该沙雕活动的主办方称，这个经过精心制作的沙雕城堡经测量后的准确高度是31英尺7英寸。据悉，经过公正的该沙雕高度确认函将被送往吉尼斯世界记录，以决定该沙雕城堡的高度是否能被载入该世界纪录中。</P> <P>据了解，这座沙雕城堡的作者是艾德·贾勒特，贾勒特曾在2003年时在英国建造过一座高达29.25英尺的沙雕城堡，当时被公认为世界上最高的沙雕，那时活动主办方将贾勒特的作品命名为“太阳之城”。</P> <P>据活动主办方介绍，多达1,000多名志愿者在过去的两个月里帮助贾勒特建造这个沙雕城堡，建造者一共使用了约40大卡车的沙子。</P></DIV>]]> 星期五, 04 一月 2008 02:09:22 GMT http://blog.china.com:80/u/070905/75121/200801/1656065.html 2008-01-04T02:09:22Z http://blog.china.com:80/u/070905/75121/200801/1655736.html <![CDATA[ <DIV> <P><FONT size=2>这是一组不需要哑铃，甚至不需要穿鞋子，用不着离开家，离开房间，只要有床、有沙发、有长椅、有小块儿地毯就可以开练的便利操！坚持下去会让你的肌肉更长，皮肤更紧更光滑。赶快去买能show出身材的靓装吧！</FONT></P> <P><STRONG><FONT size=2>1、抬腿 </FONT></STRONG></P> <P><FONT size=2>减肥重点：腹部、臀部 </FONT></P> <P><FONT size=2>动作：坐在楼梯(床沿、硬椅子边)上，双脚分开平放在地面上，抓住楼梯边缘，抬双腿与臀部同高。保持姿势，双脚一齐用力并拢。放下双脚，回起始位。重复5～10次。 </FONT></P> <P><STRONG><FONT size=2>2、拱桥 </FONT></STRONG></P> <P><FONT size=2>减肥重点：手臂、腹部、背部、腿 </FONT></P> <P><FONT size=2>动作：A 俯卧，后背绷直，用前臂和脚趾支撑身体，颈部与后背在一条直线上。B 向上抬起臀部，使身体成倒V字状，头在双臂之间。保持姿势放松。缓慢回到动作A。重复5～10次。 </FONT></P> <P><STRONG><FONT size=2>3、下压 </FONT></STRONG></P> <P><FONT size=2>减肥重点：腰部、腹部 </FONT></P> <P><FONT size=2>动作：脸向下，趴在长椅上(床沿)，左脚放在地面上，左脚尖与肩在一条垂直线上，向后伸右腿，挺胸，双手支撑起身体。 </FONT></P> <P><STRONG><FONT size=2>4.扭转 </FONT></STRONG></P> <P><FONT size=2>减肥重点：腹部、背部 </FONT></P> <P><FONT size=2>动作：坐姿。抬下颌，拉伸颈部，分别向左右侧做扭转。每组2分钟。 </FONT></P> <P><FONT size=2>你也可以这样做：站姿，双脚同肩宽，向上伸展双臂，在背部交叉，右手触左肩，左手触右肩，收腹，向左侧扭转躯干，静止姿势5秒，回中心位置，向另一侧扭转。做5～10次。 </FONT></P> <P><STRONG><FONT size=2>5.长椅眼镜蛇式 </FONT></STRONG></P> <P><FONT size=2>减肥重点腰部、腹部 </FONT></P> <P><FONT size=2>动作：脸向下，趴在长椅上（床沿），左脚放在地面上，左脚尖与肩在一条垂直线上，向后伸右腿，挺胸，双手支 </FONT></P> <P><FONT size=2>提高版：向上抬右腿，同时用右手向后去够右腿，抓住右踝关节5秒钟，向下放右腿至起始位，交换重复5～10次。 </FONT></P> <P><STRONG><FONT size=2>6.t字形 </FONT></STRONG></P> <P><FONT size=2>减肥重点：腹部、背部、大腿后侧 </FONT></P> <P><FONT size=2>动作：双脚并拢站立，缓慢由臀部开始向下弯曲身体，双手指尖触地。向后抬高左腿。如果感觉有难度可以略微弯曲右膝。保持姿势数到5，放下左腿，换右腿。重复5～10次</FONT></P></DIV>]]> 星期五, 04 一月 2008 01:20:11 GMT http://blog.china.com:80/u/070905/75121/200801/1655736.html 2008-01-04T01:20:11Z http://blog.china.com:80/u/070905/75121/200801/1655706.html <![CDATA[ <DIV> <P><FONT size=2>橘子皮又名陈皮，是一味理气、健胃、化痰的常用中药。用橘皮泡水代茶饮，有清热、止咳、化痰的作用，但鲜橘子皮泡水代茶饮却不利健康。 </FONT></P> <P><FONT size=2>随着种植技术的改进和保鲜技术的应用。近年来，果农摘下橘子后大多用保鲜剂浸 泡后再上市。保鲜剂为一种化学制剂，浸泡过的橘子对果肉没有影响，但橘子皮上残留的保鲜剂却难以用清水洗掉，若用这样的橘子皮泡水代茶饮，对身体健康的损害是显而易见的。 </FONT></P> <P><FONT size=2>即使未用保鲜剂泡过的鲜橘子皮代茶饮也发挥不出它应有的疗效。橘子皮之所以又名陈皮，是说橘子皮陈得越久越好，一般是应该放置隔年后才可以使用的。南北朝著名医学家陶弘景提出：“橘皮用陈久者良”。据研究证明，陈皮水煎剂中有肾上腺素样的成分存在，但较肾上腺素稳定，煮沸时不被破坏。陈皮隔年后挥发油含量大为减少，而黄酮类化合物的含量相对增加，这时陈皮的药用价值才能充分发挥出来。</FONT></P></DIV>]]> 星期五, 04 一月 2008 01:15:32 GMT http://blog.china.com:80/u/070905/75121/200801/1655706.html 2008-01-04T01:15:32Z http://blog.china.com:80/u/070905/75121/200710/1131988.html <![CDATA[ <DIV><FONT size=3>&lt;DIV&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;这是一个教你如何一步一步学习建立基于CSS制作网站的开始，这个教程将由几个部分组成。第一部分是讲述如何在photoshop中制作导航按扭的；第二部分将讲述背景的制作，再下一个是讲述标题(header)和页面的设计规划的，在最后是CSS和XHTML的应用的执行。&lt;BR&gt;现在也许有些人想知道为什么在我的教程里要以导航按扭的制作来开始，呵呵，其实我最初的目的是要讲述一段关于这些简单按扭的制作方法的小教程的，但是即然这个想法开始了，为什么不做一个全面的讲解呢！&lt;BR&gt;建立一个像玻璃面一样的导航按扭&lt;BR&gt;在photoshop里新建一个RGB模式的文件，大小为178x122像素，背景色为白色，然后新建一个图层（起名为“button”），然后填充这个图层用灰色（#ececec），再建一个新的图层（起名为“highlight”），并画一个一个像素的白的加亮的线分别在左边上上边（用铅笔工具，1个像素的笔头）。用“减淡工具”（大小为20像素的笔刷，透明度为50%）将左侧的白线条减淡一些形成上下渐变的效果。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;新建一个图层（起名为“bullet”），画一堆像素小点用铅笔工具（1px,#727272）,当然你也可以按照自己的意愿来选择颜色和大小。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;用钢笔工具画一个类似于玻璃斜面效果的曲线路径（颜色为#d6d6d6）。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;好了，你已经做好了自己的按扭，没有什么难度吧？&lt;BR&gt;建立鼠标经过时效果&lt;BR&gt;建立鼠标经过时要显示的图像效果最简便的方法便是复制我们的图层，然后改变它的颜色。现在，你需要到每一个图层去它们的颜色来建立这个鼠标经过时的图像的效果，这是我在这个例子里用到的颜色设置：&lt;BR&gt;按扭的背景层：#bfe3ff&lt;BR&gt;曲线斜面层：#a5d1f3&lt;BR&gt;小像素点层：#e4001b&lt;BR&gt;下载这个教程中用到的photoShop源文件！了解这个系列教程的这些基本的知识是必需的！&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;今天我将带大家一起开始关于我们的基于CSS的网页制作的第二部分，这一部分是讲述关于改变一个适当的颜色配置的和为我们的网页制作一个漂亮的背景图案的，在第一部分我们落下了这个，所以在这儿补上。&lt;BR&gt;就像大家所知道的，我的最初的意图是给你们讲述一个小的如何用简单的方法制作漂亮的立体按扭的教程，，所以这个教程的第一部分可能对你来说有点儿单一，以下我们将讲述关于色彩方案的设计在这个教程的第二部分，这实际上来讲是我们的第一步，按扭的创建，背景的制作等。&lt;BR&gt;选择你的色彩方案&lt;BR&gt;无论如何，你都可能有一个领先，选择恰当的颜色配置是至关重要，它反映了你是谁，你喜欢什么等！&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;实际上，解释给你，你选择什么或许不是至关重要的，尽管我总是努力遵循以下几个小的提示：&lt;BR&gt;1、使用至少一种能对比突现出来的颜色来用于强调在你的页面上，用它来做文本链接的颜色将是很显眼的，可见性就比较好。&lt;BR&gt;2、务必不要用太多的不同的颜色，否则你将以一个没有重点的混乱设计而告终。我最多只用3种颜色，两种相差不多的和一种高亮的。&lt;BR&gt;3、从这两种相差不多的当中，来通过明暗的变化而调节，如果你只用了不到3种颜色，那可能会看上去有一些单调的，尽管你也用了足够多的明暗变化。以下几种配色方案可能对你实际工作有所帮助：&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;在photoshop中使用色彩饱和度的调节来观看你所选择的颜色的变化，你会发现，实际上上面的这些例子的颜色都是通过这个方法得到的&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;以下我们再讲一下画像素图案&lt;BR&gt;现在是教大家画像素图案的时间！在photoShop中新建一个文件，大小为30x30像素，色彩模式为RGB，背景色可以是你想要的任意颜色，用铅笔工具画一些像素点，这是一些你可以开始时照着做的例子：&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;花大量的时间来制作这些像素图案，实际上是一种通过不同的方法的尝试，任何我们所不知道的技巧只有通过亲自尝试自己的想法才会成为技巧。我所做的大多数网页都是先开始于背景图案的制作，选择一个接近于背景色的颜色，然后来画些像素点。如果我建立的背景图案是一些线，我可以在photoshop中把那个包含一条线的图层复制一份新的出来，然后向左或右或上下移动一点儿。或者再改变一下透明度和层选项等。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;这些放大的图案是真实的像素点的分布，被裁切开的右边正好又和左边相连从而铺开就构成了一个完整的循环。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;下一步我们将要讲述实际的页面框架的设计和规划，核心内容将是讲如何制作一个引人注目的页头和标题，包括标题的装饰，希望大家喜欢这些教程！&lt;BR&gt;下载这个教程中用到的源文件（photoshop格式）&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;终于到了我们CSS教程的第三部分，但在我的Blog上的第一第二部分仍然是很有用的，今天的这部分将是我们最后的一部分关于设计方面的，在这之后我们将再一步步的花时间来开始我们XHTML和CSS的讲述，这是网页最终结果的大概样子（点击小图可以看到大图）:&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;我选择了粉红和绿的颜色做为按扭的普通和鼠标经过的状态颜色，可能会感觉有一点偏重于女性化的设计。&lt;BR&gt;今天我将做一个完整的讲述关于这个模板设计，你将会得到一些关于如何制作页面头部的知识，以及如何添加一个完全的像装饰一样的格调，以及介绍一些从哪里可以得到特别的创意和一些漂亮的字体的资源网站。&lt;BR&gt;建立页头的背景&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;在第一和第二部分，我们制作了按扭并选择了我们要的颜色，现在轮到寻找一个包含了我们已经首选颜色的图片来制作我们的页对头部的背景了。从我的色板上也可以看出我们用到了绿色和粉红色，所以我决定用一种很富贵的亮粉色做为主色调背景，用一个浓的樱桃色做Banner，用一个绿的东西做标志。&lt;BR&gt;当我在我收集的图像中寻找时，我看中了这一张图片，因此我将这张图片从一个特别红的颜色改变为了一个更为适当的一个略带桃色的颜色，这个操作可以在photoshop中利用“调节”---“色相饱和度”来实现，改变红色的色相，使其色调+24&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;下一步是选择一个更细的部分能包含我们要的适当的颜色，并且可以出现一个有趣的效果。并且在接下来我们还要用一些滤镜来实现进一步的效果。制作这个背景图片是需要一些创意的，而且要不断尝试你的想法，直到满意为止。这是我最后选中的我认为可以用来尝试一下的一部分图片。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;这里显示的图片当然只是简化了的一部分，实际开始时我用到的图片是一个大一点的（1600x1200px）,我添加了一个我喜欢的滤镜在它上面，在photoshopCS中可以用到好多生动的滤镜来实现我们的想法的。你也可以用别的滤镜来看看效果，这里我最好得到的图片：&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;这个背景图片融合了我们想要的数种的樱桃色彩。完成了上面的几步之后，新建一个图层我又用钢笔工具勾了一些曲线路径，用笔刷工具对路径描边。之后改变图层的透明度为30%，然后再复制这个层，轻移一点，旋转一些，再重复复制几次。&lt;BR&gt;下载这个制作过程的演示视频&lt;BR&gt;我添加了一个点缀物在右边（这是用一个叫Tamuz的字体做的），一会儿将提供一些可能下载到漂亮字体的网站。这是现在的结果：&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;我们的Blog模板的标题&lt;BR&gt;网页的标题完全是按照个人的意源来命名的，并且他应该有一个小的图标或是标志，图标应可能的特别一些，容易辩认一些，有时又能表现你自己一些等。在这个教程中我选择了一个仙人掌，因为他是诚实久远的像征，而且又有一点儿别的意思。但同时我选择它做为图标也是因为这个图标放在这里颜色上和我们使用的色彩方案在设计上讲是很协调的。最好，我用叫做Bon Guia的字体写了一个标题，这就是我们的网页头的最终结果：&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&lt;/FONT&gt;&amp;nbsp;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;提供一些有用的资源下载的网站链接：&lt;BR&gt;Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from Emigre&lt;BR&gt;Adobe ornamental fonts&lt;BR&gt;free Dingbats fonts&lt;BR&gt;总结：&lt;BR&gt;这一部分我们就已经把网页顶部logo和Banner的设计做了一个小的示范了，最主要的几个要点就是色彩的搭配和背景的选取以及小装饰图片的添加和滤镜的运用，大家不妨也按照这个思路去进行一些尝试，也欢迎大家大胆的不要吝啬的贴出自己的链接！&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;现在油漆桶和铅笔刷应该扔到一边了，我们进行第四部分的内容，在这一章节中，将要集中讲一下DIV这个容&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;器的设计。&lt;BR&gt;你需要问的问题是，我们设计的不同部分是什么？一个页面由哪些不同的部分组成？报着这个想法，我将在&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;这里回答这些问题讲解一下如何为网页进行切片，如果你是一个网页设计师，这可能对你来说是很简单的问&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;题，因为你已经在过去的日子里把表格运用的如火如荼，但现在你要思的是如何不用表格而用DIV容器及CSS&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;和Xhtml来控制实现一个不但文件体积小而且内容和页面更具亲和力的效果。&lt;BR&gt;这是通常的我们见过的网页构成：&lt;BR&gt;页面头（the header）&lt;BR&gt;页左栏（the left）&lt;BR&gt;页主体内容（the content）&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;导出需要的gif和jpeg图像&lt;BR&gt;这些是用到你需要导出为gif或jpeg图像不同&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;的素材&lt;BR&gt;* 1. 页面头文件header&lt;BR&gt;* 2. 导航按扭背景bg_navbutton&lt;BR&gt;* 3. 导航按扭bg_navbutton_over&lt;BR&gt;* 4. 普通小图标bullet_extlink&lt;BR&gt;* 5. 标题前小图标bullet_title&lt;BR&gt;好了，你大概会想，“背景图片怎么办？”，不错，它没有在这儿列出来，这需要一点儿说明，我们想要一&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;个严格的解决方案，因为我们仍然想要在窗口大小变化的时候内容居中，&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;这就是你将导出的背景，这是一个1600像素宽，5像&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;素高的图片（这已经是足够了，除非你是一个富人，用着30英寸的苹果机显示器）。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;使用CSS设置背景&lt;BR&gt;这就是我们要使我们的背景居中的CSS&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;body {&lt;BR&gt;background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;&lt;BR&gt;background-attachment: fixed;&lt;BR&gt;}&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;我们的背景图是一个5像素高的“线条”，它在垂直方向上延伸重复就铺满了整个页面。在水平方向是以浏览&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;器窗口的50%水平方向开始平铺线条，上边距为0。Background-attachment: fixed,意思是背景将不随着内容&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;的滚动而变化，是固定的。我们Body标签作为我们的放置这些参数的容器，是因为它要应用到整个页面。&lt;BR&gt;观看这时的结果：点这里&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;添加我们的第一个DIV&lt;BR&gt;现在我们就要依次添加我们的DIV了。&lt;BR&gt;这是我们的网页头的CSS&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#header {&lt;BR&gt;text-align: center;&lt;BR&gt;}&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;我们用一个ID符号建立我们的网页头的容器DIV，一个ID符号总是对应仅有的一个网页上的元素。一个对此ID&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;的CSS描述必须是唯一的伴随这个文件，我们的header是需要居中的，所以我们用到了"text-align: &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;centered;"，这段代码就是添加header的内容的。&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;&amp;lt;div id="header"&amp;gt;&amp;lt;img src="/Files/BeyondPic/2006-9/27/0692717292096322.jpg" &lt;BR&gt;alt="My blog" width="692" height="90" /&amp;gt;&amp;lt;/div&amp;gt;&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;你可能注意到这时预览结果时的图像没有在最顶上，所以我们在body标签里还要加上 "margin: 0" &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;and"padding: 0" &lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;body {&lt;BR&gt;background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;&lt;BR&gt;background-attachment: fixed;&lt;BR&gt;margin: 0;&lt;BR&gt;padding: 0;&lt;BR&gt;}&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;观看结果：点这里&lt;BR&gt;如果以上讲的这些对你非常陌生的话，那么你最好阅读一下这个&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;完整的关于CSS的介绍以便有一个更好的了解对&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;我们现在做的事情，祝你好运！&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;在我们以前的几个部分里，我们做过了一些很基本的CSS代码，如果是第一次来这儿的朋友可以先看看前几部分的内容：第一部分、第二部分、第三部分、第四部分，今天我们的教程里将来实现左侧导航栏的制作。&lt;BR&gt;但在开始之前，当建立一个网页的时候，我们必须总是尽可能让人容易理解的写语法，如果你看了第四部分内容的评价的话，你可能注意到有人提出了一个建议是，使用h1标签元素是更好的对于网页头部分，因为那是更容易理解的代码并且它使一个站点更具有亲和力容易更好地被搜索引擎收录。想当然这些更重要一些，所以我已经把我们的代码按照这种方法来修改了。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;图片更换的技术&lt;BR&gt;这个技术实际上叫做图像替换技术，意思是我们用一个文本来替换真实的图片在我们的html代码中。页面头的图片在支持CSS（当我们使用“ background: url(/Files/BeyondPic/2006-9/27/0692717292096322.jpg);”来设置背景图片时）的浏览器里将会显示出来，并且文本是隐藏的（因为代码：“text-indent: -9999px;”），因为我们的CSS代码将文本定位到了我们可见区域之外。在旧的浏览器上或是在盲人用的屏幕阅读器上你将会看到文本的替代，我们用这种更易理解的代码。&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;h1 {&lt;BR&gt;width: 692px;&lt;BR&gt;height: 90px;&lt;BR&gt;text-indent: -9999px;&lt;BR&gt;background: url(/Files/BeyondPic/2006-9/27/0692717292096322.jpg);&lt;BR&gt;margin: 0;&lt;BR&gt;padding: 0;&lt;BR&gt;}&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;网页头的背景图像的宽和高是必须定义一些空间的。为了确保我的们的图像是很精确的置于我们的页而后顶部位置 margin: 0; padding: 0;也是必须的，此外，我在body标签中放置text-align: center;是因为所有的内容都将要是居中的。然后，有些内容是不居中的，所以我们要添加text-align: left;在那里。我们的这个容器margin: 0px auto;意思是它将出现在一个最顶端（0px）和居中的（auto）。&lt;BR&gt;制作导航栏&lt;BR&gt;要制作左侧的导航栏按扭，首先要制作一个ID容器存放里面的内容:&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#left {&lt;BR&gt;width: 178px;&lt;BR&gt;}&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;到目前为止我们需要做的只是定义它的宽度，在这个宽度的left容器中我们放置一个DIV容器作为这个导航，命名为：navcontainer.用CSS建立一个导航最好的方法是用它本身那些导航的点，就像以前用html做好内容,然后再定义它的CSS样式一样。就像这样：&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;&amp;lt;div id="navcontainer"&amp;gt;&lt;BR&gt;&amp;lt;ul&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#" id="current"&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;About me&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;Contact me&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;Articles&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;Photo roll&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;/ul&amp;gt;&lt;BR&gt;&amp;lt;/div&amp;gt; &lt;BR&gt;这样会出一个默认的点，而因为我们不想用它的默认的这个点，而要用一个漂亮的背景上的点来代替，所以我们要在CSS中移除这些点，要进行的CSS定义为：&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#navcontainer {&lt;BR&gt;width: 178px; &lt;BR&gt;}&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;#navcontainer ul {&lt;BR&gt;margin: 0;&lt;BR&gt;padding: 0;&lt;BR&gt;list-style-type: none;&lt;BR&gt;font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;&lt;BR&gt;text-indent: 20px;&lt;BR&gt;letter-spacing: 1px;&lt;BR&gt;border-bottom: 1px solid #fff;&lt;BR&gt;} &lt;BR&gt;第一部分代码定义了这个导航容器的宽度，第二部分定义了这个导航容器的“Ul”标签.margin: 0;padding: 0;确保了在按扭和按扭之间没有空隙并且移掉了左边的缩进。list-style-type: none;移除了标准html格式里的小点，然后是定义里面文字样式，在最后一行，是用来给我们要做的漂亮的导航按扭每行下面加一条白线。&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#navcontainer a {&lt;BR&gt;display: block;&lt;BR&gt;width: 178px;&lt;BR&gt;height: 22px;&lt;BR&gt;} &lt;BR&gt;这个定义了一个我们的导航栏的“a”标签，或者叫做“链接标签”。这样定义之后就会影响到每一个导航栏里的按扭，首先，我们使用display: block;，显示设置为一个元素的显示方式，这里设置为“block”是需要让这个链接的块儿自动调整到适合大小，后两行是设置的每个按扭的宽和高。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;鼠标经过时的状态是通过交换背景图片来实现的，使用的是a:hover 的样式。这是详细的代码：&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#navcontainer a:hover {&lt;BR&gt;background: url(bg_navbutton_over.gif);&lt;BR&gt;color: #A5003B;&lt;BR&gt;text-decoration: none;&lt;BR&gt;} &lt;BR&gt;颜色的设置是通过改变Color属性的，而text-decoration: none;是用来防止正规的链接中的下划线出现的。通常状况下，为了使你的导航栏能表现的更清晰，更具体，所以我又添加了一个额外的样式current，这个用来显示当前网站所处的页面。代码如下：&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#navcontainer li a#current {&lt;BR&gt;background: url(bg_navbutton_over.gif);&lt;BR&gt;color: #A5003B;&lt;BR&gt;text-decoration: none;&lt;BR&gt;} &lt;BR&gt;这个样式的定义用在导航栏里的链接里(li a)，属性和值都和经过状态时是一样的。&lt;BR&gt;现在剩下仅有的事情就是把这个ID添加到我们的html代码里了：&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;&amp;lt;div id="navcontainer"&amp;gt;&lt;BR&gt;&amp;lt;ul&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#" id="current"&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;About me&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;Contact me&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;Articles&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;li&amp;gt;&amp;lt;a href="#"&amp;gt;Photo roll&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;BR&gt;&amp;lt;/ul&amp;gt;&lt;BR&gt;&amp;lt;/div&amp;gt;&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;观看最后的结果&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;一些关于CSS导航栏的例子可以到这些网站上去看一下：&lt;BR&gt;&lt;/FONT&gt;&lt;A href="</FONT><A href='http://css.maxdesign.com.au/listamatic/"><FONT'><FONT size=3>http://css.maxdesign.com.au/listamatic/"&gt;&lt;FONT</FONT></A><FONT size=3> size=3&gt;http://css.maxdesign.com.au/listamatic/&lt;/FONT&gt;&lt;/A&gt;&lt;FONT size=3&gt; &lt;BR&gt;&lt;/FONT&gt;&lt;A href="</FONT><A href='http://css.maxdesign.com.au/listamatic2/"><FONT'><FONT size=3>http://css.maxdesign.com.au/listamatic2/"&gt;&lt;FONT</FONT></A><FONT size=3> size=3&gt;http://css.maxdesign.com.au/listamatic2/&lt;/FONT&gt;&lt;/A&gt;&lt;FONT size=3&gt; &lt;BR&gt;&lt;/FONT&gt;&lt;A href="</FONT><A href='http://css.maxdesign.com.au/listutorial/"><FONT'><FONT size=3>http://css.maxdesign.com.au/listutorial/"&gt;&lt;FONT</FONT></A><FONT size=3> size=3&gt;http://css.maxdesign.com.au/listutorial/&lt;/FONT&gt;&lt;/A&gt;&lt;FONT size=3&gt; &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;这就是我们的制作导航栏的全过程，我希望大家能喜欢它，并且继续关注我们下一部分的内容！&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;这是我们教程的第六部分，现在我们将要填加我们网页的内容部分。&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;为网站的内容添加主体容器&lt;BR&gt;首先我们要在我们的样式表单中添加一个ID选择器，设定他的宽度为514像素，&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#content {&lt;BR&gt;width: 514px;&lt;BR&gt;float: left;&lt;BR&gt;}&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;因为导航栏浮在左侧，我们需要添加一个“float: left;”到我们的“left”ID里，但同时我们需要添加它到我们的“content”ID里，因为它也浮在我们的主ID容器左侧：&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#left {&lt;BR&gt;width: 178px;&lt;BR&gt;float: left;&lt;BR&gt;}&lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;我们填加这个到我们的Xhtml代码里：&lt;/FONT&gt;&lt;A href="</FONT><A href='http://css.maxdesign.com.au/floatutorial/introduction.htm"><FONT'><FONT size=3>http://css.maxdesign.com.au/floatutorial/introduction.htm"&gt;&lt;FONT</FONT></A><FONT size=3> size=3&gt;http://css.maxdesign.com.au/floatutorial/introduction.htm&lt;/FONT&gt;&lt;/A&gt;&lt;FONT size=3&gt; &lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;FONT size=3&gt;&amp;lt;div id="content"&amp;gt;this is the right&amp;lt;/div&amp;gt; &lt;BR&gt;如果上面的这些讲解使你感觉有一定难度，我敢保证这些将会对你很有用：&lt;BR&gt;* 更多的关于Float basics&lt;BR&gt;* 关于Float的教程&lt;BR&gt;当然，我们的内容现在是紧贴着左边的导航栏的，而我们想要的效果是空出一些空隙的，所以我们要填加一些内容容器的样式：&lt;BR&gt;以下内容为程序代码 &lt;/FONT&gt;&lt;/DIV&gt;<BR>&lt;DIV&gt;&lt;BR&gt;&lt;FONT size=3&gt;#content {&lt;BR&gt;width: 479px;&lt;BR&gt;float: left;&lt;BR&gt;padding-top: 15px;&lt;BR&gt;padding-right: 0;&lt;BR&gt;padding-bottom: 10px;&lt;BR&gt;padding-left: 20px;&lt;BR&gt;} &lt;BR&gt;&lt;/FONT&gt;&lt;/DIV&gt;</FONT></DIV> <DIV></DIV>]]> 星期四, 18 十月 2007 03:04:21 GMT http://blog.china.com:80/u/070905/75121/200710/1131988.html 2007-10-18T03:04:21Z http://blog.china.com:80/u/070905/75121/200710/1131975.html <![CDATA[ <DIV>&nbsp;</DIV> <DIV><FONT size=3>这是一个教你如何一步一步学习建立基于CSS制作网站的开始，这个教程将由几个部分组成。第一部分是讲述如何在photoshop中制作导航按扭的；第二部分将讲述背景的制作，再下一个是讲述标题(header)和页面的设计规划的，在最后是CSS和XHTML的应用的执行。<BR>现在也许有些人想知道为什么在我的教程里要以导航按扭的制作来开始，呵呵，其实我最初的目的是要讲述一段关于这些简单按扭的制作方法的小教程的，但是即然这个想法开始了，为什么不做一个全面的讲解呢！<BR>建立一个像玻璃面一样的导航按扭<BR>在photoshop里新建一个RGB模式的文件，大小为178x122像素，背景色为白色，然后新建一个图层（起名为“button”），然后填充这个图层用灰色（#ececec），再建一个新的图层（起名为“highlight”），并画一个一个像素的白的加亮的线分别在左边上上边（用铅笔工具，1个像素的笔头）。用“减淡工具”（大小为20像素的笔刷，透明度为50%）将左侧的白线条减淡一些形成上下渐变的效果。</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>新建一个图层（起名为“bullet”），画一堆像素小点用铅笔工具（1px,#727272）,当然你也可以按照自己的意愿来选择颜色和大小。</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>用钢笔工具画一个类似于玻璃斜面效果的曲线路径（颜色为#d6d6d6）。</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>好了，你已经做好了自己的按扭，没有什么难度吧？<BR>建立鼠标经过时效果<BR>建立鼠标经过时要显示的图像效果最简便的方法便是复制我们的图层，然后改变它的颜色。现在，你需要到每一个图层去它们的颜色来建立这个鼠标经过时的图像的效果，这是我在这个例子里用到的颜色设置：<BR>按扭的背景层：#bfe3ff<BR>曲线斜面层：#a5d1f3<BR>小像素点层：#e4001b<BR>下载这个教程中用到的photoShop源文件！了解这个系列教程的这些基本的知识是必需的！</FONT></DIV> <DIV><FONT size=3>今天我将带大家一起开始关于我们的基于CSS的网页制作的第二部分，这一部分是讲述关于改变一个适当的颜色配置的和为我们的网页制作一个漂亮的背景图案的，在第一部分我们落下了这个，所以在这儿补上。<BR>就像大家所知道的，我的最初的意图是给你们讲述一个小的如何用简单的方法制作漂亮的立体按扭的教程，，所以这个教程的第一部分可能对你来说有点儿单一，以下我们将讲述关于色彩方案的设计在这个教程的第二部分，这实际上来讲是我们的第一步，按扭的创建，背景的制作等。<BR>选择你的色彩方案<BR>无论如何，你都可能有一个领先，选择恰当的颜色配置是至关重要，它反映了你是谁，你喜欢什么等！</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>实际上，解释给你，你选择什么或许不是至关重要的，尽管我总是努力遵循以下几个小的提示：<BR>1、使用至少一种能对比突现出来的颜色来用于强调在你的页面上，用它来做文本链接的颜色将是很显眼的，可见性就比较好。<BR>2、务必不要用太多的不同的颜色，否则你将以一个没有重点的混乱设计而告终。我最多只用3种颜色，两种相差不多的和一种高亮的。<BR>3、从这两种相差不多的当中，来通过明暗的变化而调节，如果你只用了不到3种颜色，那可能会看上去有一些单调的，尽管你也用了足够多的明暗变化。以下几种配色方案可能对你实际工作有所帮助：</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>在photoshop中使用色彩饱和度的调节来观看你所选择的颜色的变化，你会发现，实际上上面的这些例子的颜色都是通过这个方法得到的</FONT></DIV> <DIV><FONT size=3>以下我们再讲一下画像素图案<BR>现在是教大家画像素图案的时间！在photoShop中新建一个文件，大小为30x30像素，色彩模式为RGB，背景色可以是你想要的任意颜色，用铅笔工具画一些像素点，这是一些你可以开始时照着做的例子：</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>花大量的时间来制作这些像素图案，实际上是一种通过不同的方法的尝试，任何我们所不知道的技巧只有通过亲自尝试自己的想法才会成为技巧。我所做的大多数网页都是先开始于背景图案的制作，选择一个接近于背景色的颜色，然后来画些像素点。如果我建立的背景图案是一些线，我可以在photoshop中把那个包含一条线的图层复制一份新的出来，然后向左或右或上下移动一点儿。或者再改变一下透明度和层选项等。</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>这些放大的图案是真实的像素点的分布，被裁切开的右边正好又和左边相连从而铺开就构成了一个完整的循环。</FONT></DIV> <DIV><FONT size=3>下一步我们将要讲述实际的页面框架的设计和规划，核心内容将是讲如何制作一个引人注目的页头和标题，包括标题的装饰，希望大家喜欢这些教程！<BR>下载这个教程中用到的源文件（photoshop格式）</FONT></DIV> <DIV><FONT size=3>终于到了我们CSS教程的第三部分，但在我的Blog上的第一第二部分仍然是很有用的，今天的这部分将是我们最后的一部分关于设计方面的，在这之后我们将再一步步的花时间来开始我们XHTML和CSS的讲述，这是网页最终结果的大概样子（点击小图可以看到大图）:</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>我选择了粉红和绿的颜色做为按扭的普通和鼠标经过的状态颜色，可能会感觉有一点偏重于女性化的设计。<BR>今天我将做一个完整的讲述关于这个模板设计，你将会得到一些关于如何制作页面头部的知识，以及如何添加一个完全的像装饰一样的格调，以及介绍一些从哪里可以得到特别的创意和一些漂亮的字体的资源网站。<BR>建立页头的背景</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>在第一和第二部分，我们制作了按扭并选择了我们要的颜色，现在轮到寻找一个包含了我们已经首选颜色的图片来制作我们的页对头部的背景了。从我的色板上也可以看出我们用到了绿色和粉红色，所以我决定用一种很富贵的亮粉色做为主色调背景，用一个浓的樱桃色做Banner，用一个绿的东西做标志。<BR>当我在我收集的图像中寻找时，我看中了这一张图片，因此我将这张图片从一个特别红的颜色改变为了一个更为适当的一个略带桃色的颜色，这个操作可以在photoshop中利用“调节”---“色相饱和度”来实现，改变红色的色相，使其色调+24</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>下一步是选择一个更细的部分能包含我们要的适当的颜色，并且可以出现一个有趣的效果。并且在接下来我们还要用一些滤镜来实现进一步的效果。制作这个背景图片是需要一些创意的，而且要不断尝试你的想法，直到满意为止。这是我最后选中的我认为可以用来尝试一下的一部分图片。</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>这里显示的图片当然只是简化了的一部分，实际开始时我用到的图片是一个大一点的（1600x1200px）,我添加了一个我喜欢的滤镜在它上面，在photoshopCS中可以用到好多生动的滤镜来实现我们的想法的。你也可以用别的滤镜来看看效果，这里我最好得到的图片：</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>这个背景图片融合了我们想要的数种的樱桃色彩。完成了上面的几步之后，新建一个图层我又用钢笔工具勾了一些曲线路径，用笔刷工具对路径描边。之后改变图层的透明度为30%，然后再复制这个层，轻移一点，旋转一些，再重复复制几次。<BR>下载这个制作过程的演示视频<BR>我添加了一个点缀物在右边（这是用一个叫Tamuz的字体做的），一会儿将提供一些可能下载到漂亮字体的网站。这是现在的结果：</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>我们的Blog模板的标题<BR>网页的标题完全是按照个人的意源来命名的，并且他应该有一个小的图标或是标志，图标应可能的特别一些，容易辩认一些，有时又能表现你自己一些等。在这个教程中我选择了一个仙人掌，因为他是诚实久远的像征，而且又有一点儿别的意思。但同时我选择它做为图标也是因为这个图标放在这里颜色上和我们使用的色彩方案在设计上讲是很协调的。最好，我用叫做Bon Guia的字体写了一个标题，这就是我们的网页头的最终结果：</FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><FONT size=3>提供一些有用的资源下载的网站链接：<BR>Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from Emigre<BR>Adobe ornamental fonts<BR>free Dingbats fonts<BR>总结：<BR>这一部分我们就已经把网页顶部logo和Banner的设计做了一个小的示范了，最主要的几个要点就是色彩的搭配和背景的选取以及小装饰图片的添加和滤镜的运用，大家不妨也按照这个思路去进行一些尝试，也欢迎大家大胆的不要吝啬的贴出自己的链接！</FONT></DIV> <DIV><FONT size=3>现在油漆桶和铅笔刷应该扔到一边了，我们进行第四部分的内容，在这一章节中，将要集中讲一下DIV这个容</FONT></DIV> <DIV><FONT size=3>器的设计。<BR>你需要问的问题是，我们设计的不同部分是什么？一个页面由哪些不同的部分组成？报着这个想法，我将在</FONT></DIV> <DIV><FONT size=3>这里回答这些问题讲解一下如何为网页进行切片，如果你是一个网页设计师，这可能对你来说是很简单的问</FONT></DIV> <DIV><FONT size=3>题，因为你已经在过去的日子里把表格运用的如火如荼，但现在你要思的是如何不用表格而用DIV容器及CSS</FONT></DIV> <DIV><FONT size=3>和Xhtml来控制实现一个不但文件体积小而且内容和页面更具亲和力的效果。<BR>这是通常的我们见过的网页构成：<BR>页面头（the header）<BR>页左栏（the left）<BR>页主体内容（the content）</FONT></DIV> <DIV><FONT size=3>导出需要的gif和jpeg图像<BR>这些是用到你需要导出为gif或jpeg图像不同</FONT></DIV> <DIV><FONT size=3>的素材<BR>* 1. 页面头文件header<BR>* 2. 导航按扭背景bg_navbutton<BR>* 3. 导航按扭bg_navbutton_over<BR>* 4. 普通小图标bullet_extlink<BR>* 5. 标题前小图标bullet_title<BR>好了，你大概会想，“背景图片怎么办？”，不错，它没有在这儿列出来，这需要一点儿说明，我们想要一</FONT></DIV> <DIV><FONT size=3>个严格的解决方案，因为我们仍然想要在窗口大小变化的时候内容居中，</FONT></DIV> <DIV><FONT size=3>这就是你将导出的背景，这是一个1600像素宽，5像</FONT></DIV> <DIV><FONT size=3>素高的图片（这已经是足够了，除非你是一个富人，用着30英寸的苹果机显示器）。</FONT></DIV> <DIV><FONT size=3>使用CSS设置背景<BR>这就是我们要使我们的背景居中的CSS<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>body {<BR>background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;<BR>background-attachment: fixed;<BR>}</FONT></DIV> <DIV><FONT size=3>我们的背景图是一个5像素高的“线条”，它在垂直方向上延伸重复就铺满了整个页面。在水平方向是以浏览</FONT></DIV> <DIV><FONT size=3>器窗口的50%水平方向开始平铺线条，上边距为0。Background-attachment: fixed,意思是背景将不随着内容</FONT></DIV> <DIV><FONT size=3>的滚动而变化，是固定的。我们Body标签作为我们的放置这些参数的容器，是因为它要应用到整个页面。<BR>观看这时的结果：点这里</FONT></DIV> <DIV><FONT size=3>添加我们的第一个DIV<BR>现在我们就要依次添加我们的DIV了。<BR>这是我们的网页头的CSS<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#header {<BR>text-align: center;<BR>}</FONT></DIV> <DIV><FONT size=3>我们用一个ID符号建立我们的网页头的容器DIV，一个ID符号总是对应仅有的一个网页上的元素。一个对此ID</FONT></DIV> <DIV><FONT size=3>的CSS描述必须是唯一的伴随这个文件，我们的header是需要居中的，所以我们用到了"text-align: </FONT></DIV> <DIV><FONT size=3>centered;"，这段代码就是添加header的内容的。<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>&lt;div id="header"&gt;&lt;img src="/Files/BeyondPic/2006-9/27/0692717292096322.jpg" <BR>alt="My blog" width="692" height="90" /&gt;&lt;/div&gt;</FONT></DIV> <DIV><FONT size=3>你可能注意到这时预览结果时的图像没有在最顶上，所以我们在body标签里还要加上 "margin: 0" </FONT></DIV> <DIV><FONT size=3>and"padding: 0" <BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>body {<BR>background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;<BR>background-attachment: fixed;<BR>margin: 0;<BR>padding: 0;<BR>}</FONT></DIV> <DIV><FONT size=3>观看结果：点这里<BR>如果以上讲的这些对你非常陌生的话，那么你最好阅读一下这个</FONT></DIV> <DIV><FONT size=3>完整的关于CSS的介绍以便有一个更好的了解对</FONT></DIV> <DIV><FONT size=3>我们现在做的事情，祝你好运！</FONT></DIV> <DIV><FONT size=3>在我们以前的几个部分里，我们做过了一些很基本的CSS代码，如果是第一次来这儿的朋友可以先看看前几部分的内容：第一部分、第二部分、第三部分、第四部分，今天我们的教程里将来实现左侧导航栏的制作。<BR>但在开始之前，当建立一个网页的时候，我们必须总是尽可能让人容易理解的写语法，如果你看了第四部分内容的评价的话，你可能注意到有人提出了一个建议是，使用h1标签元素是更好的对于网页头部分，因为那是更容易理解的代码并且它使一个站点更具有亲和力容易更好地被搜索引擎收录。想当然这些更重要一些，所以我已经把我们的代码按照这种方法来修改了。</FONT></DIV> <DIV><FONT size=3>图片更换的技术<BR>这个技术实际上叫做图像替换技术，意思是我们用一个文本来替换真实的图片在我们的html代码中。页面头的图片在支持CSS（当我们使用“ background: url(/Files/BeyondPic/2006-9/27/0692717292096322.jpg);”来设置背景图片时）的浏览器里将会显示出来，并且文本是隐藏的（因为代码：“text-indent: -9999px;”），因为我们的CSS代码将文本定位到了我们可见区域之外。在旧的浏览器上或是在盲人用的屏幕阅读器上你将会看到文本的替代，我们用这种更易理解的代码。<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>h1 {<BR>width: 692px;<BR>height: 90px;<BR>text-indent: -9999px;<BR>background: url(/Files/BeyondPic/2006-9/27/0692717292096322.jpg);<BR>margin: 0;<BR>padding: 0;<BR>}</FONT></DIV> <DIV><FONT size=3>网页头的背景图像的宽和高是必须定义一些空间的。为了确保我的们的图像是很精确的置于我们的页而后顶部位置 margin: 0; padding: 0;也是必须的，此外，我在body标签中放置text-align: center;是因为所有的内容都将要是居中的。然后，有些内容是不居中的，所以我们要添加text-align: left;在那里。我们的这个容器margin: 0px auto;意思是它将出现在一个最顶端（0px）和居中的（auto）。<BR>制作导航栏<BR>要制作左侧的导航栏按扭，首先要制作一个ID容器存放里面的内容:<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#left {<BR>width: 178px;<BR>}</FONT></DIV> <DIV><FONT size=3>到目前为止我们需要做的只是定义它的宽度，在这个宽度的left容器中我们放置一个DIV容器作为这个导航，命名为：navcontainer.用CSS建立一个导航最好的方法是用它本身那些导航的点，就像以前用html做好内容,然后再定义它的CSS样式一样。就像这样：<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>&lt;div id="navcontainer"&gt;<BR>&lt;ul&gt;<BR>&lt;li&gt;&lt;a href="#" id="current"&gt;Home&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="#"&gt;About me&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="#"&gt;Contact me&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="#"&gt;Articles&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="#"&gt;Photo roll&lt;/a&gt;&lt;/li&gt;<BR>&lt;/ul&gt;<BR>&lt;/div&gt; <BR>这样会出一个默认的点，而因为我们不想用它的默认的这个点，而要用一个漂亮的背景上的点来代替，所以我们要在CSS中移除这些点，要进行的CSS定义为：<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#navcontainer {<BR>width: 178px; <BR>}</FONT></DIV> <DIV><FONT size=3>#navcontainer ul {<BR>margin: 0;<BR>padding: 0;<BR>list-style-type: none;<BR>font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;<BR>text-indent: 20px;<BR>letter-spacing: 1px;<BR>border-bottom: 1px solid #fff;<BR>} <BR>第一部分代码定义了这个导航容器的宽度，第二部分定义了这个导航容器的“Ul”标签.margin: 0;padding: 0;确保了在按扭和按扭之间没有空隙并且移掉了左边的缩进。list-style-type: none;移除了标准html格式里的小点，然后是定义里面文字样式，在最后一行，是用来给我们要做的漂亮的导航按扭每行下面加一条白线。<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#navcontainer a {<BR>display: block;<BR>width: 178px;<BR>height: 22px;<BR>} <BR>这个定义了一个我们的导航栏的“a”标签，或者叫做“链接标签”。这样定义之后就会影响到每一个导航栏里的按扭，首先，我们使用display: block;，显示设置为一个元素的显示方式，这里设置为“block”是需要让这个链接的块儿自动调整到适合大小，后两行是设置的每个按扭的宽和高。</FONT></DIV> <DIV><FONT size=3>鼠标经过时的状态是通过交换背景图片来实现的，使用的是a:hover 的样式。这是详细的代码：<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#navcontainer a:hover {<BR>background: url(bg_navbutton_over.gif);<BR>color: #A5003B;<BR>text-decoration: none;<BR>} <BR>颜色的设置是通过改变Color属性的，而text-decoration: none;是用来防止正规的链接中的下划线出现的。通常状况下，为了使你的导航栏能表现的更清晰，更具体，所以我又添加了一个额外的样式current，这个用来显示当前网站所处的页面。代码如下：<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#navcontainer li a#current {<BR>background: url(bg_navbutton_over.gif);<BR>color: #A5003B;<BR>text-decoration: none;<BR>} <BR>这个样式的定义用在导航栏里的链接里(li a)，属性和值都和经过状态时是一样的。<BR>现在剩下仅有的事情就是把这个ID添加到我们的html代码里了：<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>&lt;div id="navcontainer"&gt;<BR>&lt;ul&gt;<BR>&lt;li&gt;&lt;a href="#" id="current"&gt;Home&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="#"&gt;About me&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="#"&gt;Contact me&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="#"&gt;Articles&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="#"&gt;Photo roll&lt;/a&gt;&lt;/li&gt;<BR>&lt;/ul&gt;<BR>&lt;/div&gt;</FONT></DIV> <DIV><FONT size=3>观看最后的结果</FONT></DIV> <DIV><FONT size=3>一些关于CSS导航栏的例子可以到这些网站上去看一下：<BR></FONT><A href="http://css.maxdesign.com.au/listamatic/"><FONT size=3>http://css.maxdesign.com.au/listamatic/</FONT></A><FONT size=3> <BR></FONT><A href="http://css.maxdesign.com.au/listamatic2/"><FONT size=3>http://css.maxdesign.com.au/listamatic2/</FONT></A><FONT size=3> <BR></FONT><A href="http://css.maxdesign.com.au/listutorial/"><FONT size=3>http://css.maxdesign.com.au/listutorial/</FONT></A><FONT size=3> </FONT></DIV> <DIV><FONT size=3>这就是我们的制作导航栏的全过程，我希望大家能喜欢它，并且继续关注我们下一部分的内容！</FONT></DIV> <DIV><FONT size=3>这是我们教程的第六部分，现在我们将要填加我们网页的内容部分。</FONT></DIV> <DIV><FONT size=3>为网站的内容添加主体容器<BR>首先我们要在我们的样式表单中添加一个ID选择器，设定他的宽度为514像素，<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#content {<BR>width: 514px;<BR>float: left;<BR>}</FONT></DIV> <DIV><FONT size=3>因为导航栏浮在左侧，我们需要添加一个“float: left;”到我们的“left”ID里，但同时我们需要添加它到我们的“content”ID里，因为它也浮在我们的主ID容器左侧：<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#left {<BR>width: 178px;<BR>float: left;<BR>}</FONT></DIV> <DIV><FONT size=3>我们填加这个到我们的Xhtml代码里：</FONT><A href="http://css.maxdesign.com.au/floatutorial/introduction.htm"><FONT size=3>http://css.maxdesign.com.au/floatutorial/introduction.htm</FONT></A><FONT size=3> <BR>以下内容为程序代码 </FONT></DIV> <DIV><FONT size=3>&lt;div id="content"&gt;this is the right&lt;/div&gt; <BR>如果上面的这些讲解使你感觉有一定难度，我敢保证这些将会对你很有用：<BR>* 更多的关于Float basics<BR>* 关于Float的教程<BR>当然，我们的内容现在是紧贴着左边的导航栏的，而我们想要的效果是空出一些空隙的，所以我们要填加一些内容容器的样式：<BR>以下内容为程序代码 </FONT></DIV> <DIV><BR><FONT size=3>#content {<BR>width: 479px;<BR>float: left;<BR>padding-top: 15px;<BR>padding-right: 0;<BR>padding-bottom: 10px;<BR>padding-left: 20px;<BR>} <BR></FONT></DIV>]]> 星期四, 18 十月 2007 03:03:20 GMT http://blog.china.com:80/u/070905/75121/200710/1131975.html 2007-10-18T03:03:20Z http://blog.china.com:80/u/070905/75121/200710/1131953.html <![CDATA[ <DIV><FONT size=3>W3C定义的盒模式如下: </FONT></DIV> <DIV><FONT size=3></FONT>&nbsp;</DIV> <DIV><BR><FONT size=3>width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。<BR>但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。<BR>左右Margin加倍的问题<BR>当box为float时，IE6中box左右的margin会加倍 </FONT></DIV> <DIV><FONT size=3>比如：</FONT></DIV> <DIV><FONT size=3>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "</FONT><A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><FONT size=3>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</FONT></A><FONT size=3>"&gt;<BR>&lt;html xmlns="</FONT><A href="http://www.w3.org/1999/xhtml"><FONT size=3>http://www.w3.org/1999/xhtml</FONT></A><FONT size=3>"&gt;<BR>&lt;head&gt;<BR>&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;<BR>&lt;title&gt;Untitled Document&lt;/title&gt;<BR>&lt;style&gt;<BR>.outer {<BR>width:500px;<BR>height:200px;<BR>background:#000;<BR>}<BR>.inner {<BR>float:left;<BR>width:200px;<BR>height:100px;<BR>margin:5px;<BR>background:#fff;<BR>}<BR>&lt;/style&gt;<BR>&lt;/head&gt;</FONT></DIV> <DIV><FONT size=3>&lt;body&gt;<BR>&lt;div class="outer"&gt;<BR>&lt;div class="inner"&gt;&lt;/div&gt;<BR>&lt;div class="inner"&gt;&lt;/div&gt;<BR>&lt;/div&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;</FONT></DIV> <DIV><FONT size=3>左面的inner的左面margin明显大于5px。<BR>这时候，定义inner的display属性为inline。<BR>外层box自动计算高度的问题<BR>根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。<BR>Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：</FONT></DIV> <DIV><FONT size=3>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "</FONT><A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><FONT size=3>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</FONT></A><FONT size=3>"&gt;<BR>&lt;html xmlns="</FONT><A href="http://www.w3.org/1999/xhtml"><FONT size=3>http://www.w3.org/1999/xhtml</FONT></A><FONT size=3>"&gt;<BR>&lt;head&gt;<BR>&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;<BR>&lt;title&gt;Untitled Document&lt;/title&gt;<BR>&lt;style&gt;<BR>.outer {<BR>width:600px;<BR>background:#000;<BR>}<BR>.inner1 {<BR>float:left;<BR>width:200px;<BR>height:100px;<BR>margin:5px;<BR>background:red;<BR>}<BR>.inner2 {<BR>float:left;<BR>width:200px;<BR>height:100px;<BR>margin:5px;<BR>background:yellow;<BR>}<BR>&lt;/style&gt;<BR>&lt;/head&gt;<BR>&lt;body&gt;<BR>&lt;div class="outer"&gt;<BR>&lt;div class="inner1"&gt;&lt;/div&gt;<BR>&lt;div class="inner2"&gt;&lt;/div&gt;<BR>&lt;/div&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;<BR>上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：</FONT></DIV> <DIV><FONT size=3>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "</FONT><A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><FONT size=3>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</FONT></A><FONT size=3>"&gt;<BR>&lt;html xmlns="</FONT><A href="http://www.w3.org/1999/xhtml"><FONT size=3>http://www.w3.org/1999/xhtml</FONT></A><FONT size=3>"&gt;<BR>&lt;head&gt;<BR>&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;<BR>&lt;title&gt;Untitled Document&lt;/title&gt;<BR>&lt;style&gt;<BR>.outer {<BR>width:600px;<BR>background:#000;<BR>overflow:auto;<BR>}<BR>.inner1 {<BR>display:inline;<BR>float:left;<BR>width:200px;<BR>height:100px;<BR>margin:5px;<BR>background:red;<BR>}<BR>.inner2 {<BR>display:inline;<BR>float:left;<BR>width:200px;<BR>height:100px;<BR>margin:5px;<BR>background:yellow;<BR>}<BR>.clear {<BR>clear:both;<BR>}<BR>&lt;/style&gt;<BR>&lt;/head&gt; <BR>&lt;body&gt;<BR>&lt;div class="outer"&gt;<BR>&lt;div class="inner1"&gt;&lt;/div&gt;<BR>&lt;div class="inner2"&gt;&lt;/div&gt;<BR>&lt;div class="clear"&gt;&lt;/div&gt;<BR>&lt;/div&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;</FONT></DIV> <DIV><FONT size=3>因此，外层css要定义overflow属性，内层最后要加上clear属性。<BR>居中问题<BR>需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：<BR>你可以这样定义使它横向居中：</FONT></DIV> <DIV><FONT size=3>#wrap { <BR>width:760px; /* 修改为你的层的宽度 */ <BR>margin:0 auto; <BR>} <BR>但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：</FONT></DIV> <DIV><FONT size=3>#outer { <BR>text-align:center; <BR>} <BR>#wrap { <BR>width:760px; /* 修改为你的层的宽度 */ <BR>margin:0 auto; <BR>text-align:left; <BR>} <BR>第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。<BR>因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。</FONT></DIV> <DIV><A href="http://www.85flash.com/Get/css/2006-9-27/173154329.htm"></A>&nbsp;</DIV>]]> 星期四, 18 十月 2007 03:01:00 GMT http://blog.china.com:80/u/070905/75121/200710/1131953.html 2007-10-18T03:01:00Z http://blog.china.com:80/u/070905/75121/200710/1131943.html <![CDATA[ <DIV><FONT size=3>工作与网页制作有关，最近整理了一些css的东西，发出来，希望有用。</FONT></DIV> <DIV><FONT size=3>重用:<BR>经常会用到一些基本的式样叠加，比如字体的颜色和加粗。网页中可能同时出现三种情况：1.字体为红色&nbsp; 2.字体加粗 3.字体红色加粗<BR>这时我们只需要定义前两个css：<BR>.red{color:red;}<BR>.b{font-weight:bold;}<BR>第三种情况时用&lt;div class="red b"&gt;&lt;/div&gt;</FONT></DIV> <DIV><BR><FONT size=3>子选择器:<BR>相对来说，简化html文件的代码更加重要，因此在css中使用子选择器非常有益，同时也使css代码更加容易理解。比如下面的代码：<BR>&lt;div id="sub_nav"&gt; <BR>&lt;ul&gt; <BR>&lt;li&gt; &lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;&gt; <BR>&lt;li&gt; &lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt; <BR>&lt;li&gt; &lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;<BR>&lt;/ul&gt; <BR>&lt;/div&gt;<BR>如果div li a都有各自的式样,采用子选择器,可以省略代码中li 和a 的class属性，从而简化代码：<BR>#sub_nav { /* Some styling */ } <BR>#sub_nav li { /* Some styling */ } <BR>#sub_nav a { /* Some styling */ }<BR>组选择器：<BR>当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。 <BR>例如：定义所有标题的字体、颜色和margin，你可以这样写：<BR>h1,h2,h3,h4,h5,h6 { <BR>font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif; <BR>color:#333; <BR>margin:1em 0; <BR>} <BR>如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：<BR>h1 { font-size:2em; } <BR>h2 { font-size:1.6em; }<BR>重用、子选择器和组选择器的灵活使用可以非常有效的减少代码，同时非常有利的增加代码的可读性，具体的应用需要在具体编写过程中体会。</FONT></DIV> <DIV><A href="http://www.85flash.com/Get/css/2006-9-27/173154842.htm"></A>&nbsp;</DIV>]]> 星期四, 18 十月 2007 02:59:51 GMT http://blog.china.com:80/u/070905/75121/200710/1131943.html 2007-10-18T02:59:51Z http://blog.china.com:80/u/070905/75121/200710/1131935.html <![CDATA[ <DIV><FONT size=3>现在进行WEB重构的时候,一般我们做DIV 居中是这样:</FONT></DIV> <DIV><FONT size=3>body{<BR>margin:0px auto;<BR>text-align:center;<BR>}<BR>但是在没申明下面这句解析方法的时候,页面就会出错.不能居中对齐!</FONT></DIV> <DIV><FONT size=3>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "</FONT><A href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><FONT size=3>http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</FONT></A><FONT size=3>"&gt;<BR>为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗? 可是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.<BR>直到昨天,一个想法在我脑中闪了一下. 何不用JS来控制页面的边距?说干就干!<BR>找了个页面.添加了下面的一小段代码.</FONT></DIV> <DIV><FONT size=3>&lt;script language="javascript" type="text/javascript" src="function.js"&gt;&lt;/script&gt;<BR>function.js内容:<BR>if(window.screen.width&gt;800){document.write("&lt;style type=\"text/css\"&gt;body{margin-left:"+(window.screen.width-800)/2+"px}&lt;/style&gt;");}<BR>保存,测试. 哈哈,换了几个分辨率都可以正常居中!至此试验成功.<BR>总结一下:<BR>主要是这句代码起的作用:<BR>(window.screen.width-800)/2 //计算页面应该留出的边距数值.800为我的DIV宽度 + 滚动条宽度.实际应用改为你自己的大小.<BR>补充一点:上面这段JS 必须放在你的最后一个CSS连接或&lt;/style&gt;的后面.</FONT></DIV> <DIV><FONT size=3>欢迎大家到我的小站交流更好的实现方法</FONT></DIV> <DIV><A href="http://www.85flash.com/Get/css/2006-9-27/173154905.htm"></A>&nbsp;</DIV>]]> 星期四, 18 十月 2007 02:59:11 GMT http://blog.china.com:80/u/070905/75121/200710/1131935.html 2007-10-18T02:59:11Z