記事のこのシリーズは、通過して私の庭のブログのブログを構築する過程です。

1の上にあなたのブログEpisode1--は、全体的なスタイルを変更する方法に同調し、私たちは、ページ全体のレイアウトを変更、追加することによって、スタイルをCSS。しかし、記事を発行した後、ブログのレイアウトの問題が浮上しました。

パークが動作していないデフォルトのスタイルのブログにつながる、全体のレイアウトを変更するため。さらに、水平スクロールバーは、運動の最後に表示されます。私たちは今、このブログを変更するために魔法を続けましょう！

1.メインウィンドウは、適応を増加しました

前回の記事では、我々は95％に改訂されたメインのdivのメインページの幅のIDを持っています。しかし、水平スクロールバーが狭めたときにページに表示されます。最小幅オプションの主な原因であることが判明し、チェックスタイルシート、：

溶液をそれが無限に狭いことができるように、水平スクロールバーを生成しない、MIN-幅幅0PXに変更されます。このルールが追加の後ろに、二つの規則の競合を避けるために！重要、このルールは、最も高い優先度に設定されています。さて、問題は解決します！

#main { 
    最小幅：0PX重要！。
}

2.タイトルバーのスタイルを調整します

紳士は私が誰かわからないものを私に教える：ブログの記事の後、我々は重要な問題を発見しました。。。ページのトップタイトルが欠落している、「！こんにちは、そこに」非常に厄介になります。

だから私は、ナビゲーションバーを追加し、少し改善され、効果はこれです：

記事のディレクトリのページレイアウトは、最も混沌とした場所です良い「調整」の外観を必要としています！

まず、移動終了日と重なっ：

トップ：スワップを無効にする40ピクセル要素は元のタイトルと日付を見つけるには、二つの別々の要素です。

.dayTitle{
    float:none !important;
    top:0px !important;
    text-align:center;
}

这段代码把top改成了0px，文字进行居中，但效果不尽人意：

还是直接隐藏日期吧：

.dayTitle{
    display:none;
}

文章缩略图会根据自己的大小按比例显示，这就导致了图片大小参差不齐：

一开始的想法是把图片的宽度都设置成100%，高度让它自动缩放。但这样高度不会缩放，而是会变形，这时可以定义一个max-height:10000px，他就开始自动缩放了。高度不缩放可能是CSS标准没写明的地方，但定义max-height可能就会触发浏览器重载图片，达到目的。代码如下：

.c_b_p_desc img{
    width:100%;
    max-height:10000px;
}

分别在Windows7下的Chrome 75.0.3770.142和Android P默认浏览器下进行的测试，结果如图：

总体来说实现了移动端和PC端的兼容，优化了手机用户的体验。