ホームページ > 記事 > ウェブフロントエンド > 垂直ナビゲーション バーと水平ナビゲーション バーを実装する CSS コード
垂直ナビゲーション バーと水平ナビゲーション バーを実装する CSS コード
- 不言オリジナル
- 2018-08-24 11:51:273818ブラウズ
この記事の内容は、垂直ナビゲーションバーと水平ナビゲーションバーを実装するための CSS コードです。必要な方は参考にしていただければ幸いです。
垂直ナビゲーション バーのスタイル
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
ul {
list-style-type:none;
margin:0;
padding:0;
}
a:link, a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>水平ナビゲーション バーのスタイル
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
}
a:link, a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>関連推奨事項: 画像ギャラリーと同様の画像の並べ替えを実装するための
実装方法CSSアニメーション効果での透かし拡散（純粋なコード）
以上が垂直ナビゲーション バーと水平ナビゲーション バーを実装する CSS コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。