• 自己动手美化博客园个人博客


    本文主题

          博客园为大家提供了一个非常好的交流平台,在这里大家可以相互交流,互相提高。文章不光要写的好,个人主页也应高要做的赏心悦目,一篇好的文章加上好的页面,自然让人流连忘返。下面的内容是我这几天自己动手修改个人主页的css样式的总结,希望对你主页的样式修改能有一定的帮助。强烈鄙视某些无知的博客园编辑因为自己的无知而撤销别人的博客。

    CSS扫盲

           这部分主要是给那些没有接触过CSS样式表的朋友介绍一下怎么使用css来修改你的控件的样式。

    首先,我们假设有一个<div></div>,对其进行样式修改,基本的css引用方式有四种:

    • 直接修改方式:在div标签内部加上style标记,在style内部加上要控制的内容,这种方式只能控制当前的div,例:
    <div style="width:100px;
    
                height:100px;
    
                background-color:red;
    
                border:1px;">
    
    </div>
    • 通过id控制的方式:在div标签上面加上id标记,然后给一个唯一的id,然后在页面的<head></head>标签内写上<style></style>标记来设置相应的css样式或者通过引用css文件的方式来设置,这种方式只能控制id为test的div,例如:
    <html>
    
    <head>
    
    <style type="text/css">
    
     #test{
    
        width:100px;
    
        height:100px;
    
        background-color:red;
    
        border:1px;
    
     }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="test">这是一个测试的div</div>
    
    </body>
    
    </html>

    注意:采用id控制的方式在控制其样式时要在id的前面加“#”。

    • 通过class方式:在div标签中加入class标记,这种方式可以控制多个标记,只要把相应的标签的class设置成你写的类名就可以。例如:
    <html>
    
    <head>
    
    <style type="text/css">
    
    .test{
    
      width:100px;
    
      height:100px;
    
      background-color:red;
    
      border:1px;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="test"></div>
    
    </body>
    
    </html>

    注:采用class的方式,在css文件中要使用“.”作为其前缀。这种方式可以对多个标签进行控制,只要设置相应的标签的class属性即可。

    • 通过控制标记的方式:对一种类型的标记进行控制,如:
    <html>
    
    <head>
    
    <style type="text/css">
    
    div{
    
      width:100px;
    
      height:100px;
    
      background-color:red;
    
      border:1px;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div>测试一</div>
    
    <div>测试二</div>
    
    <div>测试三</div>
    
    </body>
    
    </html>

    注:这种方式可以在整体上进行控制,一般在网站的整体风格控制上面用的比较多。

    首页css的修改方法

         要修改css样式必须借助一些web端的开发工具,不过这些工具都比较好找,有时候你会发现他们就在你的身边,最常用的两个工具是IE7,8,9自带的开发人员工具和FF自带的开发人员工具,不管是那个只要按F12都可以调用出来。

         现在以修改主页上面的博主名称的样式来说明怎么使用这些工具:F12->HTML->点击下面的箭头标志

    image

    然后把鼠标放在你的名称上面,会出现一个蓝色的框,这时候点击一下,在工具里面就会出现那个标签相应的一些信息:

    image

    其中的class和id就要我们要寻找的内容:

    image

    接下来就可以通过这两个标记来修改成你想要的样式了。

    添加订阅到各个网站的办法

    订阅到各个网站的代码到Google上面搜有一大片,在这里就不多说了。只要复制这些代码,然后加到你的页面中去就可以了,最简单的方式是加入到公告中。我是使用javascript的方式将其加入到博文列表的最上方,如下图:

    image

    实现的思路如下:

    使用js创建一个div,将订阅到的代码加入到div中;得到页面上列表所在div的class或者id,然后使用insertChild的方式将新建的div插入到页面上列表的div的最前面,从而实现上面的效果,主要的代码如下:

    <script type="text/javascript">
    
    function loadRSS(){
    
    
    
    var mainC = document.getElementsByTagName('div');
    
    var mainS;
    
    for(var i = 0 ; i < mainC.length ; i++){
    
       if(mainC[i].className == 'forFlow'){
    
          mainS = mainC[i];
    
          break;
    
        }
    
    }
    
    if(!mainS){
    
      return;
    
    }
    
    var disdy = document.createElement('div');
    
    disdy.style.width = '100%';
    
    //disdy.style.height = '30px';
    
    //disdy.style.border = 'solid 1px ';
    
    mainS.insertBefore(disdy,mainS.childNodes[0]);  
    
    disdy.innerHTML = '<a style="valign:center;" target="_blank" title="订阅到鲜果 RSS阅读器" href="http://xianguo.com/subscribe?url=http%3A%2F%2Fwww.cnblogs.com%2Frushoooooo%2Frss"><img src="http://xgres.com/static/images/sub/sub_XianGuo_09.gif" border="0" alt="鲜果阅读器订阅图标" /></a>';
    
    
    
    disdy.innerHTML += '&nbsp;&nbsp;<img style=" 21px; height: 20px" src="http://www.cnblogs.com/Emoticons/others/think001.gif" width="21" height="20"  alt="" />&nbsp;&nbsp;<a title="订阅到Google" href="http://fusion.google.com/add?source=atgs&feedurl=http%3A//www.cnblogs.com/rushoooooo/rss"><img src="http://gmodules.com/ig/images/plus_google.gif" border="0" alt="Add to Google"></a>';
    
    
    
    disdy.innerHTML += '&nbsp;&nbsp;<img style=" 21px; height: 20px" src="http://www.cnblogs.com/Emoticons/others/think001.gif" width="21" height="20"  alt="" />&nbsp;&nbsp;<a title="订阅到有道阅读" target="_blank" href="http://reader.youdao.com/b.do?keyfrom=bookmarklet&url=http%3A%2F%2Fwww.cnblogs.com%2Frushoooooo%2Frss"><img src="http://reader.youdao.com/images/feed-btn-1.gif" border="0" alt="订阅到有道阅读" /></a>';
    
    //////
    
    disdy.innerHTML += '&nbsp;&nbsp;<img style=" 21px; height: 20px" src="http://www.cnblogs.com/Emoticons/others/think001.gif" width="21" height="20"  alt="" />&nbsp;&nbsp;<a title="订阅到抓虾" target="_blank" href="http://www.zhuaxia.com/add_channel.php?sourceid=102&url=http://www.cnblogs.com/rushoooooo/rss"><img src="http://www.iewb.net/wp-content/uploads/2010/01/1.gif" border="0" alt="订阅到抓虾" /></a>';
    
    /////////////////
    
    disdy.innerHTML += '&nbsp;&nbsp;<img style=" 21px; height: 20px" src="http://www.cnblogs.com/Emoticons/others/think001.gif" width="21" height="20"  alt="" />&nbsp;&nbsp;<a title = "订阅到雅虎" target="_blank" href="http://add.my.yahoo.com/rss?url=http://www.cnblogs.com/rushoooooo/rss"><img src="http://www.iewb.net/wp-content/uploads/2010/01/6.gif" border="0"/></a>';
    
    /////////////////////////
    
    disdy.innerHTML += '&nbsp;&nbsp;<img style=" 21px; height: 20px" src="http://www.cnblogs.com/Emoticons/others/think001.gif" width="21" height="20"  alt="" />&nbsp;&nbsp;<A title="订阅到bloglines" href="http://www.bloglines.com/sub/http://www.cnblogs.com/rushoooooo/rss" target="_blank"><IMG  src="http://www.iewb.net/wp-content/uploads/2010/01/8.gif" vspace="2" border="0"></A>';
    
    /////////
    
    disdy.innerHTML += '&nbsp;&nbsp;<img style=" 21px; height: 20px" src="http://www.cnblogs.com/Emoticons/others/think001.gif" width="21" height="20"  alt="" />&nbsp;&nbsp;<A title="订阅到WindowsLive" href="http://www.live.com/?add=http://www.cnblogs.com/rushoooooo/rss" target="_blank"><IMG src="http://www.iewb.net/wp-content/uploads/2010/01/10.gif"/></A>';
    
    ///////////
    
    disdy.innerHTML += '&nbsp;&nbsp<img style=" 21px; height: 20px" src="http://www.cnblogs.com/Emoticons/others/think001.gif" width="21" height="20"  alt="" />&nbsp;&nbsp;<A title="订阅到Newsgator" href="http://www.newsgator.com/ngs/subscriber/subfext.aspx?url=http://www.cnblogs.com/rushoooooo/rss" target="_blank"><IMG src="http://www.iewb.net/wp-content/uploads/2010/01/7.gif" border="0"/></A>';
    
    }
    
    </script>

    如果觉得本文好的话就分享给你的朋友把!
  • 相关阅读:
    zabbix 二 zabbix agent 客户端
    zabbix (一:zabbix服务端)
    ssh ip "WARING:REMOTE HOST IDENTIFICATION HAS CHANGED!"
    undefined reference to libiconv_open'
    linux 远程 windows 命令:rdesktop vs windows mstsc
    源码安装mysql
    svn 结合rsync 的代码发布系统
    svn !
    使用rsync 的 --delete参数删除目标目录比源目录多余的文件
    svn 提交冲突(目录下删除文件)
  • 原文地址:https://www.cnblogs.com/rushoooooo/p/2159136.html
Copyright © 2020-2023  润新知