
模板名称:bestfriends
来源:http://www.freecsstemplates.org/
适用:适用于歪酷新模板系统
使用方法:打开新模板系统的“模板完全DIY”模式,将css部分的代码复制到css样式文件中覆盖原有代码,html部分的代码复制到Html代码区中覆盖原有代码
注意事项:
1、本模板版权属http://www.freecsstemplates.org/网站及该模板原设计者所有,使用时敬请保留版权信息。
2、贴图时,最好将图片宽度控制在480px以内,以获得最佳效果。
3、使用该模板的BLOG可以在800*600以上分辨率下浏览,在FX和IE下均可获得较佳效果。
4、本模板适合博客名称在7个汉字以内时使用。如多于7个汉字,则需要在下面代码中的红色字部分修改两个数字的值,以达到最佳效果。
5、由于是首次修改别人的模板来制作小歪的模板,很难保证效果达到最佳。如有问题,请在这里留言询问:
http://meidog.ycool.com/post.3028900.html
下面是代码部分:
CSS部分
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #000000 url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/ysew1213881122.jpg) repeat left top;
font-size: 14px;
text-align: justify;
color: #ABABAB;
}
h1, h2, h3 {
margin: 0;
text-transform: lowercase;
font-weight: normal;
color: #559106;
}
h1 {
letter-spacing: -1px;
font-size: 32px;
}
h2 {
font-size: 23px;
}
p, ul, ol {
margin: 0 0 2em 0;
text-align: justify;
line-height: 26px;
}
a:link {
color: #A5E543;
}
a:hover, a:active {
text-decoration: none;
color: #A5E543;
}
a:visited {
color: #A5E543;
}
img {
border: none;
}
img.left {
float: left;
margin-right: 15px;
}
img.right {
float: right;
margin-left: 15px;
}
/* Form */
form {
margin: 0;
padding: 0;
}
form table th{
font-size:12px;
text-align:right;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
legend {
display: none;
}
input, textarea, select {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
width:250px;
background-color:#FFF;
}
#wrap {
*text-align: center;
}
#wrapper{
margin: 0;
padding: 0;
height: 350px;
background: url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/ekef1213881122.jpg) repeat-x left top;
}
/* Header */
#header {
width: 810px;
margin: 0 auto;
height: 75px;
*text-align: justify;
}
/* Menu */
#menu {
float: left;
width: 810px;
height: 60px;
background: url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/zlxe1213881122.jpg) no-repeat left top;
}
#menu ul {
margin: 0;
padding: 0px 0 0 20px;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
float: left;
background: url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/wrrx1213881122.jpg) no-repeat left 50%;
height:48px;
}
#menu a {
display: block;
float: left;
margin-right: 3px;
padding: 12px 30px 12px 20px;
letter-spacing: -.5px;
text-decoration: none;
text-transform: lowercase;
font-size: 20px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: none;
color: #A5E543;
}
#menu #tabHome a {
color: #A5E543;
}
#menu #tabRss a img {
margin-top:5px;
}
/** LOGO */
#logo {
width: 810px;
height: 260px;
margin: 0 auto;
background: url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/puhb1213881122.jpg) no-repeat left top;
*text-align: justify;
}
#logo h1, #logo #blogDescription {
margin: 0;
padding: 0 0 0 100px;
line-height: normal;
width:280px;
}
#logo h1 {
padding-top: 100px; /* 这里的100px,指博客名称的垂直位置,数值越大,博客名称越靠下 */
font-family: Georgia, "Times New Roman", Times, serif;
font-size:40px; /* 这里的40px,指博客名称文字的大小,数值越大,字体越大。当博客名称字数较多时,应使用较小的数值 */
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
#logo h1 a:hover { text-decoration: underline; }
#logo #blogDescription {
float: left;
padding: 0px 0 0 100px;
font: 18px Georgia, "Times New Roman", Times, serif;
color: #9B9B9B;
}
#logo p a {
text-decoration: none;
color: #B6ACA2;
}
#logo p a:hover { text-decoration: underline; }
/* Page */
#page {
width: 810px;
margin: 0 auto;
*text-align: justify;
}
/* Content */
#content {
float: left;
width: 520px;
margin-top: 15px;
}
#subNav {
display:none;
}
/* Post */
div.postEntryNav div.prev {
float:left;
overflow:hidden;
text-align:left;
width:45%;
}
div.postEntryNav div.next {
float:right;
overflow:hidden;
text-align:right;
width:45%;
}
div.postEntry{
padding: 15px 0 80px 0;
clear:both;
}
div.postEntry .title {
margin-bottom: 20px;
padding-bottom: 5px;
width: 520px;
height: 60px;
padding: 20px 0 0 15px;
*padding-bottom:40px;
background: url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/gvyi1213881153.jpg) no-repeat left top;
font-size: 24px;
color: #DADADA;
}
div.postEntry .title a {
padding-left:20px;
background:url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/wrrx1213881122.jpg) no-repeat left center;
}
div.postEntry .content {
padding: 0 15px 20px;
font-size: 14px;
border-bottom: 1px dotted #1F1F1F;
}
div.postEntry .postEntryMeta {
padding: 8px 15px 3px 15px;
font-size: 13px;
}
div.postEntry .postEntryMeta span {
margin: 0;
padding-top: 15px;
line-height: normal;
color: #999999;
}
div.postEntry div.tags {
padding:15px 0 0 15px;
}
div.postEntry .content img {max-width:480px; img:expression(onload=function() {this.style.width=(this.offsetWidth >480)?"480px":"auto"})}
/* Sidebar */
#sidebar {
float: right;
width: 250px;
margin: 0;
padding: 0;
margin-top: 30px;
}
#sidebar div.module {
margin-bottom: 40px;
}
#sidebar div.module div.moduleBody{
margin: 0;
*padding-left: 25px;
}
#sidebar h2 {
width: 250px;
height: 60px;
padding: 8px 0 0 25px;
margin-bottom: 10px;
background: url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/rrwv1213881153.jpg) no-repeat left top;
font-size: 20px;
color: #DADADA;
}
#sidebar div.moduleCalendar div.moduleBody {
padding:0;
margin:0 auto;
}
#calendarContainer table {table-layout:fixed; text-align:center; width:100%;}
#calendarContainer td {font-style:normal; text-align:center;}
#calendarContainer td.today, #calendarContainer td.today a {
font-weight:bold;
background:transparent url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/wrrx1213881122.jpg) no-repeat scroll center;
}
#calendarContainer td.today:hover {color:#37B3D5;}
#calendarContainer td.calendarHeader {letter-spacing:0.2em;}
#sidebar div.moduleSearch div.moduleBody {padding:0;}
#sidebar div.moduleLastestReplyInfo a {padding-left:10px;}
#sidebar div.moduleLastestReplyInfo span.nickName a {padding:0;}
input.query {
width: 140px;
margin-left: 25px;
margin-right: 5px;
padding: 3px;
border: 1px solid #BED99C;
width:auto;
}
input.submit {
padding: 3px;
border: none;
background: #467805;
text-transform: lowercase;
font-size: 11px;
color: #FFFFFF;
width:auto;
}
/* Footer */
#footer-wrap {
width: 810px;
height: 60px;
margin: 0 auto;
background: url(http://photo1.9you.com/pic/userphoto/56/75/2037165675/jmsw1213881122.jpg) no-repeat left top;
}
#footer1 {
margin: 0 auto;
margin-bottom: 20px;
padding: 0;
}
html>body #footer1 {
height: auto;
}
#footer1 p {
font-size: 14px;
}
#legal {
clear: both;
padding-top: 17px;
text-align: center;
color: #999999;
}
#legal a {
color: #A5E543;
}
#footer {
display:none;
}
/* ReplyList*/
div.componentReplyList {
clear:both;
padding-top:10px;
border-top:1px dotted #1F1F1F;
border-top:1px dotted #1F1F1F;
}
#content div.componentReplyList div.componentBody ul li {
list-style-image:none;
list-style-type:none;
margin-bottom:20px;
padding:0pt 0pt 10px 10px;
border-bottom:1px dashed #1F1F1F;
}
#content div.componentReplyList div.componentBody ul li table td{
font-family:Tahoma,Verdana,Arial;
font-size:12px;
line-height:170%;
width:300px;
*width:360px;
}
.replyEntryInfo .respond {
border:1px dashed #559106;
padding:12px 12px 12px 18px;
width:100%;
margin-bottom:8px;
}
/*replyform*/
#replyFormIsAnonymousCheckbox {
border:0;
width:auto;
}
.componentReplyForm .componentBody td div img {
height:35px;
width:35px;
}
.componentReplyForm #replyForm div a {
float:left;
margin:2px 2px 2px 0;
padding:2px 2px 2px 0;
}
.componentReplyForm textarea {
height:120px;
*overflow:auto;
}
#replyFormSubmit {
padding: 3px;
border: none;
background: #467805;
text-transform: lowercase;
font-size: 13px;
color: #FFFFFF;
width:auto;
}
#replyForm table td p {
padding-top:10px;
font-size: 12px;
line-height:130%;
margin:0;
}
#replyForm td iframe{
display:none;
}
--------------------------------------------------------上面是CSS,下面是HTML之上天下地分割线--------------------------------------------------------
HTML部分
#PAGE_HEADER#
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Best Friends
Version : 1.0
Released : 20080519
Description: A two-column, fixed-width and lightweight template ideal for 1024x768 resolutions. Suitable for blogs and small websites.
-->
<div id="wrapper">
<!-- start header -->
<div id="header">
<div id="menu">
#NAVBAR#
</div>
</div>
<div id="logo">
#HEADER#
</div>
<!-- end header -->
</div>
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
#CONTENT#
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
#SIDEBAR#
</div>
<!-- end sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer1">
<div id="footer-wrap">
<p id="legal">( c ) 2008. All Rights Reserved. <a href="http://www.freecsstemplates.org/">Bestfriends</a> designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</div>
<script>
var postEntryMetaArray=document.getElementsByTagName("span");
for (var i=0;i<postEntryMetaArray.length;i++) {
if (postEntryMetaArray[i].className=="add_post") {
postEntryMetaArray[i].parentNode.style.styleFloat="right";
postEntryMetaArray[i].parentNode.style.cssFloat="right";
}
}
</script>
<!-- end footer -->
#PAGE_FOOTER#
代码到此结束。谢谢各位





