首页 > Web开发 > 详细

使用CSS/JS代码修改博客模板plus

时间:2016-11-22 02:11:04      阅读:306      评论:0      收藏:0      [点我收藏+]

  之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性。最近正好也在做一个网站的前端,学习了不少东西,再来改一改~

  上次最后之所以铩羽而归,是因为从CSS里找不到那些#和.对应的东西控制的都是啥子,这回不在看那个CSS了,直接用浏览器的开发者模式打开博客,一级一级找下去,看控制要改的内容的都是哪个DIV,把那些呆滞傻二的字体一一改掉:

技术分享

技术分享技术分享

技术分享
.cnblogs_code pre {
    font-family: Courier New!important;
    font-size: 16px!important;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.cnblogs_code span {
    font-family: Courier New!important;
    font-size: 16px!important;
    line-height: 1.5!important;
}
#header h1 {
    font-weight: normal;
    font-size: 30px;
    line-height: 1;
}
#header h1 a {
    font-family: "Microsoft YaHei";
}
#header h1 a:hover {
    color: #F60;
    text-decoration: none;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 18px;
    color: #000000;
    line-height: 1.5em;
    margin-top: 10px;
    margin-left: 30px;
    width: 50%;
    margin-left: 10em;
    float: left;
}
.c_b_p_desc{
    word-wrap:break-word;
    word-break:break-all;
    overflow:hidden;
    font-family:"CHARLEMAGNE STD","Microsoft YaHei";
    font-size: 13px;
}
.newsItem{
    font-family: "Microsoft YaHei";
    font-size: 14px;
}
#profile_block a{
    font-family: "CHARLEMAGNE STD","Microsoft YaHei";
}
.postTitle {
    font-family:"CHARLEMAGNE STD","Microsoft YaHei"; 
    font:"CHARLEMAGNE STD","Microsoft YaHei"; 
    font-size:16px;
}
#header {
    width: 1180px;
}
#main {
    width: 1180px;
}
#mainContent {
    width: 900px;
}
#home{
    width: 1180px;
     margin:0 auto;
}
#sidebar_categories{
    font-family:"CHARLEMAGNE STD","Microsoft YaHei"; 
    font:"CHARLEMAGNE STD","Microsoft YaHei"; 
    font-size: 13px;
}
CSS代码

  只可惜这个希腊碑文的英文字体很多电脑上没有,从网上查了一下让网页使用特殊字体的方法,不过需要url,但是我没地方上传啊,这个问题的解决方法还在研究当中。

  最后,找了一下页面最后的广告的DIV,一共有3个,id分别是ad_c1,ad_c2和ad_什么的记不起来了,还有两三个新闻的DIV。一开始的想法是用JS看看能不能根据id的前缀来getelement什么的,可是貌似没有这样的函数。如果把这五六个DIV一一设置隐藏的话也太萌了,所以我就直接把整个评论区给隐藏了,反正也不会有人评论,呵呵。不过这里还是要存疑,毕竟这样并不完美。

 

技术分享
<img src="//pic.cnblogs.com/avatar/293751/20160902001721.png" alt="丶夕颜的头像" class="img_avatar"><br>

<script type="text/javascript"> 
window.onload=function(){ 
    var oA=document.getElementById("comment_form");
    oA.setAttribute("hidden", "hidden",1);
}
</script>
JavaScript代码

   这就很尴尬了。隐藏广告这项能力似乎是一次性的,刷新一次后就失去了......一开始真的是能隐藏的,奇怪。好像明白是怎么回事,不过说不太清楚。

技术分享

   

 

 

  哈哈,JS不行老娘就jQuery,把window.onpageshow改成$(document).ready(就搞定了~

  来咬我啊,广告君~

                          技术分享

 

使用CSS/JS代码修改博客模板plus

原文:http://www.cnblogs.com/dramstadt/p/6087585.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!