***** top_page_12.html *****

＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"＞
＜html lang="ja"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=shift_jis"＞
＜title>只今お勉強中！＜/title＞
＜link href="style_12.css" rel="stylesheet" type="text/css"＞
＜/head＞

＜body＞

＜div class="header"＞
＜img class="header" src="header_01.jpg" alt=""＞＜/div＞

＜div class="logo"＞
＜img class="logo" src="logo.jpg" alt=""＞
＜div clsss="02"＞
＜h1＞「小原っちの白ロム屋さん」は、携帯電話白ロムの買取り販売サイトです。＜/h1＞
＜ul class="top_menu"＞
＜li class="top_menu"＞
＜div class="top_menu_01"＞＜a href="http://gshop2.com/main/index.html" target="_self"＞HOME＜/a＞＜/div＞＜!--
--＞＜div class="top_menu_02"＞＜img class="top_menu" src="bar.jpg" alt=""＞＜/div＞＜/li＞
＜li class="top_menu"＞
＜div class="top_menu_01"＞＜a href="http://gshop2.com/main/faq.html" target="_self"＞FAQ＜/a＞＜/div＞＜!--
--＞＜div class="top_menu_02"＞＜img class="top_menu" src="bar.jpg" alt=""＞＜/div＞＜/li＞
＜li class="top_menu"＞
＜div class="top_menu_01"＞＜a href="http://gshop2.com/main/kiyaku.html" target="_self"＞ご利用規約＜/a＞＜/div＞＜!--
--＞＜div class="top_menu_02"＞＜img class="top_menu" src="bar.jpg" alt=""＞＜/div＞＜/li＞
＜li class="top_menu"＞
＜div class="top_menu_01"＞＜a href="http://gshop2.com/main/privacy.html" target="_self"＞プライバシーポリシー＜/a＞＜/div＞＜!--
--＞＜div class="top_menu_02"＞＜img class="top_menu" src="bar.jpg" alt=""＞＜/div＞＜/li＞
＜li class="top_menu"＞
＜div class="top_menu_01"＞＜a href="http://gshop2.com/main/sitemap.html" target="_self"＞サイトマップ＜/a＞＜/div＞＜!--
--＞＜div class="top_menu_02"＞＜img class="top_menu" src="bar.jpg" alt=""＞＜/div＞＜/li＞
＜li class="top_menu"＞
＜div class="top_menu_01"＞＜a href="http://gshop2.com/main/inquiry.php" target="_self"＞お問い合わせ＜/a＞＜/div＞＜!--
--＞＜div class="top_menu_02"＞＜img class="top_menu" src="bar.jpg" alt=""＞＜/div＞＜/li＞
＜/ul＞

＜/div＞
＜/div＞

＜div class="note"＞＜p＞このページはHTMLの学習のために、既にあるサイトを勝手に真似ているもので、製作途中の体裁の悪い状態にありますが、元のサイトにはなんら非はありません。また内容も学習途中におちゃらけて書き換えたりしている部分があるので、信用のおけるものではなくなっています。 ＜/p＞＜/div＞

＜/body＞
＜/html＞


***** top_page_12.css *****

body { margin-top: 0px;
text-align: center;
background: url("header_back.gif") repeat-x;
background-color: #CBE5FF;
}

a { text-decoration: none;
}

div.header {
margin: 0px;
padding: 0px;
}

img.header {
margin: 0px auto;
width: 820px;
}

div.logo {
margin: 0px auto;
width: 860px;
height: 55px;
background: url("wrapper_01.gif") repeat-y;
}

div.02 {margin: 0px;
padding: 0px;
}

img.logo {
margin: 0px;
padding-left: 20px;
width: 352px;
height: 55px;
float: left;
display: block;
}

h1 { margin: 0px 20px 0px 0px;
padding-top: 5px;
width: 468px;
height: 20px;
float: right;
text-align: right;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 11px;
font-weight: 100;
color: white;
background: url("coment_back.jpg") repeat-x;
}

ul.top_menu {
margin: 0px 20px 0px 0px;
padding: 0px;
list-style-type: none;
float: left;
text-align: right;
width: 468px;
height: 30px;
white-space: nowrap;
background: url("top_menu_back.jpg") repeat-x;
}

li.top_menu {
margin: 0px 0px;
font-size: 11px;
text-align: right;
float: left;
}

div.top_menu_01 {
margin: 9px 11px;
float: left;
}

div.top_menu_02 {
margin: 0px;
madding: 0px;
heighth: 30px;
}

img.top_menu {
margin: 0px;
padding: 0px 0px;
width: 2px;
height: 30px;
}

div.note {
margin: auto;
width: 820px;
}