ホームページ > ウェブフロントエンド > htmlチュートリアル > Webサイトの水平ナビゲーションが表示できない_html/css_WEB-ITnose

Webサイトの水平ナビゲーションが表示できない_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:14:56
オリジナル
1811 人が閲覧しました

最近、友人のウェブサイトの修正を手伝ったのですが、div+css を追加した後にナビゲーションタイトルが表示されない理由がわかりません。
css.css ファイル内のナビゲーション メニューの属性と値を変更する方法。
友達がヒントをくれることを願っています。後でコードを投稿します ~~


ディスカッション (解決策) に返信します

おそらく、ナビゲーションの外側のレイヤーには幅制限が設定されていると思います。そして、overflow:hidden

1 を追加しました。上記の内容は外側のレイヤーの幅を超えて非表示になります
2.新しく追加されたものは、元のものと同じ行ではなくなりました。非常に高く、隠されています。 3.新しく追加されたコンテンツは他の要素によってブロックされています

Firebug を使用して見てみるとわかります

最近、友人のウェブサイトの修正を手伝ったのですが、div+css を追加した後にナビゲーションタイトルが表示されない理由がわかりません。
css.css ファイル内のナビゲーション メニューの属性と値を変更する方法。
友達が私にいくつかのヒントをくれることを願っています~~
CSS コードは次のとおりです:
font-size:13px;
pattern-整列: 中央;
背景:#000;

a:link,a:visited{color:#000;text-decoration:none;} :hover {color:red;text-decoration: none;}
div,img,ul,ol,dl,dt,dd {
list-style:none;
margin: 0;
パディング:0;

h1,h2,h3,h4,h5,h6 {
マージン:0;
/*--- 浮動小数点数をクリア-- -*/
.clear {
クリア:両方;
オーバーフロー: 非表示
}

.container{
width: 1050px;
背景色: #CCC;
}
.header{
幅: 1050px;
高さ: 197px;
.hdtop{
幅: 1050px;
背景: url(eshow) /ホーム_トップ。 gif) ;
}
.topdh{
幅: 1050px;
高さ: 40px;
背景画像: url(eshow/home_dh.gif)
.topdh li{
float :left ;
margin-left:8px;
list-style:none;
パディング:0px 0px 5px;
.topdh a:link,.topdh :visited {color:#000;text-decoration:none; font-weight:bold; font-size:13px;}
.topdh a:hover{color:#006600;text-decoration:none; ; フォント サイズ: 13px;
幅: 自動;
マージン: 5px 自動;
.ad000{幅: 790px; margin-bottom:5px;}
.ls_z{
幅: 250px;
高さ: 806px;
表示: インライン;
.ls_y{
幅: 自動; : 自動 ;
マージン: 左;
表示: インライン;
.ls_dz{
高さ: 1px;
背景色: # 666;
マージン-上: 5px;
マージン-左: 自動;
.ls_dz h1,.ls_dz h2, .ls_dz h3 ; 高さ:25px; 行の高さ:10px; 境界線:1px;
.ls_dz h3{ 背景:url(eshow/links.gif);
.ls_ad{
幅: 自動;
高さ: 30px;
背景色: #999; }
.ls_fc{
幅: 自動;
マージン上: 5px;
マージン-左: 自動;
td{font-size:12px;}
幅: 300px;
マージン上: 2px ;
float: left;
.lswz h4,.lswz h1{ 高さ: 265px;
行の高さ: 1.8em;
背景:url (eshow/dd_bg.gif);
} .lswz ul{ text-align:left; border-top:1px margin-top:2px}
a{border-bottom :1px 破線 #dfdfdf;}
幅: 175 ピクセル;
高さ: 2 ピクセル;
行の高さ: 1.8 ピクセル;背景:url(eshow/books.gif);
} .books ul{ text-align:left;}

.footer{
幅: 1050px ;
背景色: #CCC; -上: 0px;
余白-下: 0px; /**********************************************/
.main{
 clear:both;
 padding:8px;
 text-align:center;
}
/*第一种形式*/
#tabs0,#tabs1 {
 height: 260px;
 width: 238px;
 border: 1px solid #DFDFDF;
 background:#fff;
 margin-top:5px;
}
.menu0,.menu1{
 width: 238px;
 border-bottom: 1px solid #DFDFDF;
}
.menu0 li,.menu1 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:80px;
 text-align: center;
 cursor:pointer;
 background: #FFFFff;
 border-right: 1px solid #DFDFDF;
}
.menu0 li.hover,.menu1 li.hover{
 background: url(eshow/xuanbg.jpg);
 color:#fff;
}
#main0 a,#main1 a{
   border-bottom:1px #d4d4d4 dashed;
}
#main0 ul,#main1 ul{
 display: none;
 text-align:left;
 line-height:1.4em;
}
#main0 ul.block,#main1 ul.block{
 display: block;
}
/******************************************/
.biaoti{width:100%; height:auto;margin-top:5px; float:left}
.biaoti h2{height:25px; background:#F0F0F0; padding-top:5px; font-size:13px;}
.container .footer ul li div {
font-family: Georgia, Times New Roman, Times, serif;
}

HTML 代码呢

HTML 代码呢

HTML 代码呢

引用楼主  的回复:
最近帮朋友修改网站,因为是初学div+css,所以不知道添加导航标题以后为什么会不显示出来,好像被遮盖了一样。
在文件css.css中应该怎么样修改导航菜单属性和值。
希望会的朋友能给我一些提示,代码我随后就贴上~~


css 的代码如下 :
body{
   font-size:13px;
margin:0px;
padding:0px;
text……
html  代码:

XXX数字图书馆

<script> <br> <!-- <br /> /*第一种形式 第二种形式 更换显示样式*/ <br /> function setTab(m,n){ <br /> var tli=document.getElementById("menu"+m).getElementsByTagName("li"); <br /> var mli=document.getElementById("main"+m).getElementsByTagName("ul"); <br /> for(i=0;i<tli.length;i++){ <br /> tli[i].className=i==n?"hover":""; <br /> mli[i].style.display=i==n?"block":"none"; <br /> } <br /> } <br /> //--> <br> </script>












 
 

  

      

  

  •   

 




 
 

  

  •    
      

  

  •      
      

 



 
 

  

  •    
      

  

  •      
      

 





友情连接
















   
    
    

    


    
    
    
  


本馆概况







电子资源







站内留言







 


 




<ul style="float:left; width:680px;"><li><a href="/index.asp">本站首页</a></li>
ログイン後にコピー

ここでの ul の幅は、li の数に応じて増加します。たとえば、li の幅は 60px です。そして、liを追加するたびに、ここの680はそれに応じて幅を増やします。 私は 60px の例を示しているだけであることに注意してください。具体的な幅は文字幅 + 18px に依存します

ありがとう、問題は正常に解決されました。しかし、メニューのタイトルを変更した後、もう一度アドバイスを求めることはできますか?リンクをクリックすると元のメニュー タイトル スタイルに変わるのはなぜですか?アドバイスをよろしくお願いします。私も情報を探しましたが、入り口が見つかりません…

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート