百度ホームページ（演習）_html/css_WEB-ITnose

私は数日間 Html と CSS を学び、練習として Baidu のホームページを作成しました (それが最も簡単なので)。私は Javascript をまだ見たことがないので、レイアウトをできるだけ似せるように努めます。

Baidu のホームページは比較的シンプルで、右上隅のラベル、ロゴとフォーム、そしてその下の著作権情報の 3 つの部分に大別されます。

最初の部分はコードの上部です:

 1 <div class="top"> 2     <div class="title"> 3         <span> 4             <a class="bold" href="#">新闻</a>  5             <a class="bold" href="#">hao123</a>  6             <a class="bold" href="#">地图</a>  7             <a class="bold" href="#">视频</a>  8             <a class="bold" href="#">贴吧</a>  9             <a href="#">登陆</a> 10             <a href="#">设置</a> 11             <input class="list" type="submit" value="更多产品" name="submit" /> 12         </span>13     </div>14 </div><br />

この部分のスタイルシート:

.top{    width:100%;    height:64px;}.top>.title{    height:64px;    float:right;}.top>.title>span{    line-height:64px;    float:right;}.top>.title>span>a{    font-size:13px;    font-family:"宋体";    text-decoration:underline;    color:#333}.top>.title>span>.bold{    font-weight:bold;}.list{    border:0;    height:25px;    width:60px;    background:#36F;    color:#fff;}

ここでは多くのレベルのネストが使用されています。まず、top でページ全体が横方向に埋まるように幅を設定します。

上部のタイトルレイヤーは float:right; を使用してコンテンツを右に配置します。

タイトルのスパンレイヤーは、line-heightを使用して垂直方向の中央に配置します。

タイトルの幅とスパンは両方とも適応可能です。

最後の「その他の製品」を除いて、いくつかのラベルのフォント スタイルは比較的簡単に定義できます。ここでは、フォームのボタンを使用して幅と高さ、背景色、フォントの色を定義します。単色のボタンを作成する場合は、境界線を 0 に変更することを忘れないでください。

効果はおおよそ次のとおりです (Chrome):

Baidu ページを比較してください:

効果は基本的に同じです (タイプミスがあるようです)

ただし、「より多くの製品」 「この部分の文字は左側に揃っていますが、ボタンの上下の境界線は何も揃っていません。これは設計ミスなのかわかりません（よく見ると個人的には少し違和感を感じます）」 ）。

以下は本文部分です。最初にコードを貼り付けます:

<div class="body">    <div class="pic">        <img class="logo" src="logo.png" />    </div>    <div class="search">        <form>            <label for="search"></label>            <input class="input" type="text" name="search" id="search" value="" /><input class="btn" type="submit" value="百度一下" name="submit" />        </form>    </div></div>

スタイルシート:

.pic{    text-align:center;    margin-bottom:30px;}.logo{    height:130px;    width:270px;}.search{    text-align:center;}.input{    width:540px;    height:36px;}.btn{    border:0;    width:100px;    height:40px;    background:#36F;    font-size:15px;    color:#fff;}

本文は、画像と検索ボックスの 2 つのブロックに分かれています。

画像を水平方向に中央に配置し、最上位レイヤーからある程度の距離を作成するために、画像は div でラップされています。画像自体のサイズも変更する必要があります。

検索ボックス部分にフォームを使用し、検索レイヤーのレベルと中心を調整します。

ここではフォームとボタンのスタイルシートに記述することがたくさんあります:

フォームの場合、幅と高さを調整するだけで済みます。ボタンは幅と高さを除いて以前と同じです。また、フォントと背景を0に設定する必要があります。フラットなボタンになります。

作成されたページの詳細が 1 つだけ元の Web ページと異なります:

元の Web ページのフォームとボタンは厳密に位置合わせされていますが、私が作成した Web ページは少しずれています。

（更新する解決策）ページの位置はよりセマンティックであるため、ここでは絶対値が使用され、下部から少し離れた位置に配置されます (Baidu と同様)。

2 行の情報は 2 つのブロックに分割され、別々に定義され、両方とも水平方向の中央に配置されるように設定されます。効果は次のとおりです:

元のウェブページ:

効果はまだ非常に近いですが、全体的な効果の画像 (Chrome) を見てみましょう:

かなりいい感じですクリックできないこと以外は問題ありません。

次回は、より複雑な Web ページを書いてみてください。

(追記: IE はちょっと悲惨だったのでリリースしませんでした)