トピックス プログラム、シミュレーション

書き込む順番が大事

投稿日:

昨日の続きで、CSSをもちいてWebページのレイアウトを整備していきます。

資料はこちら → CSSその5

p.1 今まで、ナビゲーションリストは文字にアンダーラインがあり縦方向のリスト形式になっていました。先ずは横に並べます。CSSファイルに書き込む順番は、リスト(ul)、リスト項目(li)そして要素(a)の順番です。右下の図を見てください。リスト全体の幅が940px、パッディング0で左端が基準です。 次にリスト項目の幅を155px右隣とのマージンが2pxなので、157px間隔で指定します。最後の項目は右にマージンが無いので、margin-rightは0です。

p.2 リスト項目をボタンに変更します。デフォルトは下線なのでNoneで消去します。背景を茶色文字を白にして大きさを調整します。

p.3 ボタンの上にカーソルを載せると色が変わる設定法です。カーソル載せた時が:hoverクリックした時が:activeです。後の方が有効なので、hoverが先activeが後に記載します。

HTMLCSSをリンクさせることにより、Webページが出来上がることが理解できましたでしょうか。まだまだデザイン・レイアウトに関しては技があるようです。興味お持ちの方は、勉強してみてください。

-トピックス, プログラム、シミュレーション

Copyright© 進化するガラクタ , 2022 All Rights Reserved Powered by STINGER.