DHTML技术---新闻栏目

最新推荐文章于 2022-06-29 13:26:05 发布

海那边的小萌男

最新推荐文章于 2022-06-29 13:26:05 发布

阅读量330

点赞数

分类专栏： J2EE 文章标签：技术 dhtml

本文链接：https://blog.csdn.net/weixin_37720904/article/details/71698329

版权

J2EE 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

做一个新闻栏目的东西

这里写图片描述

当鼠标放上去，会出现下拉栏目。并且出现不同的颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DHTML技术综合演示---示例:下拉风格的菜单条</title>
        <style type="text/css">
            #newslist{
                list-style:none;
            }
            #newslist ul{
                list-style:none;
                margin:0px;
                padding:0px;
            }
            #newslist li{
                float:left;
                width:180px;
            }
            #newslist li a{
                display:block;
                color:#ffffff;
                background-color:#0066cc;
                text-decoration:none;
                line-height:25px;
                text-align:center;
            }

            #newslist li a:hover{
                color:#ff66cc;
                background-color:#999999;
            }

            #newslist li a{
                background-color:#0099ff;
            }
        </style>

        <script type="text/javascript">
            function list(oLiNode){
                var oUlNode = oLiNode.getElementsByTagName("ul")[0];
                //alert(oUlNode.nodeName);
                //oUlNode.style.display = oUlNode.style.display=="block"? "none":"block";
                with(oUlNode.style){
                    display = display=="block"? "none":"block";
                }
            }

        </script>
    </head>

    <body>
  <div id="newsid">
    <ul id="newslist">
        <li onmouseover="list(this)"; onmouseout="list(this)" >
            <a href="javascript:void(0)">城院新闻</a>
            <ul style="display:none;">
                <li><a href="${new1Url}">校园新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
            </ul>
        </li>
        <li onmouseover="list(this)"; onmouseout="list(this)" >
            <a href="javascript:void(0)">大学新闻</a>
            <ul style="display:none;">
                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
            </ul>
        </li>
        <li onmouseover="list(this)"; onmouseout="list(this)" >
            <a href="javascript:void(0)">社会新闻</a>
            <ul style="display:none;">
                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
            </ul>
        </li>
        <li onmouseover="list(this)"; onmouseout="list(this)" >
            <a href="javascript:void(0)">就业新闻</a>
            <ul style="display:none;">
                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
            </ul>
        </li>

    </ul>

</div>

    </body>
</html>

接下来是一个类似 QQ好友列表的网页菜单
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DHTML技术综合演示---示例:下拉风格的菜单条2--用表格封装的</title>
        <style type="text/css">
            table{
                border:#8080ff solid 1px;
                width:100px;
            }
            table td{
                border:#ff0000 solid 1px;
            }
            td ul{
                list-style:none;
                display:none;
                margin:0px;
                padding:0px;
            }

            table td a:link, table td a:visited{
                color:#8080ff;
                text-decoration:none;
            }

            table td a:hover{
                color:#ff66cc;
                background-color:#ffff80;
            }

            #newslist li a{
                background-color:#0099ff;
            }

            /*为菜单的动态风格添加两个预定义的类样式*/
            .open{
                display:block;
            }
            .close{
                display:none;
            }

        </style>

        <script type="text/javascript">
            function list(oANode){
                var oTdNode = oANode.parentNode;
                var oUlNode = oTdNode.getElementsByTagName("ul")[0];
                if(oUlNode.className=="open"){
                    oUlNode.className="close";
                }else{//close和初始化时的没有赋值都属于这种情况
                    oUlNode.className="open";
                }
            }   
        </script>
    </head>

    <body>
        <table>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)">好友菜单1</a>
                    <!--开发时样式设置的测试:
                    <ul class="close">
                    -->
                    <ul>
                        <li><a href="#">一个好友a</a></li>
                        <li>一个好友b</li>
                        <li>一个好友c</li>
                        <li>一个好友d</li>
                    </ul>
                </td>

            </tr>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)">好友菜单2</a>
                    <ul>
                        <li>一个好友aa</li>
                        <li>一个好友ab</li>
                        <li>一个好友ac</li>
                        <li>一个好友ad</li>
                    </ul>
                </td>

            </tr>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)">好友菜单3</a>
                    <ul>
                        <li>一个好友ba</li>
                        <li>一个好友bb</li>
                        <li>一个好友bc</li>
                        <li>一个好友bd</li>
                    </ul>
                </td>

            </tr>
        </table>    
    </body>
</html>

接下来是一个给定行列创建表格的演示
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DHTML技术综合演示---示例:表格创建2</title>
        <style type="text/css">
            table{
                border:#8080ff solid 1px;
                width:500px;
                border-collapse:collapse;               
            }
            table td{
                border:#ff0000 solid 1px;
                padding:5px;
            }

        </style>

        <script type="text/javascript">
            //※使用表格相关的专用方法来实现
            function createTable(){
                var oTableNode = document.createElement("table");
                var oTrNode = oTableNode.insertRow();
                var oTdNode = oTrNode.insertCell();
                oTdNode.innerHTML="单元格文本内容";

                //把oTableNode对象添加到div中
                document.getElementById("div1").appendChild(oTableNode);
            }   

            //创建5行6列的表格
            function createTable2(){
                var oTableNode = document.createElement("table");
                for(var i=1; i<=5; i++){
                    var oTrNode = oTableNode.insertRow();
                    for(var j=1;j<=6;j++){
                        var oTdNode = oTrNode.insertCell();
                        oTdNode.innerHTML="单元格"+i+"-"+j;
                    }
                }
                //把oTableNode对象添加到div中
                document.getElementById("div2").appendChild(oTableNode);
            }


            function createTable3(){
                var oTableNode = document.createElement("table");

                try{
                  var rowNum=parseInt( document.getElementsByName("rowNum")[0].value );
                  var colNum=parseInt( document.getElementsByName("colNum")[0].value );
                  if(isNaN(rowNum)){
                     alert("行数格式错误!");
                     return;
                  }
                  if(isNaN(colNum)){
                     alert("列数格式错误!");
                     return;
                  }
                }catch(e){
                    alert("不异常...");
                    return;
                }

                for(var i=1; i<=rowNum; i++){
                    var oTrNode = oTableNode.insertRow();
                    for(var j=1;j<=colNum;j++){
                        var oTdNode = oTrNode.insertCell();
                        oTdNode.innerHTML="单元格"+i+"-"+j;
                    }
                }
                document.getElementById("div3").appendChild(oTableNode);
            }


        </script>
    </head>

    <body>
        <input type="button" value="创建表格" onclick="createTable()">  &nbsp;&nbsp;&nbsp;
        <input type="button" value="创建表格2" onclick="createTable2()">
        <br/>

        行数:<input type="text" name="rowNum"/>  &nbsp;&nbsp; 列数:<input type="text" name="colNum"/>
        <input type="button" value="创建表格3" onclick="createTable3()">  &nbsp;&nbsp;&nbsp;
        <hr/>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>