【寫漂亮的博客】讓我們的博客更加漂亮，讓我們的博客支持響應式布局！

前言

很多朋友問我的博客是什么軟件寫的，嘻嘻，其潛台詞是我的博客頁面還挺好看的呢！！！心里美滋滋的，這里就把方法共享出來吧

定制樣式而已

我的博客主要是對H1的樣式做了一點改變，給H1加上了背景色，並且對其文字做了一點改變，我們來看看我的博客的頁面；

其中的centercontent就是博客的主體，我們博客園其實是設置了地方可以定制樣式的：

在這個地方設置就可以了，我這里是這樣寫的：

<style type="text/css">
    #cnblogs_post_body
    {
        color: black;
        font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
        font-size: 16px;
    }
    #cnblogs_post_body h1
    {
        background: #2B6695;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
        font-size: 17px;
        font-weight: bold;
        height: 25px;
        line-height: 25px;
        margin: 15px 0 !important;
        padding: 5px 0 5px 20px;
        text-shadow: 2px 2px 3px #222222;
    }
</style>

這個樣子，我們的博客便會比較有層次感了。但是若是這樣就結束了，我就弱爆了！

讓我們的博客頁支持響應式布局！

在以上的CSS中我們若是加上以下CSS代碼：

@media screen and (min-width: 1px) and (max-width: 800px)
    {
        #mytopmenu
        {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }
        #centercontent
        {
            padding-left: 0;
            padding-right: 0;
            width: 100%;
        }
        #leftcontent
        {
            width: 100%;
            position: static;
            width: 100%;
        }
        #footer
        {
            margin: 0;
            width: 100%;
        }
        #comment_form
        {
            display: none;
        }
        #header
        {
            display: none;
        }
        #green_channel
        {
            display: none;
        }
        #centercontent img { width: 98% !important; }
    }

然后在這里加上以下代碼：

<script type="text/javascript">
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'initialwidth=device-width,initial-scale=1');
document.getElementsByTagName('head')[0].appendChild(meta);

</script>

於是，在手機上在網頁上，我們的博客就簡單的響應式布局啦！！！
PS：這里應該對圖片寬度有所限制才行！

結語

來吧，讓我們一起來打造我們美麗的博客吧！