ul li は水平方向の配置を設定し、li_html/css_WEB-ITnose の前のドットを削除します。

効果プレビュー: http://hovertree.com/texiao/css/

CSS を使用して水平メニューを作成し、ul li を水平に配置してドットを処理できるようにする方法

まず順序なしリストを作成して、メニュー構造を作成します。コードは次のとおりです:

<ul><li><a href="http://hovertree.com/">首页</a></li><li><a href="http://hovertree.com/map/">网站地图</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS在线预览</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul>

効果は次のとおりです:

ホームページ

サイトマップ

HoverTreeCMS

特殊効果

CMSオンラインプレビュー

jQuery画像リスト マウスオーバーマスクでテキストを表示

オリジナルテキスト

ステップ 2 : li のデフォルトのスタイルを非表示にし、ドットを削除します
見た目があまり良くなく、メニューには通常 li のデフォルトのドットが必要ないため、これらのドットを削除するために UL のスタイルを定義します。

もちろん、メニュー全体をより適切に制御するために、メニューを div に配置します。ページ コードは次のようになります:

 <ul><li><a href="http://hovertree.com/">首页</a></li><li><a href="http://hovertree.com/map/">网站地图</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS在线预览</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul>
 

CSS は次のように定義されます:

.hvtulli22 ul{list-style:none;}
説明: 「.hvtulli22 ul」は、定義したいスタイルが ul に適用されることを意味しますラベルの hvtulli レイヤー内。

現在の効果はドットが存在しないことです:

ホームページ

サイトマップ

HoverTreeCMS

特殊効果

CMSオンラインプレビュー

jQuery画像リスト マスク上にマウスを置くとテキストが表示されます

オリジナルテキスト

番目のステップ 3: キーのフロート
ここがメニューを水平にするためのキーです。これにより、各 li が前の li の左側にフロートされるようになります。 left:10px は li を 10 ピクセル離します。

CSS は次のように定義されます:

.hvtulli li{float:left;margin-left:10px}
効果は次のとおりです: http://hovertree.com/texiao/css/

見てください、メニューが水平になりました。それはとても簡単です！次に行う必要があるのは、詳細を最適化することだけです。

HTML ファイルコード:

何问起
ul中li横排，除去li前的圆点，li之间间隔
 
<ul><li><a href="http://hovertree.com/">首页</a></li><li><a href="http://hovertree.com/map/">网站地图</a></li><li><a href="http://hovertree.com/menu/hovertreecms/">HoverTreeCMS</a></li><li><a href="http://hovertree.com/menu/texiao/">特效</a></li><li><a href="http://cms.hovertree.com/">CMS在线预览</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/rtmloulp.htm">原文</a></li></ul>
 

js、jquery、css、html5 特殊効果