ホームページ  >  記事  >  ウェブフロントエンド  >  ULのナビゲーションメニューのグラフィックとテキストの作成例

ULのナビゲーションメニューのグラフィックとテキストの作成例

零下一度
零下一度オリジナル
2017-06-24 13:30:051533ブラウズ

最初上図,最終結果:

HTML代:











< /div>

CSS代番号:


#qwe{
width: 200px;
font-family: "微软雅黑";
margin: 50px ;
}
#qwe ul{
list-style-type: none;
パディング: 0;
}
#qwe ul li a{
テキスト装飾: なし;
表示: ブロック;
幅: 200px;
高さ: 25px;
border-left: 10px ソリッド #333333;
border-right: 1px ソリッド #666666;
border-bottom: 1px ソリッド #555555;
padding-left: 3px;
margin-bottom: 1px;
}
#qwe ul li a:link,#qwe ul li a:visited{
color: 深紅;
背景色: #999999;
}
#qwe ul li a:hover{
color: 緑;
背景色: #777777;
}
#qwe ul li a:active{
color: darkorange;
}

备注:その中に含まれる伪类的配置

以上がULのナビゲーションメニューのグラフィックとテキストの作成例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。