ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS_Experience 交換を使用したスタイリッシュなナビゲーション バーの凡例の開発に関するチュートリアル
CSS_Experience 交換を使用したスタイリッシュなナビゲーション バーの凡例の開発に関するチュートリアル
- WBOYオリジナル
- 2016-05-16 12:05:481665ブラウズ
制作容易的站点导航栏是CSS真正展现自己特有能力的一个领域。制作导航条的老方法倾向于依赖大量的图片、嵌套表格和Javascript脚本 – 所有这些都会严重影响站点的可用性和无障碍性。如果你的站点不能在一个不支持Javascript的设备上被导航，那么你不仅阻止了关闭Javascript的用户，同时你也阻止了只支持文本的设备，比如屏幕阅读器已经搜索引擎的机器人程序 – 它们将永远无法从你的首页得到网站内容的索引。就算你的客户不在乎无障碍性，告诉他们笨重的菜单阻止他们得到一个体面的搜索引擎排名！
CSS允许你创造具有吸引力的导航栏，采用CSS的优势在于不仅仅它在外观上非常美观，实际上它还是文本 – 是一种采用特殊方法标注的文本，它能够让所有那些物理上没法看到你的设计但是又想得到你的内容的人或者设备无障碍和容易理解地访问你的站点。在本文中，我们将看看各种各样建立基于CSS的导航栏解决方案。其中有一些适合在已有站点实施，以便使这些站点引导更迅速，并且通过替换古板的、基于图片的导航栏来促进它的无障碍性。另外一些更适合集成于纯粹的CSS站点布局中。
如何把一个结构化的列表样式化为导航栏菜单？
对于新设计的网站，你可能会尝试避免使用表格来做布局，或者只是在绝对必要的地方才使用表格。因此，一个不涉及到表格的导航栏解决方案是有用的，同时，通过杜绝表格元素的使用，你会发现你的页面将包含更少的标记符号。
解决方案
导航栏系统是用户在这个站点能够访问的地点的列表。因此，一个无序的列表是标记你的导航栏的理想方式。象你看到的，在图1中的导航栏的实现是采用CSS样式化的一个列表。
content="text/html; charset=utf-8" />
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
讨论
为了创建一个基于无序列表的导航栏，首先建立你的列表，把每个导航链接放入li元素，就象下面这样：
接着,选择一个适合的ID把列表包含在一个div中：
象下面图2看到的，这个标记在浏览器的缺省样式下面看上相当普通。
图2：没有样式化的基础列表
最初に行う必要があるのは、ナビゲーション バーが存在するコンテナのスタイルを設定することです - この場合は #navigation:
#ナビゲーション{
幅: 200px;
}
ここでは #navigation に幅を与えただけです。このナビゲーション システムが CSS ページ レイアウトの一部である場合は、ID に位置情報を追加することもできます。
次に、リストのスタイルを設定します。
#navigation ul {
リストスタイル: なし;
マージン: 0;
パディング: 0;
}
図 3 に示すように、上記のルールは、ブラウザーがリストを表示するときにデフォルトで表示されるプレフィックスとインデントを削除します。
図 3 インデントとプレフィックスの削除のリスト
次のステップは、#navigation を使用して li 要素のスタイルを設定し、下端を与えることです。
#navigation li {
border-bottom: 1px ソリッド #ED9F9F;
}
最後に、リンクのスタイルを設定します。
#navigation li a:link、#navigation li a:visited {
フォントサイズ: 90%;
表示: ブロック;
パディング: 0.4em 0 0.4em 0.5em;
border-left: 12px ソリッド #711515;
border-right: 1px ソリッド #711515;
背景色: #B51032;
色: #FFFFFF;
テキスト装飾: なし;
}
この時点で、ほとんどの作業は完了しました。私たちが作成したCSSルールには、左右の境界線の追加、下線の削除などが含まれます。このルールの最初の属性定義は、表示属性をブロックに設定します。これにより、これらのリンクがブロック要素として表示され、カーソルをナビゲーション ボタンの上に移動すると、表示効果はピクチャ ナビゲーションを使用する場合とまったく同じです。