0

達成したい設計があり、960gs フレームワークを使用してそれを達成する 2 つの方法を見つけました。どちらが優れているかはわかりませんが、CSS のベスト プラクティスに関する情報は、たとえば PHP ほど多くありません。そこで、バニラの HTML/CSS と PHP OO から学んだことを適用して、実際に「良い」ものがないことを確認しました。

これは私のデザイン[の重要な部分]です:

ウェブデザイン

960gs フレームワークに基づいてそれを取得する 2 つの方法と、私が見つけた欠点は次のとおりです。

  1. CSS を変更して、テキストに余白を追加します。次に、その div 内で、12 列の純粋な 960gs システムを適用します。これは機能しますが、全体の幅が最適よりも広くなります (1000 ピクセル、1024x768 には適していません、ブラウザーの 9% )。

  2. 24 列モデルを使用し、最初と最後の列を空のままにして余白にします。これに関する問題は、構造要素を純粋にビジュアルに使用していることに加えて、すべてのページのすべての部分にそれらを記述する必要があることです (あまり DRY ではありません)。

2 番目の例:

<div class='grid_22 prefix_1'>    
  <p>
    The theory of relativity transformed theoretical <a href="http://en.wikipedia.org/wiki/Physics" title="Physics">physics</a> and <a href="http://en.wikipedia.org/wiki/Astronomy" title="Astronomy">astronomy</a> during the 20th century. When first published, relativity superseded a 200-year-old <a href="http://en.wikipedia.org/wiki/Classical_mechanics" title="Classical mechanics">theory of mechanics</a> created primarily by <a href="http://en.wikipedia.org/wiki/Isaac_Newton" title="Isaac Newton">Isaac Newton</a>.
  </p>
</div>

私が望むのは、自分のページに 960gs フレームワークを適用して、さらにパーソナライズされた余白を追加することです。

では、私が望むものを達成するために私が言ったこれらの問題をどのように回避しますか?

PS、960gs フレームワークのバグにより、見つけるのは容易ではありません

4

1 に答える 1

0

列の幅は 960px で、問題ないようです。列の外側の見出しのbox-shadow左右の追加幅は、異なる幅を宣言せずに作成できるため、水平スクロールバーは作成されません。

作業例: http://jsfiddle.net/q8brv/見出しの装飾の左右の部分に絶対配置を使用する (互換性 IE8+.IE7- box-shadow とこの装飾なしで生きることができます;))

解像度1024pxの上限は1004pxですが、ブラウザウィンドウを最大化した場合です。

于 2013-03-24T22:13:53.940 に答える