Web实训知识点_0326

最新推荐文章于 2020-12-24 13:48:08 发布

Songsiru

最新推荐文章于 2020-12-24 13:48:08 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/Songsiru/article/details/88917656

版权

一、用无序列表实现二级导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        #nav{background-color: #a92429;width: 600px;height: 20px;  margin:0 auto;}
        ul{list-style: none;}
        ul li {list-style: none;float: left;line-height: 20px;text-align: center;position: relative}
        a{text-decoration: none;color: #33b5e5;padding:0 10px}
        a:hover{background-color: #78a95c;color: #77e55d}
        ul li ul{position: absolute;top:20px;left:0px}
        ul li ul li{float: none;background-color: blueviolet;  margin:1px 0;display: none}
        ul li ul li a{padding: 0;}
        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网页实战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>
    </ul>
</div>
</body>
</html>

实现效果图

二、知识点回顾

jQuery基础语法

1.jQuery的选择机制构建于CSS的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

2.jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

jQuery操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        var p1=document.getElementById()
        p1.style.backgroundColor='red'
        p1.style.width='50px'
        p1.style.height='50px'
        
        
    </script>
</head>
<body>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
</body>
</html>

Songsiru

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点_0326

一、用无序列表实现二级导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{margin: 0;p...
复制链接

扫一扫