横並びのナビゲーションの復習

こんばんわ、しろです。

昨日面接したばかりですが、今日早速連絡がありました。

結果は…なんと...

採用でした…！！！！

良かったー…！

これで来年からも仕事があるーーー！！！ε-(´∀｀*)ﾎｯ

それにしてもなんて早い結果なんでしょう…初めての早さです(笑)

さて、明日は学校なんですが、フリーランスでお仕事されてるＷｅｂデザイナーさんからお話が聞けるみたいなのです…！

どんなお話が聞けるのか、今からすごく楽しみです(*'ω'*)

明日のためにも横並びのナビゲーションの復習をしたいと思います。

今回は、基本的な横並びのナビゲーションの復習をします('ω')

↓みたいなナビゲーションを作ります。

home about shop

HTML

<li><a href="#">about</a></li>

</ul>

CSS

.g_navi{

list-style: none;　　　　　①リストマークを無くす

overflow: hidden;　　　　③フロートによる問題の解消

}

.g_navi li{

float: left;　　　　　　　　②フロートをかける

}

.g_navi li a{

display: block;　　　　　　④a要素をブロックレベルにする

padding: 5px 10px;　　　 ⑤a要素にpaddingを設定する

text-decoration: none;　　 ⑥a要素の下線を無くす

}

あとは文字に色を付けたり、liに対して背景色をつけたり、a要素の上にカーソルが来たら色がつくようにしたりしてくとボタンっぽくなる！

ボタンみたいなナビゲーションの復習はまた後日にしようと思います。

今日はここまで(^▽^)/

それでは！

しろんぱ！