利用CSS美化Blog文章

最新推荐文章于 2025-05-31 15:33:24 发布

最新推荐文章于 2025-05-31 15:33:24 发布 · 155 阅读

文章标签：

#Blog #CSS #JavaScript #Gmail #框架 #ViewUI

本文介绍了一种使用CSS美化博客文章的方法，包括设置字体、颜色、布局等细节，并提供了具体的CSS代码示例。

利用CSS美化Blog文章

本文地址: var path=document.URL; document.write(document.URL)

发布于 var path=document.URL; date=path.substring(40,44); month=path.substring(45,47); day=path.substring(48,50); document.write(date+'年'+month+'月'+day+'日');

这是我使用的CSS

<styletype="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;/*小写显示*/

}

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

color:green;

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

}

/*层样式*/
#GreenerycnBodydiv{
border:solid1px#78A3D3;
background-color:#F5F8FC;
word-break:break-all;
overflow:auto;
padding:15px;
margin:15px0;

}

/*总标题*/
#GreenerycnBodyh1{
font-size:23px;
padding:10px0;
font-family:Verdana,Arial,Sans-Serif;
border-bottom:dashed1pxgray;
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;
}

/*段落*/
#GreenerycnBodyp{
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","CourierNew","Courier","mono";
font-size:12px;
line-height:18px;
color:#000000;
background-color:#DDEDFB;
margin:5px;
padding:5px;
border:1pxsolidgreen;
display:block;
}

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

我的文章框架:

<divid="GreenerycnBody">

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

<pclass="fooTime">发布于
<scripttype="text/javascript">varpath=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>
<pclass="link"><ahref="http://blog.youkuaiyun.com/greenerycn">Grenerycn'sBlog</a></p>
<p>正文
</p>
</div>
<divclass="foot">本文地址:<scripttype="text/javascript">
document.write(document.URL)
</script></div>

</div>

本文地址: document.write(document.URL)