二栏模板结构图
标签类目:div+css
PSD->theme教程
把PSD格式的WordPress模板切割成HTML页面教程
http://www.admin88.com/htm/3/29/2009/11/12/53035.htm
25 Useful Tutorials Show How to Convert PSD to HTML & CSS Step by Step
http://ntt.cc/2009/11/15/25-useful-tutorials-show-how-to-convert-psd-to-html-css-step-by-step.html
photoshop的运用 设计与切片
用Photoshop设计一个博客界面
http://www.blueidea.com/design/doc/2009/6650.asp
第 1 页 用Photoshop设计一个博客界面 [1]
第 2 页 用Photoshop设计一个博客界面 [2]
第 3 页 用Photoshop设计一个博客界面 [3]
第 4 页 用Photoshop设计一个博客界面 [4]
第 5 页 用Photoshop设计一个博客界面 [5]
第 6 页 用Photoshop设计一个博客界面 [6]
第 7 页 用Photoshop设计一个博客界面 [7]
第 8 页 用Photoshop设计一个博客界面 [8]
如何将PSD模型转化成XHTML和CSS文件（一）
http://www.191top.com/2009/0514/746.html
如何将PSD模型转化成XHTML和CSS文件（二）
http://www.191top.com/2009/0514/747.html
将PSD效果图制作成XHTML+CSS文件
第 1 页 将PSD效果图制作成XHTML+CSS文件 [1]
第 2 页 将PSD效果图制作成XHTML+CSS文件 [2]
第 3 页 将PSD效果图制作成XHTML+CSS文件 [3]
第 4 页 将PSD效果图制作成XHTML+CSS文件 [4]
第 5 页 将PSD效果图制作成XHTML+CSS文件 [5]
第 6 页 将PSD效果图制作成XHTML+CSS文件 [6]
第 7 页 将PSD效果图制作成XHTML+CSS文件 [7]
第 8 页 将PSD效果图制作成XHTML+CSS文件 [8]
第 9 页 将PSD效果图制作成XHTML+CSS文件 [9]
http://www.blueidea.com/tech/web/2009/6651.asp
简化版 208作品
html代码
<html>
<head>
<style type=”text/css” title=”currentStyle” media=”screen”>
@import “1.css”/*tpa=http://www.csszengarden.com/208/208.css*/;
</style>
</head>
<body>
<div id=”container”>
<div id=”pageHeader”>
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title=”Cascading Style Sheets”>CSS</acronym> Design</span></h2>
</div>
<div id=”explanation”>
<h3><span>So What is This About?</span></h3>
<p><span>There is clearly a need for <acronym title=”Cascading Style Sheets”>CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</span></p>
<p><span><acronym title=”Cascading Style Sheets”>CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</span></p>
</div>
<div id=”linkList”>
<div id=”larchives”>
<h3><span>Archives:</span></h3>
<ul>
<li><a href=”/?cssfile=208/208.css&page=1″ title=”View next set of designs. AccessKey: n” accesskey=”n”><span>n</span>ext designs »</a></li>
<li><a href=”http://www.mezzoblue.com/zengarden/alldesigns/” title=”View every submission to the Zen Garden. AccessKey: w” accesskey=”w”>Vie<span>w</span> All Designs</a></li>
</ul>
</div>
</div>
<div style=”clear:both;”>
<div id=”footer”>
<a href=”http://validator.w3.org/check/referer” title=”Check the validity of this site’s XHTML”>xhtml</a>
<a href=”http://jigsaw.w3.org/css-validator/check/referer” title=”Check the validity of this site’s CSS”>css</a>
<a href=”http://creativecommons.org/licenses/by-nc-sa/1.0/” title=”View details of the license of this site, courtesy of Creative Commons.”>cc</a>
<a href=”http://mezzoblue.com/zengarden/faq/#s508″ title=”Read about the accessibility of this site”>508</a>
<a href=”http://www.mezzoblue.com/zengarden/faq/#aaa” title=”Read about the accessibility of this site”>aaa</a>
</div>
</div>
</body>
</html>
CSS代码
/* css Zen Garden submission ? ‘Sakura’, by Tatsuya Uchida, http://www.re-bloom.com/ */
/* css released under Creative Commons License ? http://creativecommons.org/licenses/by-nc-sa/1.0/? */
/* All associated graphics copyright 2006, Tatsuya Uchida */
/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the
designer’s written permission. However, feel free to study the CSS and use
techniques you learn from it elsewhere. */
/* /////////////// basic elements /////////////// */
body {
margin:0;
padding:0;
font:75%/1.4 verdana,Helvetica,sans-serif;
background-image:url(”body_bg.gif”/*tpa=http://www.csszengarden.com/208/body_bg.gif*/);
text-align:center;
}
h1,h2,h3 span {
display:none;
}
h3 {
height:39px;
margin:0;
padding:0;
}
p {margin:0;padding:0;}
acronym {
border:none;
}
a {
color:#D9189F;
background-color:#ffffff;
text-decoration:underline;
}
a:hover, a:hover {
color:#FC7AD5;
background-color:#ffffff;
}
/* ////////////// layout ///////////////// */
#container {
width:772px;
margin:0 auto;
padding:0 ;
position:relative;
background:url(”bg.gif”/*tpa=http://www.csszengarden.com/208/bg.gif*/) repeat-x #dfdfdf;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
color:#454545;
text-align:left;
}
#pageHeader {
width:772px;
height:179px;
background:url(”top.jpg”/*tpa=http://www.csszengarden.com/208/top.jpg*/);
color:#454545;
text-align:center;
}
#explanation{
float:right;
width:546px;
background-repeat:repeat-y;
}
#footer {
width:772px;
text-align:center;
}
#linkList {
float:left;
width:207px;
padding:0 8px;
}
#quickSummary p span, #explanation p span, #benefits p span {
padding:0 15px 10px 77px;
display:block;
}
#linkList li {
list-style:none;
padding:6px 0 10px 0;
background:url(”line.gif”/*tpa=http://www.csszengarden.com/208/line.gif*/) bottom repeat-x;
}
#linkList li a {
padding-left:7px;
background:url(”link.gif”/*tpa=http://www.csszengarden.com/208/link.gif*/) left center no-repeat;
text-decoration:none;
}
#linkList li a:hover {
text-decoration:underline;
}
#footer a{
text-decoration:none;
color:#888888;
background-color:#dfdfdf;
border:1px solid #bdbdbd;
padding:3px 3px;
margin:28px 0px;
height:100%;
}
#footer a:hover{
background-color:#ebebeb;
color:#777777;
}
/* right image */
#quickSummary p, #explanation p , #benefits p {
background:url(”right_bg.gif”/*tpa=http://www.csszengarden.com/208/right_bg.gif*/) right repeat-y;
}
#lselect, #larchives, #lresources {
background:url(”left_bg.gif”/*tpa=http://www.csszengarden.com/208/left_bg.gif*/) repeat-y;
}
#explanation {background-image:url(”img_explanation.jpg”/*tpa=http://www.csszengarden.com/208/img_explanation.jpg*/);background-position:left bottom;}
#explanation h3 {background:url(”title_explanation.gif”/*tpa=http://www.csszengarden.com/208/title_explanation.gif*/) no-repeat;}
/* bottom image */
#preamble .p3 span, #explanation .p2 span, #participation .p3 span, #benefits .p1 span, #requirements .p5{
padding-bottom:20px;
background:url(”right_bottom.gif”/*tpa=http://www.csszengarden.com/208/right_bottom.gif*/) bottom no-repeat;
}
#lselect ul, #larchives ul, #lresources ul{
margin:0;
padding:0 25px 20px 17px;
background:url(”left_bottom.gif”/*tpa=http://www.csszengarden.com/208/left_bottom.gif*/) bottom no-repeat;
}
#lselect, #larchives, #lresources {
background:url(”left_bg.gif”/*tpa=http://www.csszengarden.com/208/left_bg.gif*/) repeat-y;
}
#larchives h3 {background:url(”title_archives.gif”/*tpa=http://www.csszengarden.com/208/title_archives.gif*/) no-repeat;}
CSS-的基本元素的定义 也可以直接拿来用
需要仔细地研究几个自己认为不错的作品
再加上两本书：不断地去练习，最终可以攻克div+css这一块。
css禅意花园 
css彻底研究
/* basic elements */
html{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
font: 75%/1.4 verdana,Helvetica,sans-serif;
background: url(test.jpg) no-repeat;
text-align:center;
}
h1,h2,h3 span{
display:none;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/*//////layout/// */
#container {
width:772px;
margin:0 auto;
padding:0 13px;
position:relative;
background:url() repeat-x #dfdfdf;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
color:#454545;
