html 初学者 网站模板

2021 - 11 - 25 作者 : 石家庄SEO 分类 :关键词优化
  • TAG :

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>body{height:500px;background:linear-gradient(#A6CADE,#F8C6F8)no-repeat;}ul,li,div{padding:0;margin:0;}.container{width:500px;margin:0auto;}#tab-condiv{display:none;width:500px;height:282px;}#tab-condivimg{width:100%;height:100%;}#tab-condiv.active{display:block;}#tab-listulli{float:left;list-style:none; }#tab-listullia{display:block;width:70px;text-align:center;text-decoration:none;color:#000;background:#D6D6D1;}#tab-listulli.activea{color:#fff;background:#f96302;}</style></head><body><divclass="container"><divid="tab-con"><divclass="active"><imgsrc="img/test1.jpg"></div><div><imgsrc="img/test2.jpg"></div><div><imgsrc="img/test3.jpg"></div><div>图片4</div><div>图片5</div><div>图片6</div><div>图片7</div></div><divid="tab-list"><ul><li><ahref="javascript:;">首页</a></li><li><ahref="javascript:;">美食</a></li><li><ahref="javascript:;">交通</a></li><li><ahref="javascript:;">图片4</a></li><li><ahref="javascript:;">图片5</a></li><li><ahref="javascript:;">图片6</a></li><li><ahref="javascript:;">图片7</a></li></ul></div></div><script>vartablist=document.getElementById('tab-list').getElementsByTagName('li');vartabcon=document.getElementById('tab-con').getElementsByTagName('div');for(vari=0;i<tablist.length;i++){tablist[i].onclick=function(){starttab(this);};};functionstarttab(obj){for(vari=0;i<tablist.length;i++){if(tablist[i]==obj){tablist[i].className="active";tabcon[i].className="active";}else{tablist[i].className="";tabcon[i].className="";};};};</script></body></html>

20 人围观 / 0 条评论 ↓快速评论↓