-2

私はCSS初心者です。次のコードで基本的なHTMLページを描画します。

<html>
  <head>
    <title>Hey</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <header class="top-menu"></header>
    <div class="container">
      <div class="left-side"></div>
      <div class="main-content"></div>
    </div>
    <div class="foot"></div>
  </body>
</html>

これがstyle.cssです：

.top-menu{
    position: fixed;
    top: 0;
    left: 70px;
    right: 70px;
    height: 50px;
    background-color: #000000;
}
.container{
    margin: 70px 70px 20px 70px;
    display: inline-block;
    width: 91%;
}

.left-side {
    width: 30ex;
    min-height: 30ex;
    float: left;
    background-color: blue;
}
.main-content {
    width: 80ex;
    float: right;
    background-color: red;
    min-height: 100ex;
}
.foot {
    background-color: green;
    height: 5ex;
    width: 91%;
    margin-left: 10ex;
}

目的は簡単ですが、cssはがらくたに見えます。いくつかの問題もあります。いくつか質問したいのですが。

1.コンテナの左右の余白は70pxで、トップメニューと同じですが、クロムページビューから、なぜ整列しないのですか？

2.「コンテナ」の幅を100％（足の部分と同じ）に設定すると、水平スクロールバーが表示されるのはなぜですか？

3.コンテナの表示を「インラインブロック」に設定しないと、足の部分が空中に飛んでしまうのはなぜですか？（「ブロック」に設定しても）

4.より良いCSSスタイルのコードを教えてもらえますか？

4

3 に答える 3

0

CSS3と最新のhtml標準を使用することを好むとのことですが、<header>タグはそれほど多くのブラウザベンダーに採用されていません。私はそれを使うのをやめます。IE9はそれを採用した最初のIEであり、IE6/7にはまだ多くのユーザーがいます。

取り出して<header>通常のものと交換し、<div class="header">...</div>cssを使用して参照し.header { }ます。

＃2-答えるために-あなたはwidth: 100%;左/右の余白を述べてから追加することはできず、水平スクロールバーを期待することはできません。原則として、コンテナは100％を超えます。

display: inline-block;なぜコンテナdivに追加するのかわかりません。インライン要素のみがこの宣言を持つ必要があります（つまり、テキスト要素）。特別な理由はありますか？

また、最初にhtmlテンプレートを作成してテストするときは、単に空白のままにするのではなく、常にコンテンツをdivに追加するようにしてください。追加min-height: ...は絶対確実なシステムではありません。私はいつも偽のテキストを追加します-「こんにちはこんにちは」で十分です。

最後に、適切なhtmlDoctypeを追加します。おそらくあなたは質問の部分のためにそれをトリミングしましたが、これはxhtmlですか、それともhtmlですか？これは、の使用にさらに関係しています<header>。すべてのDoctypeがをサポートしているわけではありません<header。

于 2012-12-28T11:42:30.820 に答える
0

2.「コンテナ」の幅を100％（足の部分と同じ）に設定すると、水平スクロールバーが表示されるのはなぜですか？

なぜなら、全幅が100％を超えるマージンがあるからです。

于 2012-12-28T11:44:58.523 に答える
0

すでに言われていることとは別に、これらの問題に取り組むためにクロームインスペクターを使用しようとしましたか？ページ上にマウスを置き、右クリックしてを選択するだけInspect Elementです。そこで、いくつかのCSSプロパティを有効/無効にして、何が問題なのかをすばやく見つけることができます。Firefoxの場合、同等のものはhttp://getfirebug.com/です。

レイアウトの問題については、心配しないでください。これは、私たちが始めたとき、私たち全員にとって本当に苦痛でした。あなたのポイントが実際にcssを学ぶことではなく、これを一度だけ機能させることだけが必要な場合、私のアドバイスは次のとおりです。グリッド付きのCSSフレームワークを使用します。

CSSフレームワークには通常、「グリッド」と呼ばれる優れた機能があります。それはあなたが5分であなたのようなレイアウトを設定することを可能にし、そしてこのdivがこのまたはそのブラウザでどのように浮かぶかについて心配するのをやめます。

プラス：これは使用したいWebサイトによって異なりますが、通常、グリッドを使用する場合、セクシーな魔法で行うことはあまりアマチュアに見えません。（あなたがデザイナーのバックグラウンドを持っているなら、多分あなたはすでにこれを知っています）

簡単なフレームワークから始めましょう。誰もがお気に入りを持っていますが、BluePrintを開始することをお勧めします。そして、ここにそのグリッドシステムのスーパーパワーの小さなデモンストレーションがあります;）

于 2012-12-28T12:05:30.127 に答える