课堂作业3.26

最新推荐文章于 2020-07-03 13:46:58 发布

中也

最新推荐文章于 2020-07-03 13:46:58 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/NekrozC/article/details/88916479

本文介绍了HTML中有序列表与无序列表的区别，并通过实例展示了如何使用jQuery简化DOM操作。同时，提供了一个具体的导航栏代码示例，该示例使用了CSS进行样式设计。

无序列表与有序列表的区别
有序列表的标签是

,有start属性，最大序号为999 无序列表的标签是
- ,无start属性。
  1. 的显示方式是列表前面有序号（序号形式由type属性值决定）
    - 的显示方式是列表前面没序号,只有圆点（圆点样式由type属性值决定）

jQuery的选择机制构建于CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。
基本语法是：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{margin:0; padding:0;}
        #nav{background-color: #e9efa3;
            width:600px;
            height:20px;
            margin:0 auto;
        }
        ul li{
            text-decoration: none;float:left;line-height: 20px;text-align: center;margin:0 auto;position:relative;
        }
        a{text-decoration: none;color:#33bba5;padding:0 10px;width:100px;}
        a:hover{
            background-color: antiquewhite;color: #55f0ff;
        }
        ul li ul{position:absolute;top:20px;left:0px;}
        ul li ul li{float:none;background-color: #c5ffb8;margin:1px 0;display:none;}
        ul li ul li a{padding:0px;}
        ul li:hover ul li{display:block;}
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">web实战</a></li>
                <li><a href="#">服务端技术</a></li>
                <li><a href="#">python开发</a></li>
 
            </ul>
        </li>
        <li><a href="#">学习中心</a></li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>