横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
背景の画像データの上に、メニューのマークと文字列を追加して装飾する。
cssの書き方 |
/*------------------------------------------------------- 04-06 ナビゲーションの文字スタイル -------------------------------------------------------- */ #navi0406 { margin: 0 0 10px 0; } #navi0406 ul{ width: 680px; height: 220px; padding: 8px 0 0 20px; background-image: url("../images/head-009.jpg"); background-repeat: no-repeat; background-position: left top; line-height: 1.0; } #navi0406 li{ display: inline; font-size: medium; list-style-type: none; } #navi0406 a{ padding: 0 20px 0 15px; height: 60px; color: #000080; font-weight:bold; background-image: url("../images/park_navi_icon.gif"); background-repeat: no-repeat; } #navi0406 a:link { color: #000080; } #navi0406 a:visited { color: #000080; } #navi0406 a:hover { color: #FF0000; } #navi0406 a:active { color: #FF9900; text-decoration: underline;} #navi0406 li.Home a { background-position: 0 0;} #navi0406 li.Home a:hover { background-position: 0 -25px;} #navi0406 li.About a { background-position: 0 -50px;} #navi0406 li.About a:hover { background-position: 0 -75px;} #navi0406 li.Bbq a { background-position: 0 -100px;} #navi0406 li.Bbq a:hover { background-position: 0 -125px;} #navi0406 li.Access a { background-position: 0 -150px;} #navi0406 li.Access a:hover { background-position: 0 -175px;} #navi0406 li.Blog a { background-position: 0 -200px;} #navi0406 li.Blog a:hover { background-position: 0 -225px;} |
---|---|
HTMLの使用例 |
<div id="navi0406"> <ul> <li><a href="../galleria1/index.html">ホーム</a></li> <li><a href="guide.html">css勉強室メニュー</a></li> <li><a href="index.html">cssの基本</a></li> <li><a href="gari02-01.html">レイアウト</a></li> <li><a href="gari03-01.html">リンクの拡張</a></li> </ul> </div> |