CSS学习笔记-附加篇( 新浪大通栏Tab样式）

最新推荐文章于 2024-08-02 22:01:24 发布

skylen2008

最新推荐文章于 2024-08-02 22:01:24 发布

阅读量1.4k

点赞数

分类专栏： Web部分文章标签： css class div c tabs xhtml

本文链接：https://blog.csdn.net/skylen2008/article/details/1755679

版权

Web部分专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>
<meta name="stencil" content="PGLS000022">
<meta name="publishid" content="30,50,1">
<meta name="verify-v1" content="6HtwmypggdgP1NLw7NOuQBI2TW8+CfkYCoyeB8IDbn8=" />
<script type="text/javascript" src="http://www.sinaimg.cn/home/sinaflash.js"></script>
<script language="javascript" type="text/javascript">
//<![CDATA[
function Show_topADMenu(topadid_num,topadnum){
for(var i=0;i<4;i++){document.getElementById("topadcontent_"+topadid_num+i).style.display="none";}
for(var i=0;i<4;i++){document.getElementById("topadmenu_"+topadid_num+i).className="";}
document.getElementById("topadmenu_"+topadid_num+topadnum).className="topADTabsOn";
document.getElementById("topadcontent_"+topadid_num+topadnum).style.display="block";
}
//]]>
</script>
<style type="text/css">
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body,ul,ol,li,p,form,fieldset,table,td{font-family:"宋体";}
body{background:#fff;color:#000;}
td,p,li,select,input,textarea,div{font-size:12px;}

ul{list-style-type:none;}
select,input{vertical-align:middle; padding:0; margin:0;}

.f14{font-size:14px;}
.lh20{line-height:20px;}

a{text-decoration:underline;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;}

.clearit{clear:both;}
/* 顶通左侧四栏文字链切换 */
.topADTabs .topADTabsOn{width:19px; background:url(http://www.sinaimg.cn/home/07index/sinahome_ws_010.gif) no-repeat; padding:9px 0 0 3px; border-left:1px #fff solid; text-align:left; cursor:pointer;}
.topADTabsCon{width:115px; float:center; text-align:left; padding:4px 0 0 14px;}
.topADTabsCon li{line-height:20px; height:20px; overflow:hidden;}
</style>
<body>

<div>
<table><tr><td>
<div class="topADTabs">
  <ul>
  <li id="topadmenu_10" οnmοuseοver="setTimeout('Show_topADMenu(1,0)',200);" class="topADTabsOn">热销</li>
  <li id="topadmenu_11" οnmοuseοver="setTimeout('Show_topADMenu(1,1)',200);">上海</li>
  <li id="topadmenu_12" οnmοuseοver="setTimeout('Show_topADMenu(1,2)',200);">广东</li>
  <li id="topadmenu_13" οnmοuseοver="setTimeout('Show_topADMenu(1,3)',200);">加盟</li>
  </ul>
</div>
</td>


<td>
  <div class="topADTabsCon" id="topadcontent_10">
  <ul>
  
  <li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=86183,119174,119322&cid=0,0,0&sid=111010&advid=2654&camid=15774&show=ignore&url=http://bj.house.sina.com.cn/exhibit/3648.shtml target=_blank>金融街大宅将入市</a></li>
  <li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=86184,119175,119323&cid=0,0,0&sid=111011&advid=2654&camid=15774&show=ignore&url=http://bj.house.sina.com.cn/exhibit/3321.shtml target=_blank>宣武新盘茗筑登场</a></li>
  <li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=91323,124422,124574&cid=0,0,0&sid=116278&advid=2862&camid=15790&show=ignore&url=http://bj.house.sina.com.cn/exhibit/3765.shtml" target="_blank">国际港新商务时代</a></li>
  <li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=86185,119176,119324&cid=0,0,0&sid=111012&advid=2654&camid=15774&show=ignore&url=http://bj.house.sina.com.cn/exhibit/3630.shtml" target="_blank">亦庄·北岸8月开盘</a></li>
  <li><a href=http://classad.sina.com.cn/ target=_blank>网络赚钱新浪分类</a></li>
  <li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=86188,119179,119327&cid=0,0,0&sid=111015&advid=2654&camid=15774&show=ignore&url=http://www.hpl-town.com/" target=_blank>新品礼献东北三环</a></li>
  <li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=86276,119275,119423&cid=0,0,0&sid=111106&advid=2862&camid=15789&show=ignore&url=http://www.40n.cn/ target=_blank>望京北精品小户型</a></li>
  <li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=86299,119298,119446&cid=0,0,0&sid=111129&advid=2862&camid=15789&show=ignore&url=http://bj.house.sina.com.cn/exhibit/3700.shtml" target="_blank">西四环内绝版两居</a></li>
  <li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=91587,124702,124854&cid=0,0,0&sid=116559&advid=2862&camid=15790&show=ignore&url=http://www.benjia.com.cn/index1.html" target="_blank">好项目一年上千亿</a></li>
  
  </ul>
  </div>
<div class="topADTabsCon" id="topadcontent_11" style="display:none;">
<ul>

<li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=79203,111687,111811&cid=0,0,0&sid=103835&advid=1832&camid=14950&show=ignore&url=http://lanchou.emoo.com.cn/lanchou target=_blank>蓝筹盛典重奖恭候</a></li>
<li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=79205,111689,111813&cid=0,0,0&sid=103837&advid=1832&camid=14950&show=ignore&url=http://sh.house.sina.com.cn/focus/AnTing/index.html target=_blank>安亭日记引爆热潮</a></li>
<li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=88857,121907,122058&cid=0,0,0&sid=113745&advid=1832&camid=15691&show=ignore&url=http://lanchou.emoo.com.cn/lanchou/ target=_blank>蓝筹盛典揭晓前50</a></li>
<li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=91244,124342,124494&cid=0,0,0&sid=116198&advid=1832&camid=15691&show=ignore&url=http://bbs.sinahouse.sh.cn/zds/ target=_blank>买房这点事登场</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=88736,121780,121931&cid=0,0,0&sid=113614&advid=1832&camid=15691&show=ignore&url=http://lanchou.emoo.com.cn/lanchou/" target="_blank">寻找楼市大富翁</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=88737,121781,121932&cid=0,0,0&sid=113615&advid=1832&camid=15691&show=ignore&url=http://bbs.sinahouse.sh.cn/bbs/" target="_blank">新浪50大业主论坛</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=88738,121782,121933&cid=0,0,0&sid=113616&advid=1832&camid=15691&show=ignore&url=http://lanchou.emoo.com.cn/lanchou/" target="_blank">首期大富翁诞生</a></li>
<li><a href="http://sina.allyes.com/main/adfclick?db=sina&bid=89652,122708,122859&cid=0,0,0&sid=114547&advid=1832&camid=15691&show=ignore&url=http://sh.house.sina.com.cn/focus/lanchou/index.html" target="_blank">二期大富翁诞生</a></li>
<li><a href=http://sina.allyes.com/main/adfclick?db=sina&bid=91246,124344,124496&cid=0,0,0&sid=116200&advid=1832&camid=15691&show=ignore&url=http://lanchou.emoo.com.cn/lanchou/ target=_blank>三期大富翁诞生</a></li>

</ul>
</div>

<div class="topADTabsCon" id="topadcontent_12" style="display:none;">
<ul>

<li><a href=http://classad.sina.com.cn/ target=_blank>网络赚钱新浪分类</a></li>
<li><a href=http://bn.sina.com.cn/dajiangtang/ target=_blank>宽频影视大讲堂</a></li>
<li><a href="http://bj.house.sina.com.cn/decor/focus/bookclub/index.html" target=_blank>家居电子图书馆</a></li>
<li><a href="http://bf.sina.com.cn/newbf/zt/07newyear.html" target="_blank">喜欢金猪来传爱意</a></li>
<li><a href=http://classad.sina.com.cn/ target=_blank>07年新浪冠军项目</a></li>
<li><a href="http://chat.sina.com.cn/homepage/new_topic_index.shtml?new_topic1200_room_list" target="_blank">视频征婚现场直播</a></li>
<li><a href=http://classadnew.sina.com.cn/doc/tuiguang.htm class=a04 target=_blank>传海量生活资讯</a></li>
<li><a href="http://city.finance.sina.com.cn/city/wlmp.html" target="_blank">城市活动大联展</a></li>
<li><a href="http://gov.finance.sina.com.cn/zsyz/xmfs.html" target="_blank">投资中国新机遇</a></li>

</ul>
</div>