psdカット画像をdiv+css形式に変換する

PSD から div css へのウェブページ切り取り例

ステップ 1: まず、すべてのタグの内側と外側の余白を 0 に設定します。実際には、BODY で使用されている HTML タグに応じて 0 にリセットする別の方法があります。* を使用して最初に 0 にリセットしてから、BODY で使用されているタグに応じてリセットすることもできます。たとえば、BODY タグで div、p を使用する場合、セレクターは body、div、p になります。* を書く必要はありません。

コードをコピー

コードは次のとおりです。

*{
マージン:0px;
パディング:0px;
}

ステップ 2: Web ページの全体的な背景を実装します。必要なコンテンツは中央に配置され、背景のグラデーションは常に画面全体に表示されます。
この場合、本文に背景画像を追加できます。水平方向に並べて表示されることを確認してください。

コードをコピー

コードは次のとおりです。

体{
背景:url(image/bj.jpg) repeat-x;
}

ステップ3: 観察することで、まずWebページを5つの部分に分割し、それぞれに対応するHTMLコードを記述することができます。
HTMLコード:

コードをコピー

コードは次のとおりです。

PS 測定により、これらの 5 つのパーツが 950 の幅を占め、中央に配置されていることがわかります。まず、グループセレクターを使用して、これらの 5 つの DIV を中央に配置できます。

コードをコピー

コードは次のとおりです。

#ヘッダー、#ナビゲーション、#バナー、#メイン、#フッター{
マージン:0px 自動;
幅:950ピクセル;
}

ステップ4: まずヘッダーを完成させる
ロゴ: 一般的に、この部分には 2 つの要件があります。1. ロゴをクリックすると、Web サイトのホームページに戻ることができます。2. SEO に注意を払いますか?そこで、次の HTML コードを使用しました。
<h1><a href="#">北京Jiefei CSSウェブページカットマップ</a></h1>
では、CSS コーディングをどのように実装すればよいのでしょうか?
誰もがまずそれについて考えることができます。次に、下に書いた CSS コードを見てください。実は、この部分では単語を画像に置き換える CSS テクニックが使われています。 CSSコードは次のとおりです

コードをコピー

コードは次のとおりです。

#ヘッダー h1 a{
背景:url(image/logo.jpg);
幅:476px;
高さ:102px;
表示:ブロック;
テキストインデント:-9999px;
}

良い。では、ヘッダーの右側を完成させましょう。まずは HTML コードを書いてみましょう。

コードをコピー

コードは次のとおりです。

<ul>
<li><a href=" #">CSS 画像切り取りトレーニング</a></li>
<li><a href=" #">ホームページとして設定</a></li>
<li><a href=" #">お気に入りに追加</a></li>
</ul>

CSSコード:

コードをコピー

コードは次のとおりです。

#ヘッダー h1{
フロート:左;
}

まず、H1 を左にフロートします。このように右側のUL部分を同じ業界で表示することができます。

コードをコピー

コードは次のとおりです。

#ヘッダー ul{
フロート:左;
パディング:50px 0px 0px 200px;
リストスタイル:なし;
}

問題を回避するために、UL をフロート状態にすることもできます。 IE の各バージョンでフローティングが設定されていないかどうか、また Firefox のパフォーマンスが一貫しているかどうかを確認できます。

コードをコピー

コードは次のとおりです。

#ヘッダー ul li{
フロート:左;
パディング:0px 10px;
}
上記のコードは Firefox と IE8 では正常に動作しますが、IE6 では問題が発生します。これについては後で説明します。
#ヘッダー ul li a{
色:#555;
テキスト装飾:なし;
フォントサイズ:13px;
}
#ヘッダー ul li a:hover{
色:#000;
テキスト装飾:下線;
}

この時点での結果は以下のようになります。

ステップ 5: ナビゲーション効果を完成させます。効果の説明: マウスを背景に置くと、背景が水色に変わり、現在のページの効果が生成されます。
HTMLコード:

コードをコピー

コードは次のとおりです。

<ul>
<li><a href=" #">ホームページ</a></li>
<li><a href=" #">ウェブサイトのデザイン</a></li>
<li><a href="#>ウェブサイトのデザイン</a></li>
<li><a href="#">オフィス研修</a></li>
<li><a href="#">グラフィックデザインの仕事</a></li>
<li><a href="#">div css トレーニング</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>

ナビゲーションコードを直接記述すると問題が発生します。ボックスモデルとフロートについて学習したことがあるなら、それを知っているはずです。
ナビゲーションテキストがヘッダーの右側に移動しました。どうすれば解決できるでしょうか?
実際、ユニバーサルクリアフロートが機能する時が来ました。
CSSコード

コードをコピー

コードは次のとおりです。

。クリア{
クリア:両方;
}

現時点では、私たちにとって<div id="nav"></div>
<div id="nav" class="clear"></div> になります。
それでは、上記の問題が解決されたかどうか確認してみましょう。実際、標準ボックスモデルに従って計算すると、計算が適切に行われていれば、この問題は発生しません。
ナビゲーションのCSSスタイルを完成させる

コードをコピー

コードは次のとおりです。

#nav{
パディング上部:3px;
}
#nav ul{
リストスタイル:なし;
}
#nav ul li{
フロート:左;
}

デフォルトでは、li は行全体を占めるため、左にフロートすることで 1 行に表示されます。次に、目的の結果を得るために A の状態を設定します。テストしてみましょう。LI に幅と高さを設定し、A の背景を設定します。目的の効果を達成し、A がブロックになるのを防ぐことができますか?

コードをコピー

コードは次のとおりです。

#nav ul li a{
表示:ブロック;
幅:135ピクセル;
高さ:56px;
行の高さ:56px;
色:#fff;
テキスト配置:中央;
テキスト装飾:なし;
フォントサイズ:14px;
}

display:block; は要素 A をブロック型にして、その幅と高さの背景を設定できるようにします。ここでのもう 1 つの重要なポイントは、line-height:56px です。これは、高さ 56px に相当します。どのような効果が得られるのでしょうか。学生の皆さん、考えてみませんか？

コードをコピー

コードは次のとおりです。

#nav ul li a:hover{
背景:#177cb7;
}

これでナビゲーションは基本的に完成しましたが、現在の状態に対するナビゲーション効果がまだ欠けています。どうすればいいですか？
実際、現在のページの A リンクに ID current のタグを追加するのは非常に簡単です。次のように：

コードをコピー

コードは次のとおりです。

<a href="#" id="current">ホームページ</a>

この状態はマウスホバー状態と一致するため、非常に簡単です。マウスホバー状態の後に #nav ul li a#current セレクターを追加するだけです。終わりましたか？

ステップ 6: 製品プロモーションバナー画像。企業の Web サイトの場合、通常はアニメーションまたは js/jquery 特殊効果になります。では写真を載せてみましょう

コードをコピー

コードは次のとおりです。

右ナビゲーション HTML コード:

コードをコピー

コードは次のとおりです。

<div class="サブメニュー">
<h5>トレーニングコース</h5>
<ul>
<li><a href=" #">ホームページ</a></li>
<li><a href="# ">ウェブサイトのデザイン</a></li>
<li><a href="# ">ウェブサイトのデザイン</a></li>
<li><a href="# ">ウェブサイトのデザイン</a></li>
<li><a href="# ">ウェブサイトのデザイン</a></li>
<li><a href="# ">div css トレーニング</a></li>
<li><a href="# ">div css トレーニング</a></li>
<li><a href="#l">お問い合わせ</a></li>
</ul>
</div>

CSS コード: 上記の制作過程で言及されたコードは以下のとおりです。だから説明せずにそのまま渡してしまうんです。

コードをコピー

コードは次のとおりです。

＃主要{
パディング:10px 0px;
}
#メイン .コンテナ{
幅:674px;
右マージン:50px;
フロート:左;
}
#メイン .サブメニュー{
幅:226px;
フロート:左;
下マージン:10px;
}
#メイン .サブメニュー h5{
背景:#19577c;
高さ:39px;
テキスト配置:中央;
色:#fff;
フォントサイズ:15px;
行の高さ:39px;
}
#main .subMenu ul li{
ボーダー下部:1px 実線 #d4d4d4;
背景:#f1f1f1;
}
#main .subMenu ul li a{
表示:ブロック;
色:#000;
高さ:36px;
行の高さ:36px;
テキスト装飾:なし;
パディング左:60px;
背景:url(image/li.jpg) 繰り返しなし 40px 50%;
}
#main .subMenu ul li a:hover{
カラー:#177cb7;
背景:url(image/li3.jpg) 繰り返しなし 40px 50%;
}

ステップ 8: メインコンテンツ領域のコーディング: 上の図から、まず HTML の書き方について考えてみましょう。私は DLDD 方式を使用しています。誰もがこのマークの使い方を学ぶ必要があります。これは非常に一般的に使用されており、製品を説明するときによく使用されます。
それでは、HTML コードを見てみましょう。

コードをコピー

コードは次のとおりです。

上記のコードは、IE6 のみが認識できることを意味します。この方法では、IE6 のみのスタイルを編集できます。

コードをコピー

コードは次のとおりです。

<!--[IE 6の場合]>
<スタイルタイプ "text/css">
#ヘッダー ul li{
幅:80ピクセル;
フロート:左;
パディング:0px 10px;
}

ヘッダー右側の幅の値

コードをコピー

コードは次のとおりです。

#main .container dl dt img{
境界線:1px実線 #ccc;
}
#main .container dl.xuexiao dt{
フロート:左;
幅:110ピクセル;
}
#main .container dl.xuexiao dd{
フォントサイズ:12px;
左マージン:20px;
フロート:右;
幅:145ピクセル;
テキストインデント:2em;
}
#フッター{
上マージン:-10px;
}
</スタイル>
<![endif]-->

他の知識も必要です。これについては後続のコースで説明します。

<<: よく使われる HTML タグとその特徴の完全なリスト

>>: JConsoler を使って Tomcat の JVM メモリを監視する方法を説明します