ホームページ > 記事 > ウェブフロントエンド > Fakeqiji ホームページナビゲーションバー DIV CSS JS 【コード例】_体験交流
Fakeqiji ホームページナビゲーションバー DIV CSS JS 【コード例】_体験交流
- WBOYオリジナル
- 2016-05-16 12:07:562263ブラウズ
著者Zi Mo
Keqijiのホームページの影響です。今日誰かが私にどうやって書いたか尋ねたので、夕方にもう一つ書き直しました。ちなみに、レイアウトを再構成します。
以下をご覧ください。まず Keqiji のホームページ 効果: http://shanghai.kijiji.cn
position:absolute メソッドを使用しないようにしましたが、書くのが難しく、その後もposition:absolute; を使用しましたが、役に立ちませんでしたKeqiji サイトにあります。当時どのように書かれていたのかは本当にわかりません。
以下はレンダリングです:
以下是布局部分
复制代码 代码如下:
以下是CSS部分：CSS还是没有优化的；
复制代码 代码如下:
以下为JS部分：由于javascript对于我来说太难了；所以可能这部分写的比较烂，但效果是出来了；
复制代码 代码如下:
<script> <BR> var k = Math.floor(Math.random()*5+1); <BR> for(i=1; i <6; i++){ <BR> if( i==k){ <BR> document.getElementById("info"+i).className="sw"; <BR> document.getElementById("tag"+i).className="ha"; <BR> document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb"; <BR> document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc"; <BR> } <BR> else{ <BR> document.getElementById("info"+i).className="hd"; <BR> } <BR> } <BR>function kijijitag(tag){ <BR> for(i=1; i <6; i++) <BR> { <BR> if (i==tag) <BR> { <BR> document.getElementById("info"+i).className="sw"; <BR> document.getElementById("tag"+i).className="ha"; <BR> document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb"; <BR> document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc"; <BR> } <BR> else{ <BR> document.getElementById("info"+i).className="hd"; <BR> document.getElementById("tag"+i).className=""; <BR> document.getElementById("tag"+i).getElementsByTagName("h4")[0].className=""; <BR> document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; <BR> } <BR> } <BR>} <BR></script>
以下是用到的四个图：
看下效果吧！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。