コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > ULのナビゲーションメニューのグラフィックとテキストの作成例

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

零下一度
リリース： 2017-06-24 13:30:05
オリジナル
1539 人が閲覧しました

最初上図，最終結果：

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 サイトの他の関連記事を参照してください。

関連ラベル：
作る ナビゲーション メニュー
ソース：php.cn
前の記事：h5 に新しいタグと属性を追加するチュートリアルの例 次の記事：Bootstrap に関する詳しい知識を共有する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
opentbs を使用して odt ファイルを生成するときに発生する問題: 同じキーの値が別の列ではなく同じ行に表示されます。 PHPでodtを作成するためにOpenTbsというライブラリを使っていますが、列と行が動的に生成されるので利用しています。行と列の作成方法は知っていますが、それらを整理する方法がわ...
から 2024-04-06 20:18:18
0
1
483
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート