优快云Blog美化终极篇_csdn 界面美化-优快云博客

本文链接：https://blog.youkuaiyun.com/menhal/article/details/96209

本文提供了详细的优快云博客美化代码，包括页面字体、侧边栏、天气显示和图像定制。通过自定义CSS选择器如BLOCKQUOTE、#leftmenu A:hover和#leftmenu H3增强样式，并利用JavaScript实现动态效果，如标题图片替换和日期显示。此外，还引入了iframe元素展示实时天气预报。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前有不少人写过Blog美化的方法
可是写的相当粗略，没有具体的代码和实例。

下面我把我的美化代码共享给大家，都是最实用的东东

包含了页面字体设置，自定义侧边栏代码，天气代码和自定义图像代码

//定制CSS选择器

BLOCKQUOTE {
FONT-STYLE: normal}
#leftmenu A:hover {
FONT-STYLE: normal;
color: #FF3300;
}
#leftmenu H3 {
BORDER-TOP: gainsboro 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 2px; MARGIN: 10px 0px 0px
}

静态新闻/声明

<SCRIPT language=javascript>
function window.onload()
{
var els=document.getElementById("main").document.getElementsByTagName("DIV");
for(i=0;i<els.length;i++)
{
if(els[i].className=="postTitle")
els[i].innerHTML="<img src='http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/asklxf/16543/o_article.gif' border='0'> "+els[i].innerHTML;
}

els=document.getElementById("main").document.getElementsByTagName("H3");
for(i=0;i<els.length;i++)
{
if(els[i].innerHTML=="公告")
els[i].innerHTML="天道酬勤<img src='http://blog.youkuaiyun.com/images/blog_youkuaiyun.com/asklxf/16543/o_new.gif'>";
}
}
</SCRIPT>
<script language=JavaScript>
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
document.write(
"<font style='font-size:10pt;font-family: 宋体'> ",
today.getYear(),"年",
today.getMonth()+1,"月",
today.getDate(),"日 ",
d[today.getDay()+1],
"</font>" );
</script>
<li>
<p><b>天气预报</b></p>
<iframe width=150 height=240 frameborder=0 scrolling=NO src='http://appnews.qq.com/cgi-bin/news_qq_search?city='></iframe>
</li>