1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>无标题文档</title> 
  6. <link href="p_w_picpaths/style.css" rel="stylesheet" type="text/css" /> 
  7. <script type="text/javascript" src="p_w_picpaths/jquery.js"></script> 
  8. </head> 
  9.  
  10. <body> 
  11. <div id="main"> 
  12.     <div id="left"> 
  13.         <ul> 
  14.           <li class="liLight"><a href="#">公司简介</a></li> 
  15.           <li><a href="#">领导致辞</a></li> 
  16.           <li><a href="#">工艺传承</a></li> 
  17.           <li><a href="#">限量概念</a></li> 
  18.         </ul> 
  19.     </div><!--left over--> 
  20.     <div id="right"> 
  21.         <div class="box" style="display:block;">11111111111</div> 
  22.         <div class="box">22222222222</div> 
  23.         <div class="box">3333333333</div> 
  24.         <div class="box">44444444444</div> 
  25.     </div><!--right over--> 
  26. <script> 
  27. function showTab(i){ 
  28.      $("#left ul li:eq("+i+")").click(function(){ 
  29.          $(this).addClass("liLight").siblings().removeClass("liLight"); 
  30.          $("#right .box:eq("+i+")").show().siblings().hide(); 
  31.          }) 
  32.      } 
  33. for (i=0;i<4;i++){   
  34.     showTab(i); 
  35. </script> 
  36. </div><!--main over--> 
  37. </body> 
  38. </html> 

 

  1. /* CSS Document houguang*/ 
  2. body,ul,li,span,p,strong,div,form,lable,input { margin:0padding:0border:none;} 
  3. body { background:url(bg1.jpg) center top no-repeatfont-size:12pxfont-family:"宋体"text-align:centerheight:700px;} 
  4. ul { list-style:none;} 
  5.  
  6. #main { width:960pxheight:330pxmargin:0 automargin-top:165pxtext-align:leftposition:relative;} 
  7. #title { width:190pxheight:70pxposition:absolute; top:0; left:0color:#ad0000font-size:24pxfont-weight:boldtext-align:center;} 
  8. #title span { color:#753b17font-size:14pxfont-weight:normalline-height:3em;} 
  9. #left { width:190pxheight:autofloat:leftmargin-top:70px;} 
  10. #left ul li { width:190pxheight:35pxline-height:35pxtext-align:center;} 
  11. #left ul li ul { display:none;} 
  12. #left ul li ul li { padding-left:5pxheight:20pxline-height:20px;} 
  13. #left ul li ul li a { color:#834a37;} 
  14. #left ul li ul .liLight0 { background:url(list.gif) left no-repeatcolor:#834a37;} 
  15. #left ul li ul .liLight0 a { color:#834a37font-weight:bold;} 
  16. #left ul li a { color:#753b17text-decoration:none;} 
  17. #left ul .liLight { background:url(light_bg.jpg) top center no-repeat;} 
  18. #left ul .liLight a { color:#FFF;} 
  19. #right { width:760pxheight:260pxfloat:leftposition:relative;} 
  20. #right .box { width:740pxheight:220pxoverflow:autoposition:absolute; top:30pxdisplay:none;} 
  21.  
  22. #footerwidth:1000pxheight:40pxmargin:0 automargin-top:130pxposition:relative;} 
  23. #footer ul li { float:left;} 
  24. #footer ul li a { padding:5px 25pxtext-decoration:nonefont-family:"黑体"font-size:14pxfont-weight:boldcolor:#000line-height:30px;} 
  25. #footer ul li a:hover { color:#FFF;} 
  26. #footer ul .liLight1 { background:url(nav_bg.gif) center no-repeat;} 
  27. #footer ul .liLight1 a { color:#FFF;} 
  28.  
  29. #copy { width:960pxcolor:#b79e6ffont-size:12pxtext-align:leftmargin:10px auto;}