使用方法：
1 点击新模板DIY链接，进入新模板DIY模式。
2 复制css代码至css代码区。
3 复制html代码至html代码区。
4 保持代码。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
非常感谢您喜欢和支持偶的作品，如果在使用出现问题可到偶的blog：http://kalderash.ycool.com/留言，或是发邮件给我：kalderash.liu@gmail.com。您也可以到歪酷技术交流群62218942里来进行讨论。
代码如下：
CSS：
/* CSS Document */
/* GLOBE */
* {
padding: 0;
margin: 0;
}
body,td,th {
font-size: 12px;
font-family: "Arial";
color: #494949;
line-height: 170%;
}
body {
margin: 0;
background: #eaedf1 url('http://www.kalderash.com.cn/ycool/head/top.jpg') no-repeat left top;
}
a {
color: #003333;
text-decoration: none;
}
a:hover {
color: #0088E4;
text-decoration: none;
}
form {
margin: 0;
}
input {
margin: 5px 0 3px 12px;
font-size: 12px;
}
textarea {
margin: 5px 0 3px 12px;
font-size: 12px;
overflow: auto;
}
a img {
border: 0;
}
ul, ul li, ol,ol li {
list-style: none;
}
.more {
color: #6C0;
font-weight: bold;
text-align: right;
padding-right: 5px;
}
.more a {
color: #09F;
}
.more a:hover {
color: #06C;
}
.cut {
clear: both;
}
#wrap {
word-break: break-all; /* for IE only */
margin: auto;
}
#header {
overflow: hidden;
line-height: normal;
margin:182px auto 0;
height: 80px;
margin-bottom:125px;
}
#blogName {
color: #FFFFFF;
overflow: hidden;
height: 70px;
text-align: left;
font-size: 26px;
letter-spacing: -3px;
padding-top: 15px;
padding-left: 10px;
font-family: "Arial";
}
#blogName a {
color: #FFFFFF;
}
#blogName a:hover {
}
#blogDescription {
color: #0066CC;
margin-top:-25px;
_margin-top:-15px;
margin-left: 10px;
padding-bottom: 5px;
}
#blogDescription:hover {
color: #09F;
}
#navbar {
padding-top:25px;
height: 22px;
line-height: normal;
}
#navbar ul {
margin-left: 28px;
}
#navbar ul li {
text-align: center;
float: left;
height: 20px;
line-height: 20px;
vertical-align: middle;
padding: 0 10px;
}
#navbar ul li a {
color: #979595;
cursor: pointer;
}
#navbar ul li a:hover {
color: #0088E4;
}
#navbar ul li:hover {
}
/* CONTENT */
#content {
background: #eaedf1 url('http://www.kalderash.com.cn/ycool/head/content_bg.jpg') no-repeat top;
width: 643px;
float: left;
margin-left: 9px;
}
#content .component {
}
#subNav {
padding-left: 28px;
font-size: 12px;
font-weight: normal;
line-height: normal;
height: 16px;
white-space: nowrap;
width: auto;
}
#subNav a {
font-size: 12px;
padding-left: 5px;
font-weight: 400;
}
#subNav a:hover {
}
.postEntryNav,
.postListNav
{
margin: 20px 0;
}
.prev {
width: 45%;
float: left;
text-align: right;
overflow: hidden;
}
.next {
width: 45%;
float: right;
text-align: left;
}
.postEntry {
margin: 10px 0 30px 0;
font-size: 12px;
padding: 12px 10px 12px 15px;
}
.postEntry .title {
font-family:Arial;
font-size: 18px;
font-weight: 600;
letter-spacing: -1px;
display: block;
}
.postEntry .title a {
border-bottom: 2px solid #F4F4F4;
color: #003333;
line-height: normal;
}
.postEntry .title a:hover {
color: #06C;
border-bottom: 2px solid #06C;
}
.postEntry .signature {
margin: 5px;
font-size:12px;
text-align: right;
color: #BBB;
}
.postEntry .signature .posterNickName {
color: #000000;
}
.postEntry .signature .postTime {
color: #999;
}
.postEntry .content {
color: #979595;
line-height: 150%;
}
.postEntry .content a {
color: #0066CC;
font-weight: 600;
}
.postEntry .content a:hover {
color: #000000;
}
.postEntry .content p {
margin-bottom: 1em;
}
.postEntry .content blockquote {
border-left: 4px solid #0088E4;
font-family:Tahoma,Verdana,Arial;
margin: 10px 10px 10px 15px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
}
.postEntry .content ul {
padding: 10px 30px;
}
.postEntry .content ul li {
list-style-type: disc;
}
.postEntry .content ol {
padding: 10px 30px;
list-style-type: decimal;
}
.postEntry .tags {/*?TAG*/
border: 1px solid #E0E0E0;
padding: 4px;
font-family:Tahoma,Verdana,Arial;
font-size: 12px;
font-weight: bold;
color: #0088E4;
}
.postEntry .tags a {
margin-left: 10px;
}
.postEntryMeta {/*??*/
margin: 6px 0;
font-size: 12px;
color: #BBB;
text-align: right;
}
.postEntryMeta .view {
border-left: 10px solid #06C;
padding-left: 3px;
margin-right: 8px;
}
.postEntryMeta .reply {
border-left: 10px solid #0088E4;
padding-left: 3px;
margin-right: 8px;
}
.postEntryMeta .folder {
border-left: 10px solid #09F;
padding-left: 3px;
margin-right: 8px;
}
.componentTitle {
font-size: 20px;
padding: 15px 15px 3px 10px;
margin: 10px 0 25px 0;
letter-spacing: -1px;
font-weight: 800;
color: #333;
line-height: 175%;
}
.componentTitle span {
color: #BBB;
font-size:16px;
}
.componentTitle span a {
color: #0088E4;
}
.componentTitle span a:hover {
color: #57AF00;
}
.componentPostTitleList .sectionTitle {
text-align: left;
display: block;
letter-spacing: 1px;
margin: 20px 5px 8px 3px;
font-size: 12px;
font-weight: bold;
}
.componentPostTitleList a {
font-size:14px;
font-weight: bold;
}
.componentReplyList .componentBody {
margin: 10px 0 20px 0;
border: 1px solid #DDDDDD;
font-size: 12px;
padding: 12px 10px 12px 15px;
-moz-border-radius: 6px;
}
.componentReplyList .componentBody p {
margin: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
.componentReplyList .componentBody a {
color: #06C;
}
.componentReplyList .componentBody a:hover {
color: #033;
}
.componentReplyList .componentBody ol li {
color: #404040;
font-size: 12px;
line-height: 155%;
padding: 15px 3px 10px 3px;
background-color: #F5F5F5;
list-style-position: outside;
}
.componentReplyList .componentBody li {
margin-bottom: 30px;
margin-right: 25px;
border-bottom: 3px dashed #BFDFF5;
}
.replyEntryInfo:hover {
background-color: #FFF;
color: #404040;
}
.replyEntryInfo .respond {
color: #7F7F7F;
font-size: 12px;
line-height: 155%;
margin-bottom: 1px;
margin: 5px;
padding: 5px 5px 2px 15px;
border: 1px solid #E9E9E9;
-moz-border-radius: 6px;
background-color: #F9F9F9;
}
.replyEntryInfo .respond:hover {
background-color: #E7EFF5;
}
.replyEntryMeta {
padding-left: 5px;
}
.replyEntryInfo .replierNickName {
font-size: 14px;
color: #666;
}
.replyEntryInfo .replierNickName a {
font-weight: bold;
color: #666;
}
.replyEntryInfo .replierNickName a:hover {
color: #000;
font-weight: bold;
}
.replyEntryInfo .replyTime {
color: #0088E4;
font-style: italic;
font-size: 12px;
padding-left: 15px;
}
.replyEntryInfo .responderNickName {
font-weight: 400;
color: #000;
font-size: 14px;
padding-left: 250px;
}
.replyEntryInfo .responderNickName:hover {
font-weight: 900;
}
.replyEntryRespondDate {
font-size: 12px;
font-style: italic;
color: #999;
padding-left: 15px;
}
#pageNav {
margin-bottom: 15px;
margin-top: 25px;
text-align: center;
color: #000;
}
#pageNav a {
padding: 0 5px;
margin: 2px 4px;
color: #AECF8E;
}
#pageNav a:hover {
color: #0088E4;
}
#pageNav .current {
padding: 0 5px;
margin: 2px 4px;
color: #0088E4;
font-weight: bold;
}
.componentReplyForm .componentBody {
background-color: #F5F5F5;
margin: 10px 0 20px 0;
border: 1px solid #DDDDDD;
font-size: 12px;
padding: 12px 10px 12px 15px;
-moz-border-radius: 6px;
}
.componentReplyForm .componentBody img {
padding: 6px;
border: 1px solid #003333;
background: #E7EFE5;
margin:6px;
}
.componentReplyForm .componentBody th {
text-align:right;
line-height:normal;
width:6em;
margin-right:2px;
height:2.3em;
}
.componentReplyForm .componentBody td {
margin-left:1px;
padding-left:1px;
}
.componentReplyForm .componentBody p {
padding:2px;
margin:0 auto;
}
.componentReplyForm #replyFormReplierUrl,
.componentReplyForm #replyFormReplierEmail,
.componentReplyForm #replyFormReplierNickName,
.componentReplyForm textarea
{
width:260px;
}
.componentReplyForm #authcode_td2 img {
width:180px;
padding: 3px;
border: 1px solid #003333;
background: #E7EFE5;
text-align:right;
}
.componentReplyForm .componentBody th #authcode_td1 {
padding-bottom:15px;
}
.componentReplyForm #authcode_td3 input {
margin-left:2px;
text-align:left
}
.componentReplyForm td #authcode_td3 {
display: block;
}
.componentReplyForm textarea {
height:120px;
text-align:left;
}
.componentReplyForm #replyFormSubmit {
border:1px outset #AAA;
background-color:#DDD;
height:25px;
color:#333;
margin-top:0;
}
#sidebar {
width: 224px;
margin-left:20px;
line-height: 150%;
overflow: hidden;
float: left;
margin-top:55px;
background: url('http://www.kalderash.com.cn/ycool/head/sidebar_bg.jpg') no-repeat;
}
.module {
margin: 10px 0 20px 0;
font-size: 12px;
padding: 12px 10px 12px 15px;
-moz-border-radius: 6px;
color: #979595;
}
.module a {
color: #003333;
}
.module a:hover {
color: #0088E4;
}
.module .moduleTitle {
font-size: 14px;
font-weight: bold;
text-align: left;
color: #999999;
padding: 1px 5px 3px 3px;
margin-left: 5px;
margin-right: 5px;
display: block;
border-bottom:2px solid #cccccc;
}
.moduleBody {
padding: 15px 0;
margin-bottom: 10px;
}
.moduleBody ul {
margin-left: 3px;
margin-right: 6px;
}
.moduleBody li {
line-height: 16px;
padding-left: 2px;
white-space: nowrap;
}
/* About admin*/
.moduleAbout {
text-align: center;
padding-left: 20px;
}
.moduleAbout .avatar img {
padding: 2px;
border: 2px solid #0088E4;
margin: 6px;
}
.moduleAbout .description p {
}
/* Calendar */
.moduleCalendar .moduleBody {
margin: 0px auto;
}
#calendarContainer table {
width: 100%;
_width:90%;
}
#calendarContainer td {
font-style : normal;
text-align: center;
}
#calendarContainer td a {
color: #0088E4;
font-weight: bold;
}
#calendarContainer td a:hover {
color: #F90;
}
#calendarContainer td.today {
font-weight: bold;
color: #5CAF00;
}
#calendarContainer td.today a {
color: #0088E4;
}
#calendarContainer td.today a:hover {
color: #F90;
}
#calendarContainer td.today:hover {
color: #5CAF00;
}
#calendarContainer td.weekday {
color: #7E7E7E;
font-style : normal;
}
#calendarContainer td.weekSun {
color: #F30;
text-align: center;
}
#calendarContainer td.weekSat {
color: #5CAF00;
text-align: center;
}
#calendarContainer td.calendarHeader {
letter-spacing: 0.2em;
}
/* LastestReply */
.moduleLastestReply .moduleBody ul {
padding: 0;
}
.moduleLastestReply .moduleBody ul li {
list-style: none;
padding: 0;
}
.moduleLastestReply .moduleBody li {
margin-bottom: 5px;
padding-bottom: 5px;
padding-left: 22px;
padding-right: 5px;
}
.moduleLastestReplyInfo {
overflow: hidden;
margin-bottom: 8px;
}
.moduleLastestReplyInfo .nickName {
color: #0088E4;
}
.moduleLastestReplyInfo .nickName a {
color: #0088E4;
font-weight: bold;
}
.moduleLastestReplyInfo .nickName a:hover {
color: #000;
}
.moduleLastestReplyInfo .date {
color: #222;
padding-left: 5px;
}
/* LastestVisitor */
.moduleLastestVisitor .moduleBody ul {
padding: 0;
}
.moduleLastestVisitor .moduleBody ul li {
list-style: none;
padding: 0;
}
.moduleLastestVisitor .moduleBody li {
margin-bottom: 5px;
padding-bottom: 5px;
padding-left: 22px;
}
.lastestVisitorInfo {
white-space: nowrap;
overflow: hidden;
}
.lastestVisitorInfo a {
font-weight: bold;
}
.lastestVisitorInfo a:hover {
}
.lastestVisitorNickName a {
color: #000;
}
.lastestVisitorNickName a:hover {
color: #0088E4;
}
.lastestVisitorDate {
font-style: italic;
padding-left: 5px;
}
/* Tag | Folder*/
.moduleTag .moduleBody,.moduleFolder .moduleBody {
position: relative;
margin-right: 1px;
}
.moduleTag span,.moduleFolder span {
color: #000;
position: absolute;
right: 1px;/*for FIREFOX*/
*right: 2px;/*for IE7*/
_right: 20px; /*for IE6*/
text-align: right;
}
.moduleStat span {
color: #0088E4;
}
/* Links */
.moduleLinks .moduleBody ul {
padding-bottom: 2px
}
.moduleLinks .moduleBody li {
/*list-style: none;*/
background: none;
margin-bottom: 8px;
}
.moduleLinks .moduleBody li a {
display: block;
}
.moduleLinks .descrption {
color: #828282;
}
/* search */
.moduleSearch .moduleBody {margin-left:-8px;}
.moduleSearch .moduleBody input {
border:1px solid #7EA6CF;
}
.moduleSearch .moduleBody .query {
border:1px solid #e4edf5;
height: 20px;
line-height: 20px;
}
.moduleSearch .moduleBody .query:hover {
border:1px solid #AAE9EE;
}
.moduleSearch .moduleBody .submit {
position: absolute;
font-size:12px;
font-weight: bold;
text-align: center;
border:1px solid #AAE9EE;
padding: 0 4px;
height: 23px;
line-height: 23px;
color: #FFF;
font-weight: bold;
background-image:url('http://s.ycul.com/blog.public/images/3/btn_bgrd_off.gif');
}
.moduleSearch .moduleBody .submit:hover {
background-image: url('http://s.ycul.com/blog.public/images/3/btn_bgrd_on.gif');
background-color: #39bdd4;
}
/* FOOTER */
#footer_design {
text-align: right;
padding-right:20%;
height:245px;
clear: both;
text-align: center
}
#footer {display:none;}
#footer_design img {
_margint-top:20px;
}
HTML：
#PAGE_HEADER#
<div id="header">
#HEADER#
</div>
<div id="content">
<div id="navbar">
#NAVBAR#
</div>
#CONTENT#
</div>
<div id="sidebar">
#SIDEBAR#
</div>
<div id="footer_design">
<img src="http://www.kalderash.com.cn/ycool/head/footer.jpg" />
</div>
#PAGE_FOOTER#
