利用CSS美化Blog文章

利用CSS美化Blog文章

本文地址: <script type="text/javascript"> var path=document.URL; document.write(document.URL) </script>

发布于 <script type="text/javascript"> var path=document.URL; date=path.substring(40,44); month=path.substring(45,47); day=path.substring(48,50); document.write(date+'年'+month+'月'+day+'日'); </script>

这是我使用的CSS 

 

<style type="text/css">

/*********************************
 * Greenerycn Blog Css           *
 *                               *
 * Date: 2008-2-21               *
 * Last Modified Date:           *
 *       2008-2-21               *
 *                               *
 * Contact:greenerycn@gmail.com  *
 * copyright:创作共享 非商业        *
 *                               *
 *********************************/

/*正文区域*/
#GreenerycnBody{
    padding-top:10px;
clear:both;
letter-spacing:1px;/*字符间距 */


}
/*链接样式*/
#GreenerycnBody .link{
    width:90%;
    font-family:tahoma;
    font-size:9pt;
    line-height:100%;
    text-transform:lowercase; /*小写显示 */

}

#GreenerycnBody a,#GreenerycnBody  a:link,#GreenerycnBody  a:active {
    font-weight:bold;
    text-decoration: none;

    color:  green;
    
}
#GreenerycnBody  a:hover {    
    text-decoration: underline;
    color: green;

}

/* 层样式 */
#GreenerycnBody  div{
    border:solid 1px #78A3D3;
    background-color:#F5F8FC;
    word-break:break-all;
    overflow:auto;
    padding:15px;
    margin:15px 0;
    
}

/* 总标题 */
#GreenerycnBody  h1{
    font-size:23px;
    padding:10px 0;
    font-family:Verdana, Arial, Sans-Serif;
    border-bottom:dashed 1px gray;
    text-align:center;
    background-color:#F5F8FC;
    height:40px;
letter-spacing:0px;/*字符间距 */
}
/*发布日期 */
#GreenerycnBody .fooTime{
    margin:0;
    padding-top:5px;
    text-align:center;
    font-size:12px;
    line-height:1em;
    font-family:Verdana, Arial, Sans-Serif;
    border:none;

}

/* 标题 */
#GreenerycnBody .title{
    font-size:16px;
    font-family:宋体;
    TEXT-ALIGN: center;
    font-weight:bold;
}

/* 段落 */
#GreenerycnBody  p{
    font-family: Verdana, Arial, Sans-Serif;
    text-indent:2em;
    line-height:100%;
    font-size:11pt;
    whiteSpace:normal;
letter-spacing:1px;/*字符间距 */
}
/* 一个蓝色的代码框 */

#GreenerycnBody  .code {
    font-family:"Verdana" , "Courier New", "Courier", "mono";
    font-size: 12px;
    line-height: 18px;
    color: #000000;
    background-color: #DDEDFB;
    margin: 5px;
    padding: 5px;
    border: 1px solid green;
    display:block;
}

#GreenerycnBody  blockquote{
    background-color:lightyellow;
    border:1px dotted #dedbde;
    padding:10px;
}
/* 脚注 */
#GreenerycnBody  .foot{
    height:43px;
    padding:12px 0 0 0;
    text-align:center;
    margin:30px 0 0 0;
    font-size:12px;
    border:none;
    border-top:dashed 1px gray;
}
</style>

 我的文章框架:

 

 

< div  id ="GreenerycnBody" >

< h1 > 标题 </ h1 >
< p  class ="fooTime" > 本文地址:
< script  type ="text/javascript" >
document.write(document.URL)
</ script >

< p  class ="fooTime" > 发布于 
< script  type ="text/javascript" > var  path = document.URL;date = path.substring( 40 , 44 );month = path.substring( 45 , 47 );day = path.substring( 48 , 50 );document.write(date + ' 年 ' + month + ' 月 ' + day + ' 日 ' ); </ script >
</ p >


< div >
< p  class ="link" >< a  href ="http://blog.csdn.net/greenerycn" > Grenerycn's Blog </ a >   </ p >
< p > 正文
</ p >
</ div >
< div  class ="foot" > 本文地址:  < script  type ="text/javascript" >
document.write(document.URL)
</ script ></ div >


</ div >

 

本文地址: <script type="text/javascript"> document.write(document.URL) </script>