エキサイトブログで水平ナビをつくる

エキサイトブログではかなり自由にナビゲーションを作ることができます。
上部にナビゲーションが欲しかった方は是非お試しを〜。


a0342241_13281251.png


【本文】

<div class="nav-wrap">
<ul class="nav-list">
<li><a href="#">TOP</a></li>
<li><a href="#">はじめに</a></li>
<li><a href="#">プロフィール</a></li>
<li><a href="#">メール</a></li>
</ul>
</div>

【CSS】

.nav-wrap {
background: #E4E9ED;
margin-bottom: 48px;
padding: 18px 0; }
.nav-list li {
display: inline-block;
margin-right: 48px; }
.nav-list {
text-align: center;
font-size: 14px;
font-size: 0.875rem;
line-height: 14px; }

本文の挿入位置はhederの下らへんがいいでしょう。
headerのdivタグが終わった後に入れてみましょう。
<a href="#">の#の中にリンクさせたいURLを入れます。テキストは好きに変えてください。

背景の色を変えたい場合は、CSSの background: #E4E9ED; を変えてみてください。


IE8以下は崩れるかもしれません。



[PR]
by exblog-tips | 2015-12-24 18:29 | ヘッダー周り

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブ