【寫漂亮的部落格】讓我們的部落格更加漂亮，讓我們的部落格支援響應式布局！

前言

很多朋友問我的部落格是什麼軟體寫的，嘻嘻，其潛台詞是我的部落格頁面還挺好看的呢！！！心裡美滋滋的，這裡就把方法共享出來吧

定制樣式而已

我的部落客要是對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;

        #leftcontent

            position: static;

        #footer

            margin: 0;

        #comment_form

            display: none;

        #header

        #green_channel

        #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：這裡應該對圖檔寬度有所限制才行！

結語

來吧，讓我們一起來打造我們美麗的部落格吧！ 

本文轉自葉小钗部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2013/05/27/3101311.html，如需轉載請自行聯系原作者