写东西真是太难了。。。
写了好一会，觉得并不完全是写zblog的样式制作
好像在写自己学css的总结
不过估计会有一些帮助
我也是新手，写的不好
错误的地方还请高手指教哈
开始：
这是分离出的页面结构：
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" rev="stylesheet" href="style/butterfly.css" type="text/css" media="screen" />
<title>GaoWhen高温</title>
</head>
<body class="multi default">
<!--start of divAll-->
<div id="divAll">
<!----------------start of divPage---------------->
<div id="divPage">
<!-----------start of divMiddle--------------->
<div id="divMiddle">
<!-------------start of divTop-------------->
<div id="divTop">
<h1 id="BlogTitle">GaoWhen高H温 </h1>
<h2 id="BlogSubTitle">I just want to live while I am alive ...</h2>
</div>
<!---------------end of divTop------------>
<!------------start of divNavBar------------->
<div id="divNavBar">
</div>
<!-------------end of divNavBar------------>
<!------------start of divMain--------------->
<div id="divMain">
<p>日历</p>
<p>控制面板</p>
<p>网站目录</p>
<p>最新留言</p>
<p>最近引用</p>
<p>文章归档</p>
<p>站点统计</p>
<p>网站收藏</p>
<p>友情链接</p>
<p>图标汇集</p>
</div>
<!------------end of divMain--------------->
<!---------------start of divSidebar---------->
<div id="divSidebar">
<div class="function" id="divCalendar">
<h3>日历</h3>
</div>
<div class="function" id="divContorPanel">
<h3>控制面板</h3>
</div>
<div class="function" id="divCatalog">
<h3>网站目录</h3>
</div>
<div class="function" id="divComments">
<h3>最新留言</h3>
</div>
<div class="function" id="divTrackbacks">
<h3>最近引用</h3>
</div>
<div class="function" id="divArchives">
<h3>文章归档</h3>
</div>
<div class="function" id="divStatistics">
<h3>站点统计</h3>
</div>
<div class="function" id="divFavorites">
<h3>网站收藏</h3>
</div>
<div class="function" id="divLinkage">
<h3>友情链接</h3>
</div>
<div class="function" id="divMisc">
<h3>图标汇集</h3>
</div>
</div>
<!---------------end of divSidebar---------------->
<!----------------start of divBottom--------------------->
<div id="divBottom">
<h3 id="BlogPowerBy"></h3>
<h2 id="BlogCopyRight"></h2>
</div>
<!----------------end of divBottom--------------------->
</div>
<!----------------end of divMiddle------------------->
</div>
<!---------------end of divPage------------>
</div>
<!--------------end of divAll----------->
</body>
</html>
[/code]
新建一个文本文档，将上面代码拷贝进去，另存为index.html,编码选择 utf-8
效果：
[img]http://www.gaowhen.com/upload/divAll_without_color.JPG[/img]
建立目录结构如下：
zblog--------index.html
|--style
|--image
在style目录下新建butterfly.css文件
下文提到表现的地方均为向 butterfly.css 添加代码
表现：
[CODE]
#divAll{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Silver;
}
[/CODE]
效果：
[img]http://www.gaowhen.com/upload/divAll.JPG[/img]
表现：
[CODE]
#divAll{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Silver;
}
#divPage{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Aqua;
}
[/CODE]
效果：
[img]http://www.gaowhen.com/upload/divAll_page.JPG[/img]
表现：
[CODE]
#divAll{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Silver;
}
#divPage{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Aqua;
}
#divMiddle{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Blue;
}
[/CODE]
效果：
[img]http://www.gaowhen.com/upload/divMiddle.JPG[/img]
表现：
[CODE]
#divAll{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Silver;
}
#divPage{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Aqua;
}
#divMiddle{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Blue;
}
#divTop{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
height:231px;
background-color: Red;
}
#divSidebar{
width:256px;
margin:0 0 0 0;
padding:0 0 0 12px;
background-color: Lime;
}
#divMain{
width:700px;
margin:0 0 0 0;
padding:0 8px 0 0;
background-color: Yellow;
}
#divBottom{
width:1000px;
margin:0;
padding:0;
height:88px;
background-color: Purple;
}
[/CODE]
效果：
[img]http://www.gaowhen.com/upload/no_float.jpg[/img]
表现：
[CODE]
#divAll{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Silver;
}
#divPage{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Aqua;
}
#divMiddle{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Blue;
}
#divTop{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
height:231px;
background-color: Red;
}
#divSidebar{
width:256px;
margin:0 0 0 0;
padding:0 0 0 12px;
float:left;
background-color: Lime;
}
#divMain{
width:700px;
margin:0 0 0 0;
padding:0 8px 0 0;
float: right;
background-color: Yellow;
}
#divBottom{
width:1000px;
margin:0;
padding:0;
height:88px;
background-color: Purple;
}
[/CODE]
效果：
[img]http://www.gaowhen.com/upload/with_float.jpg,with_float.jpg[/img]
现在已经可以看到页面的大体模型结构了。。。
[[i] 本帖最后由 redscorpion 于 2007-2-8 15:49 编辑 [/i]]
