読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

リストをナビゲーションに - 横

リストをナビゲーションに - 横

<body>
<ul class="nav">
<li><a href="#">新着情報</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">店舗案内</a></li>
<li><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;
}


例NavA


例NavB