07
2018
05

【教程】tab选项卡新闻列表

先上图片看效果

ie8下

1.JPG

chrome下

2.JPG


ps: ie8不识别css的圆角


html部分的代码


<!-- hotnews part -->

<div class="hotnews">

    <div class="hot_hd">

        <span class="span_m1" id="m1" onmouseover="checkm(1);">热点新闻</span>

        <span class="span_m2" id="m2" onmouseover="checkm(2);">行业新闻</span>

        <span class="span_m2" id="m3" onmouseover="checkm(3);">通知公告</span>

    </div>

    <ul class="ul_m display_b" id="ul_m1">

        <li><span class="span_li_left c_red2">[行业新闻]</span><a href="info.html">李克强在北京指挥中心观看神舟十一号发射</a></li>

        <li><span class="span_li_left c_red2">[行业新闻]</span><a href="info.html">群星奖音乐门类决赛昨举行陕西两节目精彩演出</a></li>

        <li><span class="span_li_left c_red2">[国内新闻]</span><a href="info.html">王勇出席2016中央企业熠星创新创意大赛启动仪式</a></li>

        <li><span class="span_li_left c_red2">[行业新闻]</span><a href="info.html">李克强在北京指挥中心观看神舟十一号发射</a></li>

        <li><span class="span_li_left c_red2">[行业新闻]</span><a href="info.html">群星奖音乐门类决赛昨举行陕西两节目精彩演出</a></li>

        <li><span class="span_li_left c_red2">[国内新闻]</span><a href="info.html">王勇出席2016中央企业熠星创新创意大赛启动仪式</a></li>

        <li><span class="span_li_left c_red2">[行业新闻]</span><a href="info.html">李克强在北京指挥中心观看神舟十一号发射</a></li>

        <li><span class="span_li_left c_red2">[行业新闻]</span><a href="info.html">群星奖音乐门类决赛昨举行陕西两节目精彩演出</a></li>

        <li><span class="span_li_left c_red2">[国内新闻]</span><a href="info.html">王勇出席2016中央企业熠星创新创意大赛启动仪式</a></li>

    </ul>

    <ul class="ul_m display_n" id="ul_m2">

        <li><a href="info.html">市环保局党委副书记郑西胜来蓝田指导帮扶工作</a></li>

        <li><a href="info.html">交通运输部检查调研西安市绿色交通城市创建工作</a></li>

        <li><a href="info.html">全省首个公共法律服务自助终端亮相我市</a></li>

        <li><a href="info.html">市环保局党委副书记郑西胜来蓝田指导帮扶工作</a></li>

        <li><a href="info.html">交通运输部检查调研西安市绿色交通城市创建工作</a></li>

        <li><a href="info.html">全省首个公共法律服务自助终端亮相我市</a></li>

        <li><a href="info.html">市环保局党委副书记郑西胜来蓝田指导帮扶工作</a></li>

        <li><a href="info.html">交通运输部检查调研西安市绿色交通城市创建工作</a></li>

        <li><a href="info.html">全省首个公共法律服务自助终端亮相我市</a></li>

    </ul>

    <ul class="ul_m display_n" id="ul_m3">

        <li><a href="info.html">关于下发国务院津贴的通知</a></li>

        <li><a href="info.html">中小学1.20开始进入寒假的通知</a></li>

        <li><a href="info.html">公告:全体党员今天下午在会议室开会</a></li>

    </ul>

    

    <script type="text/javascript">

    function checkm(n){

        for(var i=1;i<4;i++){

            if(i==n){

                document.getElementById("m"+i).className = "span_m1";

                document.getElementById("ul_m"+i).className = "ul_m display_b";

            }

            else {

                document.getElementById("m"+i).className = "span_m2";

                document.getElementById("ul_m"+i).className = "ul_m display_n";

            }

        }

    }

    </script>

</div>       


        

css代码

        

    body {

        margin: 0;

        padding: 0;

        font-family: "微软雅黑";

        font-size: 14px;

        color: #333333;

    }

    a {

        color: #666666;

        text-decoration: none;

    }

    a:hover {

        color: #04448e;

    }

    

    .code {

        float: left;

        width: 100%;

        margin-top: 200px;

    }

    .tarea {

        width: 99%;

        height: 500px;

    }

    

    .w100b {

        width: 100%;

    }

    .w1100p {

        width: 1100px;

    }

    .box {

        width: 1100px;

        margin: 0 auto;

        padding: 0;

        position: relative;

    }

    .fleft {

        float: left;

    }

    .fright {

        float: right;

    }

    

/* hotnews css 选项卡 */

    .hotnews {

        float: left;

        width: 440px;

        margin: 0;

        padding: 0 0 0 20px;

    }

    .hot_hd {

        float: left;

        width: 420px;

        margin: 0;

        padding-left: 20px;

        border-bottom: 2px #04448e solid;

    }

    .span_m1 {

        float: left;

        width: 120px;

        height: 30px;

        margin-bottom: -2px;

        background-color: #fff;

        text-align: center;

        line-height: 30px;

        font-size: 14px;

        color: #04448e;

        cursor: pointer;

        border-left: 2px #04448e solid;

        border-top: 2px #04448e solid;

        border-right: 2px #04448e solid;

        border-top-left-radius: 5px;

        border-top-right-radius: 5px;

    }

    .span_m2 {

        float: left;

        width: 120px;

        height: 30px;

        text-align: center;

        line-height: 30px;

        font-size: 14px;

        cursor: pointer;

        border-top-left-radius: 3px;

        border-top-right-radius: 3px;

    }

    .ul_m {

        float: left;

        width: 440px;

        margin: 0;

        padding: 0;

        list-style-type: none;

    }

    .display_n {

        display: none;

    }

    .display_b {

        display: block;

    }

    .ul_m li {

        float: left;

        width: 425px;

        margin: 0;

        padding: 0 0 0 15px;

        background: url(../images/icon_list3.png) left center no-repeat;

        font-size: 14px;

        line-height: 29px;

    }

    .ul_m li a {

        text-decoration: none;

        color: #666666;

    }

    .ul_m li a:hover {

        color: #04448e;

    }

    .span_li_right {

        float: right;

    }

    .span_li_left {

        float: left;

        margin-right: 10px;

    }

    .c_red2 {

        color: #04448e;

        font-weight: bold;

    }

                        

        


打赏
« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。