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

Posted 2020-08-20 PoorLitt1eThin9

　　之前对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(就搞定了~

　　来咬我啊，广告君~