可是好不容易把blogger搞熟，如今要换成wordpress。心中难免不舍，考虑再三还是决定无奈的挪窝。在现实中，从小到大搬了十来次家，发现blog挪窝与现实中的搬家十分的相近，都是要从熟悉之地搬到生疏之处，与原来的朋友分离，在新鲜中体味着孤独。

经过近一星期的努力，基本完成了wordpress的安装、修改和数据迁移。经过一星期的接触发现wordpress在一些地方确实要优于blogger。首先，个人感觉最明显的就是在wp的主题，wp的主题不但多，而且规范。相比之下，blogger的主题就像是山寨货，参差不齐、不成规模。其次，是在自由度方面，由于是独立blog在自由度方面也大大优于blogger，更易于管理。

考虑再三后决定把”chiidea.com“的域名指向新的blog，而原来在blogger上的blog为了防止因重复文章被搜索引擎降级，将其设置为不被搜索引擎收入。原来的feedburned地址也改为指向新的部落格。自此，小博搬迁工作基本完成但是由于主机在国外，所以国内对新博的访问有时会出现问题。这个本人实在是无力解决了。

其实，只想是想找个地方随便写些，分享些东西没想到竟然如此困难。中国对网络的限制越来越多、越来越严，政府借口将其归结为扫除不良信息。何谓不良信息，就因google的搜索联想有些色彩，然后请了一些小朋友高喊“很黄，很暴力”，就将其纳入不良网站，那将充满想象力的百度置于何处。在这短短半年，无数爆料，网络新词层出不穷，网络发挥了它舆论监督的重要作用，或许这正是一些人不愿意看到的。前几日，又见新词“被强奸”，这个“被”强奸杀人者，最终被判无罪。评判是否公正我没有发言权。不少人认为其身为公务员因为人民服务，应有舍己为人的高尚品质，我觉得这种批评不够恰当。因为，如今在公务员乃至党员的选拔中，根本没有什么是对选拔者的为人品质进行实质要求，考核的更多是成绩和关系。如此选拔凭什么要求这些人为人民服务，更不要说是舍己为人了。

相关文章:

1. 写给自己和翻墙而来的朋友
2. 使用blogger的beta版
3. 关于近期blog的变动及说明
4. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
5. Google四年了啥也没变？

来此的朋友可能已经发现blog的域名改为了’chiidea.com’。原本就有买个域名的想法，只是先前觉得善后之事颇有些繁琐，故一直没有付诸于行动。借此事之力终于决心买下了这个域名，并通过修改A记录，暂时绕过了大墙，让没有翻墙的朋友也能来到这。但由于’.blogger.com’依然在大墙之外，所以一些功能无法正常的使用。例如：若需要在文章内留言就必须使用代理或者vpn、google friend connect不能正常显示、有时网页载入较慢等等。这些缺陷大都是由于需要再次调用地址含有’.blogspot.com’的墙外资源，所以若需要获得最佳浏览效果依然建议使用代理。

顺便说说这次的河蟹吧。其实本blog一向都很和谐，对我的和谐毫无意义，之所以沾上了光，全因为在一些人看来.blogger.com有些不太和谐。于是最简单的方法便是一刀切。于是不少人也遇到了和我一样很无助地被赶到了墙外。让人费力翻墙来看一个如此和谐的网站不知是否会有一些失落之感。不过，现在通过换域名的方式让blog重见天日，这种方法纵然含有些许迫不得已的意味，但我觉得这也是对这种情况的一种积极的应对方式（至少我觉得如此）。

看了些同样被墙的blog，有些blogger就拒绝以这种改域名方式来复苏blog，觉得这是种铭记的方式，他们选择在大墙之外呐喊。虽然，我敬佩于他们的坚持，敬佩于他们的执着。但是我却不支持他们的做法。看过季羡林老先生写的《隔膜》，其中有两段话：
鲁迅先生曾写过关于“隔膜”的文章，有些人是熟悉的。鲁迅的“隔膜”，同我们平常使用的这个词儿的含义不完全一样。我们平常所谓“隔膜”是指“情意不相通，彼此不了解”。鲁迅的“隔膜”是单方面的以主观愿望或猜度去了解对方，去要求对方。这样做，鲜有不碰钉子者。
什么叫“正义”？韩文公说：“行而宜之之谓义。”可是“宜之”的标准是因个人而异的，因民族而异的，因国家而异的，因立场不同而异的。不懂这个道理，就是“隔膜”。


纵然，我们是在理的，但是如今的情况，光凭在墙外的呐喊，就是去碰钉子。和谐之事非个人所为，甚至可以认为是一种国家行为，在其看来此法便是“宜之”，因此她无需解释，更不会为此改变什么。

如今，和谐之事大势盛行，懂翻墙术之人在广大网民中占极少数（不然高墙也就没有意义了），而且此况短期之内是不会改变的。显然希望别人翻墙而来，又是一“隔膜”。就算别人翻墙而来，呐喊也失去了其最大的意义。翻墙之人大都已明其中之原由，而墙内人依然一无所知。这不正是一些“人”愿意看到的吗？

所以要做的应该是去墙内呐喊，让你的呼声为大家所知。我觉得这不是逃避，而是一种积极的应对。一方面让更多的人了解现状，更重要的是让大墙知道我们不是那么容易被墙住的。

相关文章:

1. 使用blogger的beta版
2. 添加管理widget
3. 存档/标签页仅显示标题及小改进
4. 写给自己和翻墙而来的朋友
5. 无奈的挪窝

相关文章:

1. 无奈的挪窝
2. 十步学会用css建站——第二步：创建html模板及文件目录等；
3. 十步学会用css建站——第一步：规划网站，本教程将以图示为例构建网站；
4. 十步学会用css建站——第三步：将网站分为五个div，网页基本布局的基础;
5. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；

我一直觉得picasa是一个十分优秀的网络相册，用过一些其它空间来存储图片，最后依旧钟爱picasa。原因除了有google的信誉保证外，它上传下载速度以及管理方式也都令我十分的满意。我的blog中所有的图象都是存储于这个网络相册的。但是有一唯一不满的就是部提供直接的外链。这使得有时十分不便，只得通过一些间接的方式获得直链。

不过，似乎google是一个十分善于发现确定并积极改进的团队。近日登上picasa惊喜的发现，picasa终于可以提供直链了。使用方法就是将上图中的”image only(no link)”这一选项选上后，”Embed image”中所提供的链接就是图片的直链了。有兴趣的朋友赶快去试试这项新功能吧。不过在google提供的各种服务中，似乎中文界面的功能永远都要慢于英文界面。所以，要用此功能要先将语言设置为英文，在中文界面下暂时还无法使用此功能。

相关文章:

1. 让picasa乖乖地提供直接外链
2. 为chrome添加扩展程序(Extensions)（12月17日更新”goo.gl shortener”）
3. 解决使用无线网络时总是掉线的问题
4. 新笔记本蓝屏问题
5. 十步学会用css建站——第八步：页脚信息(版权等)的表现设置:

相关文章:

1. 使用blogger的beta版
2. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
3. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；
4. 十步学会用css建站——第九步：导航条的制作(较难)：
5. 存档/标签页仅显示标题及小改进

如果只是要做成文字链接形式的十分容易，只要在页面元素中添加一个链接列表。将想要设的快捷键的名字作为标题，如：控制台、新建帖子等。网址就用相应的链接。以下是几组常用的“快捷键”及其相应链接：

其中#####代表blogger的id，进入后台后就可以在地址栏中看到。
当然你要是觉得文本链接不够美观，也可用图标来代替文字，就像我的一样。
基本的代码如下:

相关文章:

1. 存档/标签页仅显示标题及小改进
2. 使用blogger的beta版
3. 关于近期blog的变动及说明
4. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
5. blogger导航栏的制作

相关文章:

1. 添加管理widget
2. 存档/标签页仅显示标题及小改进
3. blogger导航栏的制作
4. 十步学会用css建站
5. 使用blogger的beta版

相关文章:

1. blogger导航栏的制作
2. 十步学会用css建站——第八步：页脚信息(版权等)的表现设置:
3. f8驱动更新——synaptics定点装置
4. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
5. 使用blogger的beta版

相关文章:

1. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
2. 十步学会用css建站——第二步：创建html模板及文件目录等；
3. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；
4. 十步学会用css建站——第九步：导航条的制作(较难)：
5. 十步学会用css建站——第十步：解决IE浏览器的显示BUG：

相关文章:

1. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
2. 十步学会用css建站——第九步：导航条的制作(较难)：
3. 十步学会用css建站——第八步：页脚信息(版权等)的表现设置:
4. 十步学会用css建站——第三步：将网站分为五个div，网页基本布局的基础;
5. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；

接下来进入css代码部分，先往css文件中写入：
/* Main Navigation */
#main-nav { height: 50px; }
#main-nav ul { list-style:none; margin: 0; padding: 0; } 注意：/* Main Navigation */为增加css文件可读性的说明，不会影响表现。
#main-nav的height属性定义了main-nav层的高度；”#main-nav ul” 则定义main-nav层中列表的属性，在这里先定义其margin和padding为0。
根据先前的设计，导航条应该和左边有一定的距离，这就需要设置main-nav层的左边距(padding-left)为11px,但由于IE5和Mac浏览器的BUG，需要加入以下代码：
/* IE5 Mac Hack \*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */ 现在你可以看到导航列表距左边有11px的距离，但是列表项目是竖排的，将<li>，即列表项目向左对齐就能使其从左到右横向排列：
#main-nav li { float: left; }为了使列表项目的尺寸和容纳它的层保持一致，并利用浮动属性使列表项目的文本隐藏，写入：
#main-nav li a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}接着，要实现当光标悬停于列表项目上时，显示背景图片的中部，因此需要将背景图片向上移动50px，写入：
#main-nav li a:hover {
background-position: 0 -50px;
}给各个列表项目设置宽度和背景图片的路径：
#main-nav li#about,
#main-nav li#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(../images/nav/services.gif); }
#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }最后我们要做的就是，当列表项目被选时，显示背景图片的下部。为此我们需要增加一些css代码对原有的css表现作一些修改：
body.about li#about,
body.about li#about a,
body.services li#services,
body.services li#services a,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.contact li#contact,
body.contact li#contact a {
background-position: 0 -100px;
}以上看似庞大的css选择器可以识别body标签的类(class)，如html中为：
以上css选择器就让li#about,li#about a,的背景向上移动100px，使其显示背景图片的下部。
如果我们希望网站头部背景图片也根据body标签的类进行变换，就需修改css的#header为：
body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg); }至此就完成了”About”网页的制作,依此类推，修改html中body的类为services/portfolio/contact制作相应html文件并分别保存。
在css文件中添加各个网页相应的头部背景图片路径(如services网页的头部背景图片为services.jpg,在css中添加如下代码)：
body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg); }然后用超级链接将这些网页连接起来，就组成了一个小网站了。

相关文章:

1. 十步学会用css建站——第十步：解决IE浏览器的显示BUG：
2. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
3. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；
4. 十步学会用css建站——第七步：网站头部图标与logo部分的设计；
5. 十步学会用css建站——第三步：将网站分为五个div，网页基本布局的基础;

接着我们需要设置存在链接的文本的显示，在这我们没有改变文本的颜色(仍然为#c9c9c9)，而只是让下划线消失：

但是我们想让那些存在链接的文本，在鼠标悬停在其上方时变色为#db6d16：
然后我们想给页脚加上灰色的上边框，在footer层的四周设置一些间隙，并加大文本的行距：

最后我们需要做的就是让副导航层(#altnav)向右浮动，需要指出的是，浮动层是必须设置宽度(width)才能正常浮动的，所以我们把#altnav的宽度设置为350px，略宽于文本的长度(为了让副标题的文字显示完全)，然后让文本向右对齐：

如果你按照以上方法，将得到如下图所示的页脚样式(点击看大图)：

相关文章:

1. 十步学会用css建站——第三步：将网站分为五个div，网页基本布局的基础;
2. 十步学会用css建站——第十步：解决IE浏览器的显示BUG：
3. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
4. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；
5. 十步学会用css建站——第二步：创建html模板及文件目录等；

我们使用的背景属性为一些简写的属性名，用其能规定背景的颜色，图案，图案的位置，是否重复以及如何重复。之所以把背景色设为桔黄色，是因为当用户使浏览器屏蔽图片时，网站的头部不会变的一片空白。应该注意到图片的路径是相对于css的存放位置而言的，而不是html文件，因此有”../”。
接着替换掉<h1></h1>标签里的”Enlighten Designs”:
<div id="header"> <h1><img src="images/general/logo_enlighten.gif" width="236" height="36" alt="Enlighten Designs" border="0" /></h1> </div>
logo_enlighten图片浮在头部的左上方，我们需要设置<h1>的属性值为：
h1 { margin: 0;padding: 0; float: right; margin-top: 57px; padding-right: 31px; }
这样我们使存在于<h1>层的图片向右浮动，并且上边距(margin-top)为57px，右间隙(padding-right)为31px，如下图所示(点击看大图)：

注意：细心的你可能会发现我们使用了padding-right而不是margin-right，这是因为IE的怪毛病不少，它会在不定的地方无法正确显示margin-right/left属性，所以使用了padding(间隙,Dreamweaver中又被称为填充)属性。

相关文章:

1. 十步学会用css建站——第九步：导航条的制作(较难)：
2. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
3. 十步学会用css建站——第十步：解决IE浏览器的显示BUG：
4. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；
5. 十步学会用css建站——第一步：规划网站，本教程将以图示为例构建网站；

你可以看到内容(content)的各块(block)之间的间隙太小了，而基于最初的设计，内容标题(即<h2>)和正文之间的间隙大概是15px，每个段落的间距也大概是15px，所以在css中写入：
#content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; }
然后需要让content层的四周都空出25px的间隙，这本来是件很简单的事，理论上我们只需在#content的css文件中加入padding: 25px;就行了，但是IE给我们上了”一课”,它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁，所以我们用另一种办法。
我们往需要填充的层中加入padding层，它的功能仅限于显示间隙：
<div id="sidebar-a"><div class="padding"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div> </div>
同样的，再往html文件的content层中加入padding层。
由于padding层的功能仅是制造空隙，所以不要设置它的宽度，只需在css中添加:
#sidebar-a { float: right; width: 280px; } #sidebar-a .padding { padding: 25px; } #content { margin-right: 280px; } #content .padding { padding: 25px; }
就像我们之前用的方法一样，我们只选择了类(class)为padding，且父类(parent)为#content或#sidebar-a的元素(element)。
接下来设置行距，content和sidebar-a的行距需要加宽，但在css中是没有行距(leading)这种属性(attribute)的，但是有行高(line-height)属性，因此往css中写入：
#sidebar-a { float: right; width: 280px; line-height: 18px; } #content { margin-right: 280px; line-height: 18px; }<br />

<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2> <h2> <img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /> </h2>
于是得到下图(点击看大图)：

相关文章:

1. 十步学会用css建站——第四步：网页布局与div浮动等；
2. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；
3. 十步学会用css建站——第十步：解决IE浏览器的显示BUG：
4. 十步学会用css建站——第八步：页脚信息(版权等)的表现设置:
5. 十步学会用css建站——第三步：将网站分为五个div，网页基本布局的基础;

第五步主要介绍除网页主要框架之外的附加结构的表现(Layout),包括以下内容:
1.主导航条；
2.标题(heading),包括网站名和内容标题；
3.内容；
4.页脚信息,包括版权,认证,副导航条(可选)。
加入这些结构时，为了不破坏原有框架，我们需要在css文件”body”标签(TAG)后加入:.hidden {display: none;}
“.hidden”即我们加入的类(class),这个类可以使页面上任意属于hidden类的元素(element)不显示。这些会在稍后使用，现在请暂时忘记它。
现在我们加入标题(heading):

先回到HTML的代码，<h1>到<h6>是我们常用的html标题代码。比如我们一般用<h1>网站名</h1>，<h2>网站副标题</h2>,<h3>内容主标题</h3>等。我们往html文件的Header层(Div)加入:
<div id="header"><h1>Enlighten Designs</h1></div>
刷新一下页面，你就可以看到巨大的标题，和标题周围的空白，这是因为<h1>标签的默认大小和边距(margin)造成的，先要消除这些空白,需要加入：
h1 {margin: 0;padding: 0;}
接下来是导航条：
控制导航条表现的css代码相对比较复杂，我们将在第九步或是第十步中详细介绍。现在html文件加入导航代码：
<div id="main-nav"><ul><li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li><li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li><li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li><li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li></ul></div>
(注：原教程使用了dl和dt，jorux在这使用了更常用的ul和li标签)
目前导航条的表现比较糟糕，但是要在以后的教程中介绍其特殊表现，故需要暂时隐藏导航条,于是加入：
<div id="main-nav"><ul class="hidden"><li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li><li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li><li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li><li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li></ul></div>
我们跳一步，先到页脚：
页脚包括两部分：左边的版权,认证和右边的副导航条。
我们先要让副导航条向右浮动，就像之前处理Sidebar和Content关系的一样，需要加入一个新的层(div):
<div id="footer"><div id="altnav"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a> - <a href="http://css.jorux.com/wp-admin/post.php#" >Services</a> - <a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a> - <a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a> -<a href="http://css.jorux.com/wp-admin/post.php#" >Terms of Trade</a></div></div>
理论上，我们可以控制源文件上的任意元素的浮动，但由于IE浏览器的BUG，被浮动层需要首先出现在源文件上，也就是说我们把副标题放在版权和认证的前面：
<div id="footer"><div id="altnav"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a> - <a href="http://css.jorux.com/wp-admin/post.php#" >Services</a> - <a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a> - <a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a> - <a href="http://css.jorux.com/wp-admin/post.php#" >of Trade</a></div>Copyright © Enlighten DesignsPowered by <a href="http://www.enlightenhosting.com/" >Enlighten Hosting</a> and<a href="http://www.vadmin.co.nz/" >Vadmin 3.0 CMS</a></div>
刷新你的页面，你将看到如下所示(点击看大图)：

最后我们回到内容部分：用<h2<>表现内容标题–”About”,”Contact us”；用<p>表现段落；用</br>断行。
<div id="content"><h2>About</h2><p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p><p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p><h2>Contact Us</h2><p>Phone: (07) 853 6060<br />Fax: (07) 853 6060<br />Email: <a href="mailto:info@enlighten.co.nz" >info@enlighten.co.nz</a><br />P.O Box: 14159, Hamilton, New Zealand</p><p><a href="http://css.jorux.com/wp-admin/post.php#" >More contact information…</a></p></div>
刷新页面可以看到在Content层中又出现一些空白，这是由于<h2><p>标签的默认边距(margin)造成的，我们必须消除这些恼人的空白，当又不想把网页中所有的<h2><p>标签地边距都设为0，这就需要使用css的子选择器(“child css selector”),在html的文件结构中，我们想控制的<h2><p>标签(child)是属于#content层(parent)的,因此在css文件中写入： #content h2 {margin: 0;padding: 0;}#content p {margin: 0;padding: 0;}
这样我们就告诉浏览器，仅仅是隶属于content层的<h2><p>标签的margin和padding的值为0！

相关文章:

1. 十步学会用css建站——第十步：解决IE浏览器的显示BUG：
2. 十步学会用css建站——第九步：导航条的制作(较难)：
3. 十步学会用css建站——第七步：网站头部图标与logo部分的设计；
4. 十步学会用css建站
5. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；

但是你可以看到主要内容的盒子占据了整个page-container的宽度，我们需要将#content的右边界设为280px。以使其不和边框发生冲突。
css代码如下：
#content {margin-right: 280px;background: green;}
同时往边框里写入一些文字。在html文件中写入： <div id="sidebar-a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div>
表现如下：

因此我们往css中写入：

#footer {clear: both;background: orange;height: 66px;}
表现如下：

相关文章:

1. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；
2. 十步学会用css建站——第三步：将网站分为五个div，网页基本布局的基础;
3. 十步学会用css建站——第二步：创建html模板及文件目录等；
4. 十步学会用css建站——第九步：导航条的制作(较难)：
5. 十步学会用css建站——第七步：网站头部图标与logo部分的设计；

#main-nav {background: red;height: 50px;}#header {background: blue;height: 150px;}#sidebar-a {background: darkgreen;}#content {background: green;}#footer {background: orange;height: 66px;}
表现如下：

相关文章:

1. 十步学会用css建站——第一步：规划网站，本教程将以图示为例构建网站；
2. 十步学会用css建站——第四步：网页布局与div浮动等；
3. 十步学会用css建站——第八步：页脚信息(版权等)的表现设置:
4. 十步学会用css建站——第九步：导航条的制作(较难)：
5. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；

2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。

在html文件的和之间写入

<div id="page-container">Hello world.</div>

创建css文件，命名为master.css,保存在/css/文件夹下。写入：

#page-container {width: 760px;background: red;}

控制html的id为page-container的盒子的宽为760px，背景为红色。表现如下：

现在为了让盒子居中，写入margin: auto;，使css文件为：

#page-container {width: 760px;margin: auto;background: red;}

现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：

html, body {margin: 0;padding: 0;}

相关文章:

1. 十步学会用css建站——第十步：解决IE浏览器的显示BUG：
2. 十步学会用css建站——第一步：规划网站，本教程将以图示为例构建网站；
3. 十步学会用css建站——第三步：将网站分为五个div，网页基本布局的基础;
4. 十步学会用css建站——第九步：导航条的制作(较难)：
5. 十步学会用css建站——第六步：页面内的基本文本的样式(css)设置；

写在之前：这几天在学习css过程中发现了很多很好的教程类的文章，有一个叫作《十步学会用css建站》。虽然讲的是建站，与修改blogger的修改html略有不同，但是对学习css很有帮助，相信对想修改blogger模板的朋友也能起不少的作用。在jorux.com的网站中还有一些列的css基础教程我觉得也写得很好，有兴趣的朋友可以自己去看。

1.规划网站，本教程将以下图为例构建网站。

点击看大图
其基本布局见下图：

点击看大图
主要由五个部分构成：
1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px
2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px
3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px

相关文章:

1. 十步学会用css建站——第三步：将网站分为五个div，网页基本布局的基础;
2. 十步学会用css建站——第九步：导航条的制作(较难)：
3. 十步学会用css建站——第七步：网站头部图标与logo部分的设计；
4. 十步学会用css建站——第八步：页脚信息(版权等)的表现设置:
5. 十步学会用css建站——第五步：网页主要框架之外的附加结构的布局与表现；

相关文章:

1. 添加管理widget
2. 关于近期blog的变动及说明
3. 存档/标签页仅显示标题及小改进
4. 写给自己和翻墙而来的朋友
5. 无奈的挪窝

相关文章:

1. 十步学会用css建站——第九步：导航条的制作(较难)：
2. 十步学会用css建站——第十步：解决IE浏览器的显示BUG：
3. 十步学会用css建站——第八步：页脚信息(版权等)的表现设置:
4. 添加管理widget
5. picasa更新——终于提供直链