横ナビゲーション
リストをナビゲーションに(横)
<body> <ul class="nav"> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </body>
CSSの記述
- borderを指定した場合
《例1》
/* reset */ html, body, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } /* body */ body { background: #FFF; font-size: 16px; } /* .nav */ ul.nav { width: 800px; overflow: hidden; margin: 50px auto; } ul.nav li { float: left; width: 160px; line-height: 40px; text-align: center; } ul.nav li a { display: block; background: #FFFEF0; border: 2px solid #95A473; border-left: none; color: #6B8150; } ul.nav li:first-child a { border-left: 2px solid #95A473; } ul.nav li a:hover { background: #95A473; color: #FFF; }
《例2》
/* reset */ html, body, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } /* body */ body { background: #FFF; font-size: 16px; } /* .nav */ ul.nav { width: 800px; overflow: hidden; margin: 50px auto; } ul.nav li { float: left; width: 160px; line-height: 40px; text-align: center; } ul.nav li a { display: block; background: #4C6EAF; border-left: 2px solid #FFF; color: #FFF; } ul.nav li:first-child a { border-right: none; } ul.nav li a:hover { background: #95A473; }