___213343ww2
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTML課題</title> <link href="aip.css" rel="stylesheet" media="all"> </head> <body id="aip" class="coding"> <!--ヘッダ部分--> <header class="header"> <h1 id="logo"><a href="#"><img src="img/login.png" width="164" height="53" alt="coding"></a></h1> <div class="iti"> <div class="gazou_1"><a href="#"><img src="img/megane.png" width="40" height="40" alt="coding"></a></div> <input class="submit_btn" type="submit" name="submit_1" value="カート" > <input class="submit_btn" type="submit" name="submit_2" value="ログイン" > </div> <nav id="gnav"> <ul class="inner"> <li class="gnav01"><a href="#">メニュー1</a></li> <li class="gnav02"><a href="#">メニュー2</a></li> <li class="gnav03"><a href="#">メニュー3</a></li> <li class="gnav04"><a href="#">メニュー4</a></li> <li class="gnav05"><a href="#">メニュー5</a></li> <li class="gnav06"><a href="#">メニュー6</a></li> </ul> </nav> </header> <!-- コンテンツ部分 --> <div id="contents"> <nav id="pankuzu"> <ol> <li><a href="#">ホーム</a></li>>> <li><a href="#">コーディング</a></li>>> <li><a href="#">サービスの特徴</a></li>>> </ol> </nav> <!-- メイン部分 --> <main id="main"> <section> <h2 class="sirase">●お知らせ</h2> <h2 class="osusume">●おすすめ商品</h2> <h2 class="kategori">●カテゴリ一覧</h2> </section><!-- /.sec --> <p class="btn_inquiry"><a href="#"><img src="img/FlexCoding_2.png" width="360" height="82" alt="コーディング依頼・お問い合わせはこちら"></a></p> </section> </main><!-- /#main --> <div id="side"> <nav id="menu"> <ul> <li class="current"> <a href="#">注目のキーワード</a></li><br> <li><a href="#">キーワード</a></li><br> <li><a href="#">財布</a></li><br> <ul> </nav><!-- /#menu --> </div><!-- /#sidebar --> <br><br><br><br><br><br> <!-- フッター部分 --> <footer id="footer"> <div class="inner clearfix"> <ul id="flink"> <li><a href="#">お問い合わせ</a></li> <li><a href="#">特定商取引に基づく表記</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">サイトマップ</a></li> </ul> <p class="copyright"><small>Copyright (c) FlexCoding All Rights Reserved.</small></p> </div><!-- /.inner --> </footer><!-- /#footer --> </body> </html>
@charset "utf-8"; .header{ padding: 10px 0; border-top: #FE642E 5px solid; background: #e6e6e6; } .header{ display : table-cell; vertical-align : middle; } #gnav{ background : #FE642E; } #gnav li{ float: left; width: 156px; border-right: #fff 1px solid; } input.submit_btn{ color: #fff; padding: 12px 30px; font-size: 1.2em; background-color: #000; border-style: none; } ul{ list-style:none; } #flink li{ display: inline; vertical-align: middle; text-align: center; } .copyright{ vertical-align: middle; text-align: center; } #footer{ color: #fff; background-color: #000; } #main{ width: 680px; margin-bottom: 40px; float: right; } .iti{ margin-bottom: 40px; float: right; }
