[CSS] zblog 主题 css 相关( 一)
开始写一些zblog主题相关的css知识
并把我在newsky基础上制作butterfly样式的过程做下记录
这是分离出的ZBlog页面结构：
<!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">
</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>
新建一个文本文档，将上面代码拷贝进去，另存为index.html,编码选择 utf-8
效果：
建立目录结构如下：
zblog——–index.html
|–style
|–image
在style目录下新建butterfly.css文件
下文提到表现的地方均为向 butterfly.css 添加代码
表现：
#divAll{
width:1000px;
margin:0 0 0 0;
padding:0 0 0 0;
background-color: Silver;
}
效果：
表现：
#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;
}
效果：
tle=""/>
表现
- Feb
- 8
- February 2007
- 糖伴西红柿
- Z-Blog
文章不错，顶一个！！！！！！！
爽就一个字