14th
JUL
彻底弄懂CSS盒子模式
Posted by 可乐 under 网页设计
如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。
理解CSS盒子模型
什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
CSS盒子模式
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。
由“盒子”堆出来的网页版面
现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。
转变我们的思路
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。
实现结构与表现分离
在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：
<p>加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。</p>
如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：
<p><font color=”#FF0000″ face=”宋体”>段落内容</font></p>
这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。
再直接列一段代码加深理解结构和表现相分离：
用CSS排版
<style type=”text/css”>
<!–
#photoList img{
height:80;
width:100;
margin:5px auto;
}
–>
</style> <div id=”photoList”>
<img src=”http://www.chaoketu.com/01.jpg” />
<img src=”http://www.chaoketu.com/02.jpg” />
<img src=”http://www.chaoketu.com/03.jpg” />
<img src=”http://www.chaoketu.com/04.jpg” />
<img src=”http://www.chaoketu.com/05.jpg” />
</div>
不用CSS排版
<img src=”http://www.chaoketu.com/01.jpg” width=”100″ height=”80″ align=”middle” />
<img src=”http://www.chaoketu.com/02.jpg” width=”100″ height=”80″ align=”middle” />
<img src=”http://www.chaoketu.com/03.jpg” width=”100″ height=”80″ align=”middle” />
<img src=”http://www.chaoketu.com/04.jpg” width=”100″ height=”80″ align=”middle” />
<img src=”http://www.chaoketu.com/05.jpg” width=”100″ height=”80″ align=”middle” />
第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。
演示地址：css1.html
用CSS排版减小网页文件体积
像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：
<style type=”text/css”>
<!–
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
–>
</style>
<div class=”mainBox”>
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class=”mainBox”>
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class=”mainBox”>
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class=”mainBox”>
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>
用CSS做导航栏也是轻而易举的事情，在本人之前发表的教程中其实也有一个简单的横向导航栏制作，那时只给出了样式代码并没有作太多的解释，这次要做一个相对复杂点的导航栏，为了加深大家对CSS盒子模式的理解，特别选做一个有多个盒子嵌套实现的导航栏。
先看实现原理动画演示：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /> <html xmlns=”http://www.w3.org/1999/xhtml”><br /> <head><br /> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><br /> <title>彻底弄懂CSS盒子模式(导航栏实例详解)</title><br /> <style type=”text/css”><br /> <!–<br /> * {<br /> margin: 0px;<br /> padding: 0px;<br /> }<br /> #nav {<br /> background: url(http://www.hsptc.com/cssImg/bj.jpg) repeat-y;<br /> width: 200px;<br /> overflow: hidden;<br /> }<br /> #nav li {<br /> background: url(http://www.hsptc.com/cssImg/mylan.gif) no-repeat left center ;<br /> height: 35px;<br /> width: 190px;<br /> padding-top:15px;<br /> }</p> <p>#nav a {<br /> background: url(http://www.hsptc.com/cssImg/lanbj2.gif) no-repeat left center;<br /> text-decoration: none;<br /> height: 20px;<br /> width: 155px;<br /> display: block;<br /> float: right;<br /> padding: 0px 0px 0px 5px;<br /> font-weight: bold;<br /> font-size: 9pt;<br /> line-height: 20px;<br /> color: #630;<br /> border-left:10px solid #f90;<br /> }</p> <p>#nav a:hover {<br /> background-image: url(http://www.hsptc.com/cssImg/lanbj3.gif);<br /> color: #FFFFFF;<br /> }<br /> –><br /> </style><br /> </head></p> <p><body><br /> <ul id=”nav”><br /> <li><br /> <a href=”http://www.chaoketu.com/#”>彻底弄懂CSS盒子模式1</a><br /> </li></p> <p> <li><br /> <a href=”http://www.chaoketu.com/#”>彻底弄懂CSS盒子模式2</a><br /> </li></p> <p> <li><br /> <a href=”http://www.chaoketu.com/#”>彻底弄懂CSS盒子模式3</a><br /> </li></p> <p> <li><br /> <a href=”http://www.chaoketu.com/#”>彻底弄懂CSS盒子模式4</a><br /> </li></p> <p> <li><br /> <a href=”http://www.chaoketu.com/#”>彻底弄懂CSS盒子模式5</a><br /> </li><br /> </ul><br /> </body><br /> </html>
14th
灵感包：百分之六十以上可用的、高雅的设计
Posted by 可乐 under 网页设计
原稿:http://www.smashingmagazine.com/ … ng-design-showcase/
我们都喜欢漂亮的、实用的和令人印象深刻的网页设计。为了达到这一点，网页开发者需要注意很多方面，归根到底就是一个问题，如何更好表达意图、使信息更易被理解。和谐的颜色搭配和实体排版技术一样重要。精确的可视化结构和直觉的导航是可用性和可到达的基础。事实上，大多数情况下，细节能给网站带来深远持久的影响力。
超过百分之六十的高雅、实用、令人印象深刻、颜色及排版好的网站的美感，都是基于优秀的信息表达方式的。它们的可用性基于提出资料的交流.那是使它们区别其它网站。
1. 31Three
2007-7-6 09:04
2. North x East
2007-7-6 09:04
2007-7-6 09:04
2007-7-6 09:04
5. CodeIgniter
2007-7-6 09:04
2007-7-6 09:04
7. Pop Labs
2007-7-6 09:04
8. nPanorama.ru
2007-7-6 09:04
2007-7-6 09:04
2007-7-6 09:04
11. Mike McFarlane Landscape Photography
2007-7-6 09:04
12. Pearsonified
2007-7-6 09:04
13. BitemMinistry
2007-7-6 09:04
14. html life
2007-7-6 09:04
15. Infected-FX
2007-7-6 09:04
16. Devlounge
2007-7-6 09:04
2007-7-6 09:04
2007-7-6 09:04
19. Infekta
2007-7-6 09:04
20. Stoodeo
2007-7-6 09:04
2007-7-6 09:04
22. Koder
2007-7-6 09:04
2007-7-6 09:04
24. WorkOne Central
2007-7-6 09:04
25. Rifidi | Software Defined RFID
2007-7-6 09:04
26. Pixel House
2007-7-6 09:04
27. ~ VEDA ~ Healthy Indian Takeout & Eatery
2007-7-6 09:04
28. Gaby Lopez
2007-7-6 09:04
29. Versions - Mac Subversion Client
2007-7-6 09:04
30. Ted Lermontov
2007-7-6 09:04
31. Pozycjonowanie INHEAD Krakow
2007-7-6 09:04
32. WorkHabit.org
2007-7-6 09:04
33. Sonze
2007-7-6 09:04
34. Corporate Image
2007-7-6 09:04
35. Frazier Media
2007-7-6 09:04
36. KellerAdv
2007-7-6 09:04
37. Made by Cocoon
2007-7-6 09:04
38. elan3.com
2007-7-6 09:04
39. Erratic Wisdom
2007-7-6 09:04
40. Design View / Andy Rutledge
2007-7-6 09:04
2007-7-6 09:04
2007-7-6 09:04
43. Pownce
2007-7-6 09:04
44. Waggener Edstrom Worldwide
2007-7-6 09:04
45. WallCandyArt
2007-7-6 09:04
艺术品
46. EMS | Matthew Soriano
2007-7-6 09:04
47. anixstudio.
2007-7-6 09:04
48. Blues Sklep
2007-7-6 09:04
49. plasq.com
2007-7-6 09:04
50. sr28 Web Design
2007-7-6 09:04
出色的设计
51. Warpspire
2007-7-6 09:04
52. MacZone
2007-7-6 09:04
2007-7-6 09:04
2007-7-6 09:04
55. Palm, Inc.
2007-7-6 09:04
56. Dion.nu Design
2007-7-6 09:04
2007-7-6 09:04
2007-7-6 09:04
59. Startup Search
2007-7-6 09:04
60. Footnote
2007-7-6 09:04
61. troovy
2007-7-6 09:04
2007-7-6 09:04
63. JoshLockhart.com
2007-7-6 09:04
Flash设计
64. Made by Mark Dearman
14th
轻松在线制作各种itemo标志
Posted by 可乐 under 网页设计
网上有很多提供在线按钮制作、文字标题制作、itemo制作服务的网站，它们可以非常方便了让大家轻松的获得效果出色的各类图标型的图片，下面就快来看看有哪些不错的网站能够做出精美的图标吧！
1.文字标签制作
网址：http://www.youmade.com/font
这是一个字体网站，它利用网站自身内丰富的字体库，提供了在线制作文字标签的服务，操作非常简单。打开这个网页，可以一目了然在线制作文字标签的功能。首先在“输入”对话框内输入文字标签的内容，例如“天极设计在线”。然后在上方的颜色库中挑选一个文字颜色，在页面下方的字体库中选择一款字体，选中的字体在输入框后面的“当前文字”位置会显示字体名称。选择好了后，点击“查看效果”按钮，等一会就能看到页面上方显示在线设计的字体标签图了（图1）。
如果要设计英文标签，在页面左边的字体栏中选择英文字体，用同样的方法制作英文标签就是了（图2）。最后可以选择“下载Gif”按钮把做好的文字标签保存到本地，如果你感觉选择的这款字体不错打算收藏，可以根据字体名称去字体下载站点下载字体哦！。
2.网页标题文字
网页标题梦工厂 地址：http://jack.asprise.net/software/imggen/generate.php
上面介绍的文字标签在线制作工具只能把做好的图片保存到本地而不能直接在线引用，“网页标题梦工厂”提供的在线文字标签制作服务可以把做好的文字加上代码直接在网页上套用，这样网友们制作论坛签名、博客标题后就能马上使用，不需要先把图片保存到本地然后上传到网络相册后再引用那么多此一举了。
在网页标题梦工场页面“请输入标题”对话框中输入标题文字内容，然后在选择字体选项旁点击“使用预览选择器”链接打开字体选择对话框，网页标题梦工厂提供了几十种风格的字体，支持中英文，大家用鼠标操作从中挑选一个自己喜欢的字体应用即可（图3）。
接下来再设计一下文字的颜色、大小、标题图片背景的颜色，点击“生成图像”按钮，稍等一会就能看到自己设计的网页标题图标了。要获取文字标签的Html代码，选择页面中“点击这里将以上标题图片放入你自己的网页”的链接打开Html代码窗口就能看到代码了（图4）。
3.itemo风格文字在线制作
地址：http://sherlocco.com/create.asp
如果你想自己的网页文字标题图片的样子与Google、可口可乐、哈里波特、指环王等“大腕”的样子一样，那就就到国外的在线itemo制作站点去体现一下了。国外站点只适用于英文标题的制作，在文字输入框输入英文“Yesky Design”，然后在网页下方选择一个“大腕”的itemo，例如哈里波特的itemo（图5）。
点击“Creat my Search Engine”按钮进入下一页就能看到哈里波特的风格的“Yesky Design”itemo图片了（图6）。
4.Web2.0风格的文字标签
地址：http://h-master.net/web2.0/
看到具有Web2.0风格的网页itemo，或许你会惊叹于设计师们怎么能用简单的素材把网页itemo做得那么好看呢？其实自己制作这种风格的文字itemo一点都不困难。打开“Web2.0 itemo Create”网页，输入英文标题文字，再选择一下是否需要倒影（Add Reflection）和Beta图标（）（图7）。
点击“Creat”按钮就能得到自己的Web2.0英文标签图片了，同时自己还可以拷贝Html代码把它引到博客、论坛签名和网页上（图8）。
5.RSS风格图标
RSS Graphic Tool 地址：http://www.feedforall.com/public/rss-graphic-tool.htm
如果你喜欢RSS风格小巧间接的图标样式，可以在Feedforall网站自己DIY一个类似的图标。在“Left Side Text”和“Right Side Text”中分别输入左右两边的图标上的英文内容，然后再使用“Font Color”与“Background Color”工具设计文字的颜色和背景颜色。“Bar Position”可以设置中间分隔线的位置。最后点击“Build Button”按钮生成RSS风格的图标（图9）。
6.论坛签名图标
到论坛逛一圈除了能找到自己感兴趣的内容，还看到不少非常漂亮别具一格的论坛签名，看到别人都把论坛签名做得那么出彩，自己也想拥有一个好看的签名，那么就去爱狗狗网站快速定制一个特别的文字签名吧。在爱狗狗的首页“在此输入”位置输入自己签名的内容，例如“天极设计在线”，在页面下方选择签名的样式，例如“李宇春”，点击“生成狗话连篇”按钮就能马上得到一个李宇春样式的签名图片哦（图10）！
12th
JUL
我需要这样一个男人。
Posted by 可乐 under 那点屁事
她说：我需要这样一个男人
*有点害羞，但曾在分别的街头，大声说我爱你。
*同我去庙里求签，轻轻捉住我的手一同跪下。
*言而有信。
*从来不迟到–我迟到他不生气。
*拥抱很久、很紧–每次我起身时几乎是需要慢慢推开他。
*睡得比我迟一点，醒来早一点。
*朦胧醒来轻呼我的名字–没有呼错。
*记得我的日期、鞋号、密码、最怕的事。
*我很怕虫子，见到虫子大声尖叫他不会笑我。
*雨后的早晨我去花园，用小树枝爬到路上来的蚯蚓送还草地–他在一边帮我。
*笑起来很像个坏蛋–其实不是。
*不舒服时，请假带我去看医生，回来路上买冰淇淋做奖励。
*开车绝不喝酒，让我系上安全带。
*帮我做家务，每天。边做边聊天。
*常常帮助别人，不为什么。
*答应我：永远不。然后永远不。
*一边吹口哨一边修马桶。
*说：希望你是我的女儿。
*白煮蛋的黄可以给他吃。
*雨天散步，背我过积水，说：你还可以再胖一些啊。
*吵嘴时不会一走了之。
*错了会认错。
*阅读女士脱毛器的说明书然后教我。
*我说笑话他笑。
*逛街时我看中同一款式三种颜色的裙子，他说：都试一遍好了。
*试鞋时，他把我的卡通袜叠叠塞进上衣口袋。
*常常说，有我呢。
*事情过了才告诉我，轻描淡写。
*指甲整齐干净，喜欢我替他剪指甲。
*我做的菜他每样都爱吃，要求明天再做。
*小孩子都喜欢他，常常在楼下玩一裤子泥回来。
*轻轻拧开我拧不开的汽水瓶。
*忙时给我订机票，让我带父母一起出去玩。
*告诉我–24小时随时打电话。
*告诉我–不要省钱。
*去义务献血，回来笑嘻嘻掏出一块“福利饼干”给我尝。
*偷偷买一件两人合穿的雨衣放在车上。
*我喜欢赤脚，他在副驾驶位脚下铺一小块羊绒毯。
*留言时画一个小老虎头当签名。
*偶尔叫我妈妈。
*说谎时结巴。
*与人争论听上去像是解释。
*教我滑旱冰，扶着我跑了快一千公里。
*从不上网聊天。
*他的秘书说帮他缝上脱落的纽扣，他说谢谢，不用。
*送我的花是盆花，替我浇水。
*和我下棋，允许我悔棋。
*他其实很早就对他的父母说起我??
*喜欢运动，带我去招待女宾俱乐部。
*穿十年前的牛仔裤仍然合身。
*他养了一条大狗，他的狗喜欢我。
*吵嘴时我要他还我送给他的维尼熊，他坚决不还。
*我不辨方向，他体内有指南针，说–跟牢我。
*吃我吃剩的东西。
*我失眠时他陪我聊天。
*用双肘和膝部支撑体重??
*她以前的女友有困难会来找他。没有困难则不会。
*手上有一道伤–和几个小流氓打架时捏住对方的刀，我警告他下次不要这样了，他点头一笑不答。
*我洗澡时他拿了本杂志近来坐在马桶上看。
*比我高，我取不到的东西让他取。
*重大的事情和我商量，比如明年的投资计划、周末野餐带不带烧烤架，晚饭吃大白菜还是小白菜。
*站在商店的洗手间外面等我。
*我感冒了，他还是会用我的杯
12th
被收拾了吧！
Posted by 可乐 under 网页设计
昨天下午把上一个模版DIV+CSS化了~
具体代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.chaoketu.com/http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”http://www.chaoketu.com/Content-Type” content=”text/html; charset=gb2312″ />
<title>真自我</title>
<link href=”http://www.chaoketu.com/../../skin/kele/css.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”Header”></div>
<div id=”Headerjoining”></div>
<div id=”Headercontent”>
<div id=”placard”>$show_subject_l$</div>
</div>
<div id=”Mainbodyleft”>
<EMBED src=/Plus/MyMediaPlayer/mediaplayer.swf width=200 height=600 type=application/x-shockwave-flash flashvars=”http://www.chaoketu.com/&displayheight=180&file=/Plus/MyMediaPlayer/playlist/5.xml&height=600&width=200&autostart=false;overstretch=fit” allowfullscreen=”true” wmode=”transparent”>
<div id=”lefttop”>New Bitem | 日 志</div>
<div class=”list”>$show_newbitem$</div>
<div class=”title”>New Reply | 回 复</div>
<div class=”list”>$show_comment$</div>
<div class=”title”>New message | 留 言</div>
<div class=”list”>$show_newmessage$</div>
<div class=”title”>User itemin | 登 陆</div>
<div align=center>$show_itemin$</div>
<div class=”title”>Bitem Info | 信 息</div>
<div class=”list”>$show_info$</div>
<div class=”title”>My Links | 连 接</div>
<div class=”list”>$show_links$</div>
<div align=center>$show_xml$</div>
</div>
<div id=”Mainbodyright”>$show_item$</div>
<div id=”Footer”></div>
</body>
</html>
CSS部分
/* ==================================== CSS by kele5240 ==================================== */
/* ==================================== 全局设置 ==================================== */
html { height: 100%; }
body { margin: 0; padding: 0; height: 100%; background: #fff; font-size: 12px; font-family: tahoma,Arial,Century Gothic,verdana,Helvetica,sans-serif; color: #000; line-height: 150%; text-align: center; word-break: break-all; }
div,ul,ol,form { margin: 0; padding: 0; }
img { border: 0; }
li { list-style: none; }
table { font-size: 12px; }
input { font-family: tahoma,Arial,Helvetica,sans-serif; font-size: 12px; }
/* ==================================== 连接属性 ==================================== */
a:link{ text-decoration: none; color: #fff; }
a:visited { text-decoration: none; color: #fff; }
a:hover { text-decoration: underline; color: #fff; }
a:active { text-decoration: underline; color: #fff; }
/* ==================================== 常用设置 ==================================== */
.clear { clear: both; }
/* ==================================== 布局分配 ==================================== */
/* ———————————– #Container — */
/* ———————————– #Header– */
#Header { margin: 0 0 0 192px;height: 122px; background: #fff url(../images/header.png) no-repeat left top; }
#Headerjoining { margin:0 0 0 484px; height: 48px; width: 64px; background: #fff url(../images/Headerjoining.png) no-repeat left top; }
#Headercontent { margin:0 0 0 226px; height: 93px; width: 775px; background: #fff url(../images/Headercontent.png) no-repeat left top; font-size: 12px;}
#placard { padding:45px 15px 10px 50px; }
/* ———————————– #Mainbody– */
#Mainbodyleft { float:left;width: 192px; overflow:hidden; text-align: left; }
#lefttop { width: 192px;height: 40px;background: #fff top center;0px;font-size: 14px;padding:0px 0px 0px 30px;}
.title { background: #fff top center;font-size: 14px;padding:0px 0px 3px 30px;}
.list { background: #fff top center;font-size: 12px;padding:0px 0px 3px 15px;}
#Mainbodyright { margin:0 0 0 228px;padding:5px 25px 10px 50px;overflow:hidden; background: #fff url(../images/Mainbg.png) repeat left top; }
.topic { height: 50px; margin: 0 0 0 15px; padding: 5px 0 0 50px; background: url(../images/bg.gif) no-repeat left top;font-size: 16px; font-weight: 600; font-family:tahoma; color: #95BA2E; }
.iteminfo { margin: -25px 0 0 70px; color: #627388; }
.itemtext { padding: 20px 0 20px 65px; }
.itemtext table tr td { line-height: 1.8; font-size: 14px; }
.more { margin: 0 40px 20px 80px; padding: 0 0 13px 0; background: url(more.png) repeat-x left bottom; text-align: right; }
/* ———————————– #Footer– */
#Footer { margin: 0 0 0 192px;height: 89px; background: #fff url(../images/Footer.png) no-repeat left top; }
/* ==================================== 其他 ==================================== */
div.quote { margin:20px auto auto auto; padding:5px 10px 10px 20px; background: #1A1E25; border:none; border-top:1px #3B495A solid; border-bottom:1px #3B495A solid;color: #A4AFBD; }
#obitem_ubb div#obitem_ubbemot { margin: -110px 0 0 -60px; }/* 编辑器表情层 */
#moreitem,#form_comment { padding: 0 0 0 60px; }
算是做个备份。不过还有一些不满意的地方需要修改，继续努力~
9th
JUL
转原来Bitem上的一些文字
Posted by 可乐 under 那点屁事
无意见翻到中学的一个本子，上面乱七八糟的写了很多东西
有名人名言，有学习方法，有黑客成果（现在看来如同狗屁）……
有一篇文字觉得很好，打出来看看~HOHO
慈父家训
跟人讲话时正视对方的眼睛。
对人多说一声“谢谢”。
对人多说一声“劳驾”。
量人为出。
己所欲，施诸人。
每年捐血两次。
结交新朋友，但珍惜旧朋友。
严守秘密。
学艺就老老实实去学，切勿浪费时间去学其中的花招。
承认错误。
要勇敢。即使你不是勇敢的人，也要装出勇敢的样子，没有人能分辨真假的。
选定某个慈善机构，出钱出力支持它。永远不要为了可以赊帐用信用卡，只有在信用卡能给你方便时才使用。
永远不欺诈。永远不要使别人失去希望；他所有的可能就只是希望。
学会谛听。机会叩门有时候是很轻的。
不要祈求上天赐你身外物，要祈求智慧和勇气。
愤怒时切勿行动。
保持良好姿态。踏进任何房间时，都要昂首阔步，充满自信。
不要在电梯了谈公事，你永远不知道站在旁边的人是否在偷听。
在完工之前，切勿付钱给人。
要赢得战争，不妨打一次败仗。
不要飞短流长。
当心那些已没有什么可输的人。
执行艰巨任务时，要表现得好像只许胜，不许败。
切勿期望人生的公平。