Fakeqiji 홈페이지 네비게이션 바 DIV CSS JS [코드 예시]_체험교류

저자 Zi Shu
Keqiji 홈페이지의 효과. 오늘 누군가가 어떻게 작성했는지 물어봐서 저녁에 다시 썼습니다. 그런데 레이아웃을 다시 정리했습니다.
Keqiji를 살펴보세요. 효과: http://shanghai.kijiji.cn
position:absolute 방법을 사용하지 않으려고 했지만 나중에도 position:absolute를 사용했지만 사용하기가 너무 어려웠습니다. Keqiji 사이트 작업 ; 당시 어떻게 작성되었는지는 잘 모르겠습니다.
다음은 렌더링입니다.


다음은 레이아웃 부분입니다

코드 복사 코드는 다음과 같습니다.

>

• 인기 이벤트


 

• 최신 기능< /a>




• 서비스 약속




• 최신 성공 사례


                                                                                        " >핫 포스트 추천< /li>

Zi Shu00001< /a>

zishu00002< ;/div>

zishu00003

zishu00004

< ;div id="info5">Zimu00005

다음은 CSS 부분입니다. CSS가 아직 최적화되지 않았습니다.

코드 복사 다음과 같습니다.

<스타일>
/*子鼠 www.zishu.cn*/
* {margin:0;padding:0;font-size:12px;font-family:Verdana, Arial, "宋体"; 목록 스타일:없음;}
본문 {배경: #FFFFCC;여백:100px 0 0 100px;}
#info {border:1px solid #FFCC66;padding:30px;배경:#f7f7f7;너비:500px ;}
#kjj_tag {width:500px;border-bottom:1px solid #CCC; 배경:url(taga_c.gif) repeat-x 왼쪽 하단; 높이:30px;}
#info1,#info2,#info3,#info4,#info5{ border:1px solid #ccc;border-top:none; 패딩:10px; 배경:#fff; 지우기:둘 다;  }
h4{ font-weight:normal;float:left;border-right:1px solid #fff;}
.hd {display:none;}
.sw {display:block;}
#info li {float:left;}
#info li a{float:left; 표시:블록; 패딩:4px 10px 4px 10px; 색상:#37572E; 텍스트 장식:없음}
#info li a:hover{ 배경:#E9FE70; color:#000}
#info ul { float:left; 여백 상단:-28px; 패딩:5px 0; 위치:절대}
#info .ha a{  색상:#FFF}
#info .ha a:hover{color:#FFF; 배경:없음}
#info .ha .hc:hover{배경:url(tag_d.gif) 반복 없음 중앙 하단; }
.ha {배경:url(taga_a.gif) 반복 없음 왼쪽 상단;margin-top:-3px;padding-top:3px;}
.hb{ 배경:url(taga_b.gif) 아니요 -오른쪽 상단 반복; 여백 상단:-3px; padding-top:3px;}
.hc {배경:url(tag_d.gif) 반복 없음 중앙 하단;  높이:17px; 색상:#FFF; 글꼴 무게:굵게}

以下为JS부분:由于javascript对于我来说太难了;所以可能这part写的比较烂，但效果是take来了;

复主代码 代码如下:

 var k = Math.floor(Math.random()*5 1); 
 for(i=1; i <6; i ){
  if( i==k){
   document.getElementById("info" i).className="sw";
   document.getElementById("tag" i).className="ha";
   document.getElementById("tag" i).getElementsByTagName("h4")[0].className="hb";
   document.getElementById("tag" i).getElementsByTagName("a")[0].className="hc";
  }
  else{
   document.getElementById("info" i).className="hd";
  }
 }
함수 키지태그(태그){ 
 for(i=1; i <6; i )
 {
  if (i==tag)
{ 
   document.getElementById("info" i).className="sw";
   document.getElementById("tag" i).className="ha";
   document.getElementById("tag" i).getElementsByTagName("h4")[0].className="hb";
   document.getElementById("tag" i).getElementsByTagName("a")[0].className="hc";
  }
  else{
   document.getElementById("info" i).className="hd";
   document.getElementById("tag" i).className="";
   document.getElementById("tag" i).getElementsByTagName("h4")[0].className="";
   document.getElementById("tag" i).getElementsByTagName("a")[0].className="";
  } 
 }
}

사용된 4개의 이미지는 다음과 같습니다.




효과를 보세요!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>케치 네비게이션 바 테스트</title> <style> /*子鼠 www.zishu.cn*/ * {margin:0;padding:0;font-size:12px;font-family:Verdana, Arial, "宋体"; list-style:none;} body {background: #FFFFCC;margin:100px 0 0 100px;} #info {border:1px solid #FFCC66;padding:30px;background:#f7f7f7;width:500px;} #kjj_tag {width:500px;border-bottom:1px solid #CCC; background:url(http://www.zishu.cn/attachments/month_0704/o200742501718.gif) repeat-x left bottom;height:30px;} #info1,#info2,#info3,#info4,#info5{ border:1px solid #ccc;border-top:none; padding:10px; background:#fff; clear:both; } h4{ font-weight:normal;float:left;border-right:1px solid #fff;} .hd {display:none;} .sw {display:block;} #info li {float:left;} #info li a{float:left; display:block; padding:4px 10px 4px 10px; color:#37572E; text-decoration:none} #info li a:hover{ background:#E9FE70; color:#000} #info ul { float:left; margin-top:-28px; padding:5px 0; position:absolute} #info .ha a{ color:#FFF} #info .ha a:hover{color:#FFF; background:none} #info .ha .hc:hover{background:url(http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat center bottom; } .ha {background:url(http://www.zishu.cn/attachments/month_0704/a20074250170.gif) no-repeat left top;margin-top:-3px;padding-top:3px;} .hb{ background:url(http://www.zishu.cn/attachments/month_0704/x200742501712.gif) no-repeat right top; margin-top:-3px; padding-top:3px;} .hc {background:url(http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat center bottom; height:17px; color:#FFF; font-weight:bold} </style> <div id="info"> <div id="kjj_tag"> </div> <ul> <li id="tag1"><h4><a href="javascript:kijijitag('1');">인기활동</a></h4></li> <li id="tag2"><h4><a href="javascript:kijijitag('2');">최신 기능</a></h4></li> <li id="tag3"><h4><a href="javascript:kijijitag('3');">서비스 약속</a></h4></li> <li id="tag4"><h4><a href="javascript:kijijitag('4');">최근 성공사례</a></h4></li> <li id="tag5"><h4><a href="javascript:kijijitag('5');">핫포스트 추천</a></h4></li> </ul> <div id="info1"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00001</a><a href="http://shanghai.kijiji.cn" target="blank">상하이에 손님들이 모였습니다</a> </div> <div id="info2"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00002</a><a href="http://beijing.kijiji.cn" target="blank">북경에서 모였습니다</a> </div> <div id="info3"> <a href="http://www.zishu.cn" target="blank">쯔모00003</a><a href="http://huhehaote.kijiji.cn" target="blank">후허하오터에 모인 손님들</a> </div> <div id="info4"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00004</a><a href="http://hangzhou.kijiji.cn" target="blank">항저우에 모인 손님들</a> </div> <div id="info5"> <a href="http://www.zishu.cn" target="blank">Zi Mo 00005</a><a href="http://www.kijiji.cn/index.html" target="blank">Keqi 홈페이지</a> </div> </div> <a href="http://www.zishu.cn" target="blank"> </a>자수 2007.04.25.
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]
특수 지침:

1. 작성하는 동안 약간 어지러웠기 때문에 CSS 부분이 명확하지 않습니다.
2. JS; 부분은 여전히 ​​더 간소화될 수 있지만 CSS에서 지원되어야 합니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.