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

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

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;
}

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

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

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

<div id="ヘッダー"></div>
<div id="nav"></div>
<div id="バナー"></div>
<div id="メイン"></div>
<div id="フッター"></div>

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{
フロート:左;
パディング:50p​​x 0px 0px 200px;
リストスタイル:なし;
}

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

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

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

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

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

ステップ 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 セレクターを追加するだけです。終わりましたか?
psdカット画像をdiv+css形式に変換する

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

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

<img src="image/banner.jpg" height="184" src="//img.jbzj.com/file_images/article/201304/psdcutpic/image005.jpg" width="127" />

右ナビゲーション 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 コードを見てみましょう。

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

<div class="ニュース">
<dl class="xuexiao">
<h5>学校紹介<a href="#"><img src="image/more.jpg"/></a></h5>
<dt><img src="image/223.jpg" src="//img.jbzj.com/file_images/article/201304/psdcutpic/image006.jpg" width="488" />
<!--[IE 6の場合]>
<![endif]-->

上記のコードは、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 メモリを監視する方法を説明します

推薦する

HTML における要素の水平および垂直中央揃えに関する議論

ページをデザインするときには、ログイン ウィンドウを中央に配置するなど、DIV を中央に配置し、ペー...

シンプルな虫眼鏡効果を実現するJavaScript

大きな箱の中に写真があります。マウスをその上に置くと、半透明のマスク レイヤーが表示されます。マウス...

nginx 設定の場所の概要の場所の通常の書き込みと書き換えルールの書き込み

1. 場所の正規表現例を見てみましょう: 場所 = / { # 完全一致 / 、ホスト名の後に文字列...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

MySQL UNION演算子の基本知識ポイント

MySQL UNION 演算子このチュートリアルでは、MySQL UNION 演算子の構文と例を紹介...

MYSQL スロークエリとログの例の説明

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

jsvc を使用して tomcat を起動する方法 (通常のユーザーとして実行)

jsvc の紹介実稼働環境では、Tomcat はデーモン モードで実行する必要があります。Tomc...

XHTML の一般的な構造タグ

構造本文、見出し、HTML、タイトル文章abbr、頭字語、アドレス、引用ブロック、br、引用、コード...

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

MySQL 8 の新機能: 非表示のインデックス

背景インデックスは諸刃の剣です。クエリ速度は向上しますが、DML 操作も遅くなります。結局のところ、...

Linux suse11でルートパスワードを忘れた場合に変更する方法の簡単な分析

SUSE Linuxでルートパスワードを忘れた場合の解決方法SUSE (Linux オペレーティング...

MySQLの手順を完全に削除する

目次1. まずMySQLサーバーを停止する2. MySQLサーバーをアンインストールする3. MyS...

Element-ui レイアウト (行と列コンポーネント) の実装

目次基本的な手順と使用方法行コンポーネントの分析レンダリング機能ソースコード分析Col成分の分析コン...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...