HTMLとCSSの「Habrahabra」を修正します

こんにちは。



「Habrahabr」もコードで構成されているため、1日に数十回、制御可能な部分を軽く修正してダウンロードします。 「ライブ」セクションのコードを修正します。



cat HTMLおよびCSSリストの下。

ソースコード

内部を掘り下げましょう。 「ライブ」セクションは、次の一連の要素で説明されています（ライブページはブログページから直接取得しています）。

<div class = "live_section">

<div class = "live_section_navtext_title">

<a href = "naz.habrahabr.ru"> <img src = "i / small_default_userpic.gif" border = "0" alt = "プロファイルを見る" title = "プロファイルを見る"> </a>

<a href= prioritynaz.habrahabr.ru»class=determinedlive_section_nickname>> naz </a>→

< ahref =アセスメントwww.habrahabr.ru/blog/google » class = determinedlive_section_navtext_title_sec >> Google </a> /

< ahref =アセスメントwww.habrahabr.ru/blog/google/17315.html#comment217245 » class = selectedlive_section_navtext_title >> GoogleがMicrosoftを独占していると非難

22 </ span>

</ div> ...

</ div>

コードの何が問題になっていますか？

1.コードが長すぎるクラス名でオーバーロードされています。

2.ユーザー名の横のマーカーは、CSSで設定される代わりに、<img>要素を使用して挿入されます。 このコードは、Liveの各ユーザー名の隣に繰り返されます。

3. HTMLの読み取りが不十分です。

4. CSSは読みにくく、スタイルシートに広がっています。

新しいコード

情報の論理を扱います

ライブ録音とは何ですか？ 実際、これは誰が、どこで、何についてコメントしたかに関する情報です。 さらに、コメント作成者の総数が示されます。 これを知って、コード要素に新しいクラス名を選択します。



そこで、 class = "who"をユーザーのリンクに、 class = "where"をブログリンクに割り当て、 トピッククラスにブログ内の特定のトピックへのリンクとして名前を付けます。



コメントの総数： class = "total"およびエントリ全体の共通コンテナの名前-class = "entry"を処理するために残ります。



次に、リンクの動作をすぐに評価します。 そのため、リンクにカーソルを合わせると、背景色とテキスト色が変わります。 いつものこと。 ただし、CSSで設定することにより、ユーザーのマーカーをバックグラウンドで非表示にするので、このリンクの上にカーソルを置くときのマーカーの特定の動作を考慮する必要があります。 この場合の壁紙を<a>要素に掛けることはできません。 背景画像を<span>に正確にぶら下げ、リンク自体の背景とリンクの色を変更することにより、<span>でラップする必要があります。 これに必要なHTMLは次のとおりです。

<div class = "live_section">

<div class = "entry">

<span class = "who"> <a href="...">ユーザー名</a> </ span>→

<a class= selectedwhere href="..."> Google </a> /

<a class= selectedtopic> href = "..."> GoogleがMicrosoftを独占の非難</a> <span class = "total"> 22 </ span>

</ div>



</ div>

これで、より読みやすく簡単な既製のHTMLコードができました。 スタイルで飾ります。

新しいスタイル

親から始めましょう。 スタイルで数分騒ぎ立てても、私はそれを何とかまとめました。 後で繰り返すのではなく、プロパティの継承を使用するために、記述する必要があるものを次に示します。

.live_section {

パディング：20px 20px 7px 20px;

フォントファミリー：タホマ、arial;

フォントサイズ：12px;

}

次に、ライブレコーディングの下部インデントを設定します。

.live_section .entry {

マージン底：1ex;

}

3つのリンクすべての一般的なプロパティについて説明します。

.live_section span.who a 、 .live_section .where 、 .live_section .topic {

マージン底：1ex;

行の高さ：1.35em;

}

次に、特定のプロパティを指定します。

.live_section .who {

padding-left：16px;

背景：url（i / small_default_userpic.gif）0 50％繰り返しなし;

}

.live_section .who a 、 .live_section .where {

色：＃999;

}

.live_section .topic {

色：＃666;

}

リンクの動作を説明します。

.live_section span.who a：ホバー 、 .live_section a.where：ホバー {

テキスト装飾：なし;

背景：＃ff6666;

色：白;

}

.live_section a.topic：ホバー {

テキスト装飾：なし;

背景：＃66cc66;

色：白;

}

そして最後に、コメントの総数を装飾します。

span.total {

色：＃CC0000;

}

私の意見では、それはうまくいきました。 生きた例です。 コードが簡単になり、理解しやすくなりました。



UPD ： Vladimir Agafonkin の代替バージョン 。



PSこの例では、無関係なページ要素は意図的に削除されています。 のための利便性。