【Wants Cake】
【Wants Cake】
遅くなってしまいましたが、やっとはじめのページだけ完成できました!
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Wants Cake</title> <link rel="stylesheet" href="base css.css" type="text/css" media="screen,print"> </head> <body> <div id="body2"> <div id="container"> <div id="header"><img src="cakeshop/images/logo.jpg"></div><!--header--> <div id="navi"> <ul> <li id="navi01"><a href="index Wants Cake3 5.html" ></a></li> <li id="navi02"><a href="order Wants Cake 5.html" ></a></li> <li id="navi03"><a href="Products Wants Cake 5.html" ></a></li> <li id="navi04"><a href="shop Wants Cake 5.html" ></a></li> </ul> </div> <p id="main"><img src="cakeshop/images/main_photo.jpg" alt="wants cake" title="wants cake" /></p> <div id="wrapper"> <div id="banner"> <ul> <li><img src="cakeshop/images/banner01.jpg" alt="banner01" title="banner01"/></li> <li><img src="cakeshop/images/banner02.jpg" alt="banner02" title="banner02" /></li> </ul> </div><!--banner--> <div id="content"> <h1><img src="cakeshop/images/news_title.gif" alt="新着情報" title="新着情報" /></h1> <dl> <dt>2008.10.10</dt><dd>スペシャルキャンペーン期間中、お休みを頂いておりました、<span class="wordscolor">N.Y.チーズケーキ、レアチーズケーキ</span>のオーダーのオーダーを再開させて頂きました。</dd> <dt>2008.09.25</dt><dd><span class="wordscolor">スペシャルキャンペーン</span>実施中!<span class="wordscolor">人気のケーキが</span>5%オフ!</dd> </dl> <h1><img src="cakeshop/images/recommend_title.gif" alt="おすすめ商品" title="おすすめ商品" /></h1> <div class="recommend"> <div id="parts"> <p class="pic"><img src="cakeshop/images/top_item_photo1.jpg" alt="チーズスフレ" title="チーズスフレ" /></p> <div id="products"> <h2>チーズスフレ</h2> <p class="price">1個 480円</p> <p class="cream">ふんわりと口の中で溶けるチーズスフレに、生ク リームをたっぷり乗せた一品です。</p> <ul> <li><img src="cakeshop/images/top_moreinfo_btn.gif" alt="詳細を見る" title="詳細を見る" /></li> <li><img src="cakeshop/images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></li> </ul> </div><!--products--> </div><!--parts--> <div id="parts"> <p class="pic"><img src="cakeshop/images/top_item_photo2.jpg" alt="苺のバースデーケーキ" title="苺のバースデーケーキ" /></p> <div id="products"> <h2>苺のバースデーケーキ</h2> <p class="price">1個 2,480円</p> <p class="cream">大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしく召し上がりいただけます。</p> <ul> <li><img src="cakeshop/images/top_moreinfo_btn.gif" alt="詳細を見る" title="詳細を見る" /></li> <li><img src="cakeshop/images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></li> </ul> </div><!--products--> </div><!--parts--> <div id="parts"> <p class="pic"><img src="cakeshop/images/top_item_photo3.jpg" alt="焼菓子の詰め合わせ" title="焼菓子の詰め合わせ" /></p> <div id="products"> <h2>焼菓子の詰め合わせ</h2> <p class="price">1箱 1,680円</p> <p class="cream">当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p> <ul> <li><img src="cakeshop/images/top_moreinfo_btn.gif" alt="詳細を見る" title="詳細を見る" /></li> <li><img src="cakeshop/images/top_morelook_btn.gif" alt="大きな写真を見る" title="大きな写真を見る" /></li> </ul> </div><!--products--> </div><!--parts--> </div><!--recommend--> </div><!--content--> </div><!--wapper--> <div id="footer"> <address>Copyright (C) 2008 Wants Cake Corpration. All Rights Reserved.</address> </div><!--footer--> </div><!--container--> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ *{ margin: 0; padding: 0; border: 0; font-size: 100%; line-height: 1; font-weight: normal; font-style: normal; text-decoration: none; } body { } #body2 { width:780px; margin:0 auto; background-image: url(cakeshop/images/bg.jpg); background-repeat:repeat-x; background-color: #005790; } #container { width: 740px; margin:0 auto; background-color:white; } #header { width:680px; margin: 10px 0 10px 30px; } #navi{ margin: 0 auto; width:680px; height:36px; background-image:url(cakeshop/images/menubar.jpg); background-repeat:repeat-x; } #navi li { height: 36px; float: left; list-style-type: none; margin:0 0 5px 0; } #navi li a { display: block; height: 36px; width: 136px; } #navi01 a { background-image:url(cakeshop/images/menu_index.gif); background-position: 0 0;} #navi02 a { background-image:url(cakeshop/images/menu_mail.gif); background-position: -136px 0;} #navi03 a { background-image:url(cakeshop/images/menu_products.gif); background-position: -272px 0;} #navi04 a { background-image:url(cakeshop/images/menu_shop.gif); background-position: -408px 0;} #navi01 a:hover {background-position: 0 -36px;} #navi02 a:hover {background-position: -136px -36px;} #navi03 a:hover {background-position: -272px -36px;} #navi04 a:hover {background-position: -408px -36px;} #main { width:680px; margin:0 0 10px 30px; } #wrapper { width:680px; overflow:auto; margin:0 auto; } #content { width:475px; float: right; } #content h1 { margin: 0 0 10px 0; width:475px; } dt { padding-left: 6px; font-weight:bold; border-left: solid 5px #E8E2D6; margin:0 0 10px 10px; } dd { font-size:16px; font-weight: 700; line-height:21px; margin: 0 0 10px 10px; } .wordscolor { color:#F0C; font-size:16px; font-weight: 700; line-height:21px; } .recommend { width: 475px; overflow:auto; } #parts { width: 475px; margin:0 0 15px 0; overflow:auto; border-bottom:#DDDDDD 1px solid ; } .pic { float:left; margin: 0 0 10px 0; } #products { float:right; width:320px; height:120px; margin:0 0 10px 0; } h2{ font-family:Tahoma, Geneva, serif; color :#518FC3; font-weight:bold; margin: 0 10px 10px 10px; line-height:18px; } .price { font-size:15px; font-weight:700; line-height:20px; margin: 0 10px 10px 10px; } .cream { font-size:14px; font-weight:700; line-height:18px; margin:0 0 10px 0; } li { list-style-type:none; display:inline; margin-bottom:5px; } { width:475px; } #banner { float:left; width:200px; } #banner li { list-style-type:none; } #footer { background-image:url(cakeshop/images/footer_back.gif); background-repeat:repeat-x; height: 62px; clear:both; } address { font-weight:bold; text-align:center; line-height:61px; }