CSS 滑动门，自己写的，没有图片

2024-09-05 12:20:23

字体：大中小

来源：转载

供稿：网友

自己写的CSS滑动门，蓝色经典风格，没有使用任何的修饰图片，清新自然，网户网站都在用，个人感觉还行吧。

<!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 class="tabber" style="width: 529px;">        <div 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);">财经</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 class="tbox">            <div id="tab1-content0" class="block">                <p>看新闻，上网易</p>            </div>            <div id="tab1-content1" class="none">                <p>娱乐七天乐</p>            </div>            <div id="tab1-content2" class="none">                <p>今天股市暴跌</p>            </div>            <div id="tab1-content3" class="none">                <p>读书使人进步……</p>            </div>        </div>    </div>    <br />    <div class="tabber" style="width: 343px;">        <div 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 class="tbox">            <div id="tab2-content0" class="block">                <p>最新的新闻内容</p>            </div>            <div id="tab2-content1" class="none">                <p>时尚娱乐资讯</p>            </div>            <div id="tab2-content2" class="none">                <p>Ajax成就未来……</p>            </div>            <div id="tab2-content3" class="none">                <p> ASP.NET...</p>            </div>        </div>    </div></body></html>

上一篇：侧边栏导航菜单，溢出式导航

下一篇：仿Windows经典风格的选项卡Tab