一款功能綜合的CSS滑動門特效

時間 2019-11-19
標籤一款功能綜合 css 滑動特效欄目 CSS 简体版
原文原文鏈接
一個功能綜合的CSS滑動門特效代碼，在滑動門裏包含列表、包含圖文混排、包含文字滾動，其中任意一個都是咱們經常使用的，綜合運用這些功能才能作出更炫麗、符合標準的網頁來。
　　注：本特效的代碼沒有通過優化，僅爲了表現功能，若是要用到你的網頁話，能夠摘錄須要的部分。 javascript
<html>
    <head>
    <title>一款功能綜合的CSS滑動門特效丨河北塑膠地板|石家莊陽光棚</title>
    <style>
    .tabBox {
    display: none;
    }
    .kind {
    height:270px;
    }
    .kindTabs {
    width:238px;
    height:30px;
    background:url("") repeat-x;
    border-right:#99CEEE 1px solid;
    overflow:auto;
    }
    .kindTabs ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    .kindTabs li {
    float:left;
    line-height:30px;
    text-align:center;
    }
    .kindTabs li a {
    float:left;
    width:79px;
    height:30px;
    font:12px/1.2em Tahoma;
    color:#333;
    line-height:30px;
    background:url("/html/txdm_2/images/20100917/playbill_tab_current.jpg");
    text-decoration:none;
    }
    .kindTabs li a:hover,.kindTabs li a.current {
    font:bold 12px/1.2em Tahoma;
    color:#069;
    line-height:30px;
    background:url("/html/txdm_2/images/20100917/playbill_tab_select.jpg");
    text-decoration:none;
    }
    .kindTabs .title {
    width:66px;
    height:21px;
    background:url("") no-repeat center;
    }
    .kind .tabBody {
    width:238px;
    height:249px;
    border-left:#99CEEE 1px solid;
    border-right:#99CEEE 1px solid;
    border-bottom:#99CEEE 1px solid;
    overflow:auto;
    }
    /*tab kind content*/
    .playbillHot {
    width:218px;
    height:23px;
    color:#069;
    line-height:23px;
    text-indent:10px;
    background:#F1FCFE;
    border:#99CEEE 1px solid;
    }
    .playbillList {
    padding:5px 0;
    width:220px;
    height:199px;
    color:#666;
    line-height:22px;
    text-align:left;
    overflow:hidden;
    }
    .playbillList span.BC90 {
    color:#C90;
    }
    .playbillList span.BF09 {
    color:#F09;
    }
    .playbillList span.B990 {
    color:#990;
    }
    .playbillList span.BF60 {
    color:#F60;
    }
    .playbillList span.B069 {
    color:#069;
    }
    .newsMarket {
    margin:0 auto;
    width:220px;
    }
    .newsMarket a {
    font-size:12px;
    width:220px;
    height:24px;
    color:#666;
    line-height:24px;
    text-indent:10px;
    text-align:left;
    background:url("/jscss/demoimg/201007/dot_arrow_1.jpg") 0 8px no-repeat;
    border-bottom:#CCC 1px dotted;
    text-decoration:none;
    overflow:hidden;
    display:block;
    }
    .newsMarket a:hover {
    color:#069;
    background:url("/jscss/demoimg/201007/dot_arrow_2.jpg") 0 8px no-repeat;
    border-bottom:#069 1px dotted;
    text-decoration:none;
    }
    .newsTopicPic th,.newsTopicPic td {
    padding:5px 0;
    vertical-align:top;
    }
    .newsTopicPic th a img {
    padding:3px;
    width:60px;
    height:60px;
    border:#CCC 1px solid;
    }
    .newsTopicPic th a:hover img {
    padding:3px;
    width:60px;
    height:60px;
    border:#F90 1px solid;
    }
    .newsTopicPic td {
    color:#999;
    line-height:18px;
    text-align:left;
    }
    .newsTopicPic td span a {
    font:12px Tahoma;
    color:#069;
    line-height:18px;
    text-decoration:none;
    }
    .newsTopicPic td span a:hover {
    color:#069;
    text-decoration:underline;
    }
    .newsTopicPic td a {
    color:#333;
    text-decoration:underline;
    }
    .newsTopicPic td a:hover {
    color:#F00;
    text-decoration:underline;
    }
    .newsTopicTxt {
    margin:0 auto;
    width:220px;
    }
    .newsTopicTxt a {
    width:220px;
    height:24px;
    color:#666;
    line-height:24px;
    text-indent:10px;
    text-align:left;
    background:url("/jscss/demoimg/201007/dot_arrow_1.jpg") 0 8px no-repeat;
    border-bottom:#CCC 1px dotted;
    text-decoration:none;
    overflow:hidden;
    display:block;
    }
    .newsTopicTxt a:hover {
    color:#069;
    background:url("/jscss/demoimg/201007/dot_arrow_2.jpg") 0 8px no-repeat;
    border-bottom:#069 1px dotted;
    text-decoration:none;
    }
    .vsList {
    margin-top:10px;
    }
    .vsList td {
    width:120px;
    color:#666;
    text-align:center;
    }
    .vsList td a img {
    padding:4px;
    width:110px;
    height:80px;
    border:#AECFE3 1px solid;
    }
    .vsList td a:hover img {
    width:110px;
    height:80px;
    border:#FC0 1px solid;
    }
    .vsList td a {
    color:#666;
    line-height:20px;
    }
    .vsList td a:hover {
    color:#069;
    }
    </style>
    </head>
    <body>
    <script language="javascript">
    /**
    * 切換TabSheet
    */
    function switchCell(tab, n) {
    tab=document.getElementsByName(tab);
    for(i=0;i<tab.length;i++) tab.item(i).className="tabBox";
    tab.item(n).className="";
    }
    </script>
    <div class="kind">
    <div id="tabs1" class="kindTabs">
    <ul>
    <li><a href="http://www.baidu.com" onMouseMove="switchCell('tab1',0)">tabsheet1</a></li>
    <li><a href="#" onMouseMove="switchCell('tab1',1)">tabsheet2</a></li>
    <li><a href="#" onMouseMove="switchCell('tab1',2)">中文Sheet</a></li>
    </ul>
    </div>
    <div class="tabBody">
    <div  name="tab1" id="tab1">
    <table width="220" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td height="5"></td>
    </tr>
    <tr>
    <td valign="top" height="234">
    <div class="newsMarket">
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    <li><a title="title" href="#">中文標題</a></li>
    </div>
    </td>
    </tr>
    </table>
    </div>
    <div name="tab1" id="tab1" class="tabBox">
    <table width="220" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>
    <table width="220" border="0" cellpadding="0" cellspacing="0" class="newsTopicPic">
    <tr>
    <th width="80"><a href="#"><img src="/images/m09.jpg" width="346" height="191" /></a></th>
    <td>
    <span><a href="#">我和個人祖國:豬倌變狀元</a></span><br />
    中國成立以來，政府部門順應民心出臺一系列政策…… <a href="/">[全文]</a>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>
    <div class="newsTopicTxt">
    <li><a title="Title" href="#">通訊大跨越</a></li>
    <li><a title="title" href="#">糧食產量翻5倍</a></li>
    <li><a title="title" href="#">農機改變人民</a></li>
    <li><a title="title" href="#">魏會信的自述</a></li>
    </div>
    </td>
    </tr>
    </table>
    </div>
    <div name="tab1" id="tab1" class="tabBox">
    <table width="220" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td height="5"></td>
    </tr>
    <tr>
    <td height="25">
    <div class="playbillHot"><li><a title="#" href="#">電視劇《狙擊手》專題</a></li></div>
    </td>
    </tr>
    <tr>
    <td valign="top">
    <div class="playbillList">
    <marquee direction="up" scrollAmount="2" onmouseover=this.stop() onmouseout=this.start() >
    滾動<br />
    滾動<br />
    滾動<br />
    滾動<br />
    滾動<br />
    滾動<br />
    </marquee>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    </body>
    </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。