简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  div+CSS の Web ページ例 style_html/css_WEB-ITnose

div+CSS の Web ページ例 style_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:29:311199ブラウズ

一下我的一个实验页代码:


htm code:


profile=http://gmpg.org/xfn/11>Recipes Weblog

href="style.css" type=text/css rel=stylesheet>












Recipes Weblog


Recipes of the most delicious dishes











src="images/spacer.gif" align=top>





Jan 10, 2007

href="?p=3" rel=bookmark>Greek
Meatballs

Posted by Elise

src="images/comm_bg.jpg" align=top>Comments
(0)



I found this recipe in the weekend edition of the Wall St. Journal as good
“noshing” food for New Year’s and had to give it a try, with a few minor
changes. It comes from chef Michael Symon of the Parea Greek restaurant in New
York and Lola & Lolita Bistro in Cleveland. The meatballs are quite tasty
and work well dipped in a little yogurt.


Continue
reading "Greek Meatballs"src="images/more_bg.jpg" align=top>





Dec 10, 2006

href="?p=4" rel=bookmark>Nut
Muffins

Posted by Elise

src="images/comm_bg.jpg" align=top>href="comments.htm">Comments
(2)



If time and waistline permitted, I could wake up every morning to the smell
of fresh muffins baking in the oven, especially these banana nut muffins. This
recipe is based on our popular banana bread recipe, with a little less sugar, a
cup of chopped walnuts, and a dash of espresso. Lest you be tempted to snatch
the muffins pictured here right out of your computer screen, you should know
that they’ve long since been consumed, minutes after the photo was taken.


Continue
reading "Nut Muffins"src="images/more_bg.jpg" align=top>





Nov 10, 2006

href="?p=5" rel=bookmark>Pound
Cake

Posted by Elise

src="images/comm_bg.jpg" align=top>href="?p=5#comments">Comments
(0)


You know it’s a good sign when your friend the pastry chef raves about a
recipe. Especially when it has the words “eggnog” and “cake” in it. Thank you
Evie for the recipe, it was delicious. It’s a keeper!


Continue
reading "Pound Cake"src="images/more_bg.jpg" align=top>























Recent Comments





Recipes Weblog is proudly powered by href=""
target=_blank>SMQ





Css 样式コード:

BODY {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 0px;マージン: 0px;色: #555555;パディングトップ: 0px;背景色: #ffffff
}
A {
カラー: #ff5400;テキスト装飾: 下線
}
A:hover {
COLOR: #ff5400;テキスト装飾: なし
}
.postmetadataalt {
FONT-SIZE: 0.81em
}
.pagetitle {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 20px;マージン: 0px; PADDING-TOP: 0px
}
P {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 0px;マージン: 0px; PADDING-TOP: 0px
}
HTML {
FONT-SIZE: 11px; FONT-FAMILY: arial、tahoma、verdana
}
.normal {
FONT-SIZE: 1.01em; FONT-FAMILY: arial、tahoma、verdana
}
.small {
FONT-SIZE: 0.81em; FONT-FAMILY: arial、tahoma、verdana
}
.big {
FONT-SIZE: 1.11em; FONT-FAMILY: arial、tahoma、verdana
}
H1 {
PADDING-RIGHT: 0px;パディング左: 0px;フォントサイズ: 2.61em;パディングボトム: 0px;マージン: 0px;テキスト変換: 大文字。色: #ffffff;行の高さ: 1.01em; PADDING-TOP: 0px
}
H2 {
PADDING-RIGHT: 0px;パディング左: 0px;フォントサイズ: 2.11em;パディングボトム: 0px;マージン: 0px;色: #ff5400; PADDING-TOP: 0px
}
H3 {
PADDING-RIGHT: 0px;パディング左: 0px;フォントサイズ: 2.11em;パディングボトム: 0px;マージン: 0px;色: #ff5400; PADDING-TOP: 0px
}
#respond {
PADDING-RIGHT: 0px;パディング左: 0px;フォントサイズ: 2.11em;パディングボトム: 0px;マージン: 0px;色: #ff5400; PADDING-TOP: 0px
}
.content_txt H2 A {
COLOR: #ff5400;テキスト装飾: なし
}
.content_txt H2 A:hover {
COLOR: #ff5400;テキスト装飾: なし
}
.h2 {
PADDING-RIGHT: 5px;パディング左: 9px;フォント サイズ: 1.01em;パディングボトム: 10px;マージン: 0px;テキスト変換: 大文字。色: #ffffff;行の高さ: 1.01em; PADDING-TOP: 8px
}
.head_px {
BACKGROUND: url(head_px.jpg)repeat-x 左上;垂直整列: 上;幅: 100%; HEIGHT: 164px
}
.head_left {
BACKGROUND: url(head_left.jpg) 繰り返しなしの左上;垂直整列: 上;幅: 100%;高さ: 164px
}
.head_right {
BACKGROUND: url(head_right.jpg) 繰り返しなし右上;垂直整列: 上;幅: 100%; HEIGHT: 164px
}
.main_div {
VERTICAL-ALIGN: 上;幅: 719ピクセル;テキスト配置: left
}
.head_line {
BACKGROUND: url(head_line.jpg)repeat-x 左上;垂直整列: 上;幅: 100%; HEIGHT: 33px
}
.footer {
BACKGROUND: url(footer.jpg)repeat-x 左上;垂直整列: 上;幅: 100%;高さ: 70px
}
.footer_txt {
PADDING-RIGHT: 0px;パディング左: 188px;パディングボトム: 0px;垂直整列: 上;色: #ああああ; PADDING-TOP: 11px
}
.footer_txt A {
FONT-WEIGHT: 太字;色: #ああああ;テキスト装飾: 下線
}
.footer_txt A:hover {
FONT-WEIGHT: 太字;色: #ああああ;テキスト装飾: なし
}
.table {
WIDTH: 719px
}
.table_row {
WIDTH: 719px;高さ: 100%
}
.left {
VERTICAL-ALIGN: 上;幅: 159ピクセル;高さ: 100%; TEXT-ALIGN: left
}
.right {
VERTICAL-ALIGN: top;幅: 401ピクセル;高さ: 100%;テキストの配置: 左
}
.table1 {
幅: 719px
}
.table_row1 {
幅: 719px;高さ: 100%
}
.left1 {
背景: url(co_name.gif) 繰り返しなし右上;垂直整列: 上;幅: 453ピクセル;高さ: 164ピクセル;テキスト配置: left
}
.right1 {
背景: url(search_bg.gif) 繰り返しなし右上;垂直整列: 上;幅: 266ピクセル;高さ: 164ピクセル;テキスト揃え: 左
}
.co_name {
パディング右: 0px;パディング左: 0px;パディングボトム: 0px;垂直整列: 上; PADDING-TOP: 60px
}
.co_name A {
COLOR: #ffffff;テキスト装飾: なし
}
.co_name A:hover {
COLOR: #ffffff;テキスト装飾: なし
}
.slogan {
PADDING-RIGHT: 0px;パディング左: 0px;フォント サイズ: 0.81em;パディングボトム: 0px;垂直整列: 上;テキスト変換: 大文字。色: #80a489;パディングトップ: 0px;文字間隔: 2px
}
#search {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 0px;垂直整列: 上;色: #ffffff;線の高さ: 1.11em; PADDING-TOP: 60px
}
#search STRONG {
TEXT-TRANSFORM: 大文字; COLOR: #ffffff
}
#search INPUT {
 ボーダー右: #cfcfcf 1px インセット;パディング右: 0px;ボーダートップ: #cfcfcf 1px インセット;パディング左: 0px;フォントサイズ: 11px;パディングボトム: 0px;マージン: 3px 8px 0px 0px;垂直整列: 上;ボーダー左: #cfcfcf 1px インセット;幅: 222ピクセル;色: #000000;パディングトップ: 0px; BORDER-BOTTOM: #cfcfcf 1px インセット; FONT-FAMILY: エリアル、タイムズ ニュー ローマン、タホマ、ベルダナ。高さ: 21ピクセル;背景色: #f4f4f4
}
#search .input {
PADDING-RIGHT: 0px;パディング左: 0px;背景: なし透明スクロール繰り返し 0% 0%。パディングボトム: 0px;マージン: 3px 0px 0px;垂直整列: 上;幅: 24ピクセル;ボーダートップスタイル: なし。パディングトップ: 0px;ボーダー右スタイル: なし。ボーダー左スタイル: なし。高さ: 22ピクセル; BORDER-BOTTOM-STYLE: none
}
.sub_right {
MARGIN: 0px 28px 0px 30px;垂直整列: 上;幅: 343ピクセル;テキスト配置: 左
}
.table2 {
WIDTH: 343px
}
.table_row2 {
WIDTH: 343px;高さ: 100%
}
.left2 {
VERTICAL-ALIGN: 上;幅: 142ピクセル;高さ: 100%; TEXT-ALIGN: left
}
.right2 {
VERTICAL-ALIGN: top;幅: 201ピクセル;高さ: 100%; TEXT-ALIGN: left
}
.head {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 0px;色: #899295;線の高さ: 通常。 PADDING-TOP: 3px
}
.head SPAN {
FONT-SIZE: 0.81em; COLOR: #899295
}
.head A {
COLOR: #ff5400;テキスト装飾: なし
}
.head A:hover {
COLOR: #ff5400;テキスト装飾: なし
}
.comment {
PADDING-RIGHT: 0px;パディング左: 0px;フォントの太さ: 太字。パディングボトム: 0px;マージン: 0px;色: #ff002a; PADDING-TOP: 5px
}
.comment A {
COLOR: #ff002a;テキスト装飾: なし
}
.comment A:hover {
COLOR: #ff002a;テキスト装飾: 下線
}
.content_txt {
PADDING-RIGHT: 0px;パディング左: 0px;フォント サイズ: 1.11em;パディングボトム: 0px;垂直整列: 上;行の高さ: 1.41em; PADDING-TOP: 12px
}
.content_txt A {
COLOR: #555555;テキスト装飾: 下線
}
.content_txt A:hover {
COLOR: #555555;テキスト装飾: なし
}
.content_txt STRONG {
COLOR: #555555
}
.more {
PADDING-RIGHT: 0px;パディング左: 0px;パディング-ボトム: 37px;マージン: 0px;色: #00ae21; PADDING-TOP: 10px
}
.more A {
FONT-WEIGHT: 太字;色: #00ae21;テキスト装飾: なし
}
.more A:hover {
FONT-WEIGHT: 太字;色: #00ae21;テキスト装飾: 下線
}
.cats2 {
背景: url(cats2.jpg)repeat-y 左上;マージン: 0px 0px 15px;垂直整列: 上;幅: 159px
}
.cats1 {
BACKGROUND: url(cats1.jpg) 繰り返しなし左上;垂直整列: 上;幅: 159ピクセル; HEIGHT: 100%
}
.cats3 {
BACKGROUND: url(cats3.jpg) リピートなし左下;垂直整列: 上;幅: 159ピクセル;高さ: 100%
}
.widget_style {
PADDING-RIGHT: 4px;パディング左: 4px;パディングボトム: 4px;垂直整列: 上;色: #555555;パディングトップ: 4px;テキスト整列: 左
}
.cats_bg {
垂直整列: 上;背景色: #6a6a6a
}
.widget_style A {
COLOR: #555555;テキスト装飾: 下線
}
.widget_style A:hover {
COLOR: #555555;テキスト装飾: なし
}
.widget_style UL {
PADDING-RIGHT: 5px;パディング左: 8px;背景: なし透明スクロール繰り返し 0% 0%。パディングボトム: 15px;マージン: 0px; PADDING-TOP: 10px
}
.widget_style LI {
PADDING-RIGHT: 0px;パディング左: 11px;背景: url(li_bg.jpg) 繰り返しなしの左上。パディングボトム: 0px;マージン: 0px;垂直整列: 上;色: #555555;行の高さ: 1.81em;パディングトップ: 0px; LIST-STYLE-TYPE: none
}
.widget_style UL LI A {
COLOR: #555555;テキスト装飾: なし
}
.widget_style LI A:hover {
COLOR: #555555;テキスト装飾: 下線
}
#archives {
VERTICAL-ALIGN: top
}
#links_with_style {
VERTICAL-ALIGN: top
}
#meta {
VERTICAL-ALIGN: top
}
#recent-comments {
VERTICAL-ALIGN: top
}
#recent-posts {
VERTICAL-ALIGN: top
}
#categories {
VERTICAL-ALIGN: top
}
#calendar_wrap {
PADDING-RIGHT: 10px;パディング左: 18px;パディング-ボトム: 15px;垂直整列: 上; PADDING-TOP: 15px
}
#calendar {
VERTICAL-ALIGN: top
}
#calendar_wrap A {
FONT-WEIGHT: 太字;テキスト装飾: 下線
}
#calendar_wrap A:hover {
FONT-WEIGHT: 太字;テキスト装飾: なし
}
#google-search {
垂直配置: 上
}
#gsearch {
テキスト配置: 左
}
#pages {
垂直配置: 上
}
#text-1 {
VERTICAL-ALIGN: top
}
.textwidget {
 パディング右: 10px;パディング左: 8px;パディングボトム: 15px;パディングトップ: 15px;テキスト整列: 左
}
#delicious {
垂直整列: 上
}
#デリシャス-ボックス {
テキスト整列: 左
}
#categories .cats_bg {
垂直整列: 上;背景色: #cc8c00
}
#archives .cats_bg {
垂直位置合わせ: トップ;背景色: #548f00
}
#archives LI {
PADDING-RIGHT: 0px;パディング左: 0px;背景: なし透明スクロール繰り返し 0% 0%。パディングボトム: 0px;マージン: 0px;垂直整列: 上;色: #005286;行の高さ: 1.81em;パディングトップ: 0px;リストスタイルタイプ: なし
}
#archives UL LI A {
COLOR: #005286;テキスト装飾: 下線
}
#archives LI A:hover {
COLOR: #005286;テキスト装飾: なし
}
.left #search {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 15px;垂直整列: 上;色: #000000;線の高さ: 1.11em; PADDING-TOP: 0px
}
.left #search STRONG {
TEXT-TRANSFORM: 大文字; COLOR: #000000
}
.left #search INPUT {
BORDER-RIGHT: #cfcfcf 1px inset;パディング右: 0px;ボーダートップ: #cfcfcf 1px インセット;パディング左: 0px;フォントサイズ: 11px;パディングボトム: 0px;マージン: 5px 0px 0px;垂直整列: 上;ボーダー左: #cfcfcf 1px インセット;幅: 157ピクセル;色: #000000;パディングトップ: 0px; BORDER-BOTTOM: #cfcfcf 1px インセット; FONT-FAMILY: エリアル、タイムズ ニュー ローマン、タホマ、ベルダナ。高さ: 21ピクセル;背景色: #f4f4f4
}
.left #search .input {
PADDING-RIGHT: 0px;パディング左: 0px;背景: なし透明スクロール繰り返し 0% 0%。パディングボトム: 0px;マージン: 5px 0px 0px 133px;垂直整列: 上;幅: 24ピクセル;ボーダートップスタイル: なし。パディングトップ: 0px;ボーダー右スタイル: なし。ボーダー左スタイル: なし。高さ: 22ピクセル; BORDER-BOTTOM-STYLE: none
}
.right #search {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 0px;垂直整列: 上;色: #000000;線の高さ: 1.11em; PADDING-TOP: 10px
}
.right #search STRONG {
TEXT-TRANSFORM: 大文字; COLOR: #000000
}
.right #search INPUT {
BORDER-RIGHT: #cfcfcf 1px inset;パディング右: 0px;ボーダートップ: #cfcfcf 1px インセット;パディング左: 0px;フォントサイズ: 11px;パディングボトム: 0px;マージン: 3px 8px 0px 0px;垂直整列: 上;ボーダー左: #cfcfcf 1px インセット;幅: 222ピクセル;色: #000000;パディングトップ: 0px; BORDER-BOTTOM: #cfcfcf 1px インセット; FONT-FAMILY: エリアル、タイムズ ニュー ローマン、タホマ、ベルダナ。高さ: 21ピクセル;背景色: #f4f4f4
}
.right #search .input {
PADDING-RIGHT: 0px;パディング左: 0px;背景: なし透明スクロール繰り返し 0% 0%。パディングボトム: 0px;マージン: 3px 0px 0px;垂直整列: 上;幅: 24ピクセル;ボーダートップスタイル: なし。パディングトップ: 0px;ボーダー右スタイル: なし。ボーダー左スタイル: なし。高さ: 22ピクセル;ボーダーボトムスタイル: なし
}

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：画像のシームレススクロール (div+css)_html/css_WEB-ITnose次の記事：画像のシームレススクロール (div+css)_html/css_WEB-ITnose

関連記事

続きを見る