<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/jquery.js"></script> </head> <body> <div id="main"> <div id="left"> <ul> <li class="liLight"><a href="#">公司简介</a></li> <li><a href="#">领导致辞</a></li> <li><a href="#">工艺传承</a></li> <li><a href="#">限量概念</a></li> </ul> </div><!--left over--> <div id="right"> <div class="box" style="display:block;">11111111111</div> <div class="box">22222222222</div> <div class="box">3333333333</div> <div class="box">44444444444</div> </div><!--right over--> <script> function showTab(i){ $("#left ul li:eq("+i+")").click(function(){ $(this).addClass("liLight").siblings().removeClass("liLight"); $("#right .box:eq("+i+")").show().siblings().hide(); }) } for (i=0;i<4;i++){ showTab(i); } </script> </div><!--main over--> </body> </html>
/* CSS Document houguang*/ body,ul,li,span,p,strong,div,form,lable,input { margin:0; padding:0; border:none;} body { background:url(bg1.jpg) center top no-repeat; font-size:12px; font-family:"宋体"; text-align:center; height:700px;} ul { list-style:none;} #main { width:960px; height:330px; margin:0 auto; margin-top:165px; text-align:left; position:relative;} #title { width:190px; height:70px; position:absolute; top:0; left:0; color:#ad0000; font-size:24px; font-weight:bold; text-align:center;} #title span { color:#753b17; font-size:14px; font-weight:normal; line-height:3em;} #left { width:190px; height:auto; float:left; margin-top:70px;} #left ul li { width:190px; height:35px; line-height:35px; text-align:center;} #left ul li ul { display:none;} #left ul li ul li { padding-left:5px; height:20px; line-height:20px;} #left ul li ul li a { color:#834a37;} #left ul li ul .liLight0 { background:url(list.gif) left no-repeat; color:#834a37;} #left ul li ul .liLight0 a { color:#834a37; font-weight:bold;} #left ul li a { color:#753b17; text-decoration:none;} #left ul .liLight { background:url(light_bg.jpg) top center no-repeat;} #left ul .liLight a { color:#FFF;} #right { width:760px; height:260px; float:left; position:relative;} #right .box { width:740px; height:220px; overflow:auto; position:absolute; top:30px; display:none;} #footer{ width:1000px; height:40px; margin:0 auto; margin-top:130px; position:relative;} #footer ul li { float:left;} #footer ul li a { padding:5px 25px; text-decoration:none; font-family:"黑体"; font-size:14px; font-weight:bold; color:#000; line-height:30px;} #footer ul li a:hover { color:#FFF;} #footer ul .liLight1 { background:url(nav_bg.gif) center no-repeat;} #footer ul .liLight1 a { color:#FFF;} #copy { width:960px; color:#b79e6f; font-size:12px; text-align:left; margin:10px auto;}
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦