【模版分享】Post Paper

本主题由 隐藏人物 创建于 2009-4-27 15:17:14



分享一下之前设计最近发布的一款模版,叫做Post Paper

这是一款大字体,布局严谨的模版。

经过多种方式测试已经修正了许多跨平台方面的bug。但是我不知道是否还有什么问题。欢迎留言反馈。

目前能在我的blog看到:http://quasimo.blogbus.com

迟点我会更新相关的信息上来。

开放源代码:

CSS:

/*
Design by Quasimo from 901 Studio
http://geekaa.com/901/
*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/*
body {
line-height: 1;
}
*/
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/*

Post Paper Blog Theme by GeeKaa 901 Studio.

http://geekaa.com/901

*/

body{
background: #fff url(http://lh4.ggpht.com/_Qqajn3ngk3U/Se1F-T2FHkI/AAAAAAAABBo/Pu1FSJkuSGY/s800/sidebg.png) repeat-y 13px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif, '新宋体';
color: #666}

a{
color: #750B0F;
background-position: 1px;
}

a:hover{
color: #000;
}

#sidebar {
float: left;
padding: 0;
margin: 0 20px 0 10px !important;
margin: 0 30px 0 0;
}



#sidetop, #sidebottom{
width: 220px;
text-align: right;
}

#sidetop div, #sidebottom div{
margin-right: 10px;
margin-left: 10px;
margin-bottom: 15px;
font-size: small;
}

#sidetop div div, #sidebottom div div{
margin-right: 0;
padding-right: 0;
}

#sidetop div p, #sidebottom div p{
margin-right: 0;
padding-right: 0;
}

#sidetop div{
margin-right: 10px !important;
margin-right:0;
}

#sidetop div div{
margin-right: 0;
padding-right: 0;
}

#sidetop img{
margin-right: 10px !important;
margin-right:0;
}

#sidetop ul, #sidebottom ul{
margin: 10px;
}

#sidetop p, #sidebottom p{
margin: 0 10px;
}

#sidebottom{
position:fixed;
_position:absolute;
z-index:1000;
bottom: 0;
}

#logo{
border: 1px solid #000;
padding: 2px;
background: #fff;
margin: 15px 10px 10px 10px;
}

h1#header{
font-size: xx-large;
}

h1#header a{
color: #000;
border-bottom: 5px solid #000;
padding: 8px 0;
display: block;
text-decoration: none;
}

h1#header a:hover{
color: #750B0F;
border-bottom: 5px solid #750B0F;
}

h2#description{
color: #cacaca;
margin: 5px 0 30px 0;
font-size: medium;
}

#main {
float: left;
padding: 10px 0;
width: 700px;
}

h3.columntitle{
margin-bottom: 15px;
margin-top: 15px;
color: #000;
border-bottom: 2px solid #000;
font-size: large;
padding: 5px 0;
}

#posts li{
margin: 18px 0;
}

.postDate{
width: 140px;
float: left;
color: #000;
border-bottom: 1px solid #000;
padding: 0 0 5px 0;
}

.postHead{
width: 140px;
float: left;
color: #000;
}

.postBox{
float: left;
margin-left: 20px;
width: 540px;
}


.postTitle{
margin-bottom: 10px;
}

.postTitle a{
border-bottom: 1px solid #750B0F;
display: block;
text-decoration: none;
padding: 0 0 5px 0;
font-weight: bold;
}

.postMeta{
background: #eee;
margin: 10px 0 20px 0;
padding: 5px;
font-size: x-small;
font-style: italic;
border: 1px solid #ccc;
}

#footer{
margin: 25px 0;
width: auto;
border-top: 5px solid #000;
padding: 5px 0 0 0;
color: #000;
font-size: 90%;
}

.clear{
clear: both;
}

.extend{
margin-top: 35px;
text-align: left;
}


#main .module {
display: inline-block;
margin: 10px 0;
padding: 10px 0;
}


#main .module:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}



html[xmlns] #main .module {
display: block;
}

* html #main .module {
height: 1%;
}

#main .module h2{
width: 140px;
float: left;
color: #000;
border-bottom: 1px solid #000;
padding: 0 0 5px 0;
}

#main .modBody{
float: left;
margin-left: 20px;
width: 540px;
margin-top: 22px;
line-height: 1.4;
}

img{
display: inherit;
}

.pageNavi{
border-bottom: 1px solid #000;
padding: 0 0 5px 0;
}

#sidebar img{
display: inline;
}

.relpost{
border-top: 2px solid #000;
border-bottom: 2px solid #000;
margin-top:15px;
padding-bottom: 15px;
line-height: 1.2;
font-size: small;
}

.addfav{
font-size: small;
}

.relpost h3{
color: #000;
border-bottom: 1px solid #000;
padding-bottom: 5px;
margin-bottom: 5px;
}

.inpostTitle{
padding: 0 0 5px 0;
color: #000;
border-bottom: 1px solid #000;
}

p.cc-lisence{
font-size: x-small;
font-style: italic;
}

ul#comments{
margin: 15px 0;
}

ul#comments li{
margin: 5px 0 15px 0;
}

ul#comments li .menubar{
background: #eee;
padding: 1px 0;
font-size: small;
margin-top: 5px;
}

ul#comments h2{
border-bottom: 1px solid #000;
color: #000;
padding: 5px 0;
margin: 5px 0;
}

#commentForm{
width: 700px;
}

#commentForm h2{
border-bottom: 1px solid #000;
color: #000;
padding: 5px 0;
margin: 5px 0;
}

#commentForm div{
margin-bottom: 5px;
}

#commentForm div textarea{
width: 400px;
}

.emailnotice{
font-size: small;
}

.inpage .postSelf{
width: 700px;
}

.postFooter{
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0;
font-size: small;
}

.postFooter div{
margin: 8px 0;
}

.context{background: #000; padding:5px 0; margin:15px 0; font-size:small}

.context a{color:#fff}

.context a:hover{color:#000; background:#fff}


index代码:

<div id="sidebar">

<div id="sidetop">
<img id="logo" src="http://lh4.ggpht.com/_Qqajn3ngk3U/SeyH-3rITmI/AAAAAAAABBY/CFBEeNz7F_Y/s800/logo.png" alt="Post Paper" />
<div>编号:{#blog_id}</div>
<div>{c:2}</div>
</div>

<div id="sidebottom">
<div>{c:3}</div>

<ul>
<li>
<a href="http://{#domain}/index.rdf" target="_blank"><img alt="rss feed" src="http://lh3.ggpht.com/_Qqajn3ngk3U/SfF_Iyra57I/AAAAAAAABCE/Z4loj2JkfXU/s800/rss2.png" /></a>
</li>
<li>
<a href="http://www.blogbus.com/" target="_blank"><img src="http://www.blogbus.com/images/site-v3/link_blogbus.gif" alt="博客大巴"></a>
</li>
<li>
<a href="http://geekaa.com/901/" target="_blank"><img src="http://lh5.ggpht.com/_Qqajn3ngk3U/SfF7SFBbrlI/AAAAAAAABB0/BBnGwbc8bJw/s800/901design.png" alt="网站制作" /></a>
</li>
</ul>
<div><a href="http://bbs.geekaa.com/topic/view/3919.html">Post Paper</a> 由 <a href="http://www.google.com/profiles/104801323700331232869">隐藏人物</a> 设计</div>
</div>


</div>

<div id="main">
<h1 id="header"><a href="http://{#domain}" title="{#author}的blog">{#blog_name}</a></h1>
<h2 id="description">{#blog_desc}</h2>

<h3 class="columntitle">日报</h3>

{c:0}

<div class="extend">
{c:1}
</div>

<div id="footer">Blog编号:{#blog_id} - <a href="http://{#domain}">{#domain}</a></div>


</div>


index-posts:

<ul id="posts">

<!--list-->
<li>
<div class="postDate">
{#date}
</div>

<div class="postBox">
<h2 class="postTitle"><a href="{#url}" title="立即查看:{#title}">{#title}</a></h2>
<div class="postBody">
{#content}
</div>
<div class="postMeta">
本文由 <a href="{#profile_url}">{#author}</a> 发表,欢迎 <a href="{#url}" title="{#title}">详细阅读...</a>
</div>
</div>
<div class="clear"></div>
<!--<div class="space"></div>-->
</li>
<!--/list-->

</ul>
<div class="postDate">
分页
</div>
<div class="pageNavi postBox">{#pagenav}</div><br class="clear" />

放心注册,GeeKaa不会虚耗你半点时间,你只会发现更多乐趣。 立即注册