CSS 滑動門，自己寫的，沒有圖片

2024-09-05 12:20:23

字體：大中小

來源：轉載

供稿：網(wǎng)友

自己寫的CSS滑動門，藍色經(jīng)典風格，沒有使用任何的修飾圖片，清新自然，網(wǎng)戶網(wǎng)站都在用，個人感覺還行吧。

<!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>    <title>CSS滑動門</title>    <style type="text/css">                .tabber{border:1px solid #AACCEE;clear:both;}        .tabber .tmenu ul{margin:0;padding:0; display:block;}        .tabber .tmenu li{            float:left;                        height:25px;            line-height:25px;                                   border-bottom:1px solid #AACCEE;            border-right:1px solid #AACCEE;            border-color:#AACCEE;                        border-width:1px;            color:#004499;            cursor:pointer;            display:block;                                                            text-align:center;}        .tabber .tmenu li.on{                        background:#FFF;            border-bottom-color:#FFFFFF;            cursor:default;            font-weight:bold;}        .tabber .tbox{            height:267px;            clear:both;}        .tabber .tbox div p{padding:15px;}        .block{display:block;}           .none{display:none;}        </style>    <script type="text/javascript">        function SetTab(tab,id,cnt){            var menus=document.getElementById(tab).getElementsByTagName("li");            	        for(i=0;i<cnt;i++){	       	            i==id?menus[i].className="on":menus[i].className="";	            i==id?document.getElementById(tab+"-content"+i).className="block":document.getElementById(tab+"-content"+i).className="none";            }	    }    </script></head><body>    <div   id="iwvjtn8m0"   class="tabber" style="width: 529px;">        <div   id="iwvjtn8m0"   class="tmenu">            <ul id="tab1">                <li style="width: 85px;" class="on" onmouseover="SetTab('tab1',0,4);">新聞</li>                <li style="width: 85px;" onmouseover="SetTab('tab1',1,4);">娛樂</li>                <li style="width: 85px;" onmouseover="SetTab('tab1',2,4);">財經(jīng)</li>                <li style="width: 85px;" onmouseover="SetTab('tab1',3,4);">讀書</li>                <li style="width: 185px; border-bottom: solid 1px #AACCEE; border-right: none;">關注更多？</li>            </ul>        </div>        <div   id="iwvjtn8m0"   class="tbox">            <div   class="iwvjtn8m0"   id="tab1-content0" class="block">                <p>看新聞，上網(wǎng)易</p>            </div>            <div   class="iwvjtn8m0"   id="tab1-content1" class="none">                <p>娛樂七天樂</p>            </div>            <div   class="iwvjtn8m0"   id="tab1-content2" class="none">                <p>今天股市暴跌</p>            </div>            <div   class="iwvjtn8m0"   id="tab1-content3" class="none">                <p>讀書使人進步……</p>            </div>        </div>    </div>    <br />    <div   id="iwvjtn8m0"   class="tabber" style="width: 343px;">        <div   id="iwvjtn8m0"   class="tmenu">            <ul id="tab2">                <li style="width: 85px;" class="on" onmouseover="SetTab('tab2',0,4);">新聞</li>                <li style="width: 85px;" onmouseover="SetTab('tab2',1,4);">娛樂</li>                <li style="width: 85px;" onmouseover="SetTab('tab2',2,4);">Ajax</li>                <li style="width: 85px; border-right: none;" onmouseover="SetTab('tab2',3,4);">編程</li>            </ul>        </div>        <div   id="iwvjtn8m0"   class="tbox">            <div   class="iwvjtn8m0"   id="tab2-content0" class="block">                <p>最新的新聞內(nèi)容</p>            </div>            <div   class="iwvjtn8m0"   id="tab2-content1" class="none">                <p>時尚娛樂資訊</p>            </div>            <div   class="iwvjtn8m0"   id="tab2-content2" class="none">                <p>Ajax成就未來……</p>            </div>            <div   class="iwvjtn8m0"   id="tab2-content3" class="none">                <p> ASP.NET...</p>            </div>        </div>    </div></body></html>

上一篇：側邊欄導航菜單，溢出式導航

下一篇：仿Windows經(jīng)典風格的選項卡Tab