web实训—3.26

最新推荐文章于 2022-04-04 06:30:00 发布

綃释

最新推荐文章于 2022-04-04 06:30:00 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/xiaoshiyo/article/details/88910616

版权

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

<!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>

效果图：

二：jQuery基础语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。
基础语法：
$(selector).action()
注释：

美元符号“$”定义jQuery
选择器（selector）“查询”和“查找”HTML元素。
jQuery的action（）执行对元素的操作。

无序列表

1.在HTML文件中，可以利用成对的<ul></ul>标记来插入无序列表，中间的列表项标签<li></li>（list-items）用来定义列表项序列。
2.使用无序列表标签ul的type属性（使用CSS的list-style来代替）。用户可以指定出现在列表项前的项目符号的样式，其取值以及相应的符号样式如下：

（1）disc：指定项目符号为一个实心圆点（默认值是disc，是否使用该值在浏览器中效果都一样）；
（2）circle：指定项目符号为一个空心圆点；
（3）square：指定项目符号为一个实心方块；
（4）none：无项目符号。

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>

效果图：

綃释

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web实训—3.26

一：用无序列表实现二级导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> *{margin:0; padding:0;} #nav{background-color: #e9efa3; ...
复制链接

扫一扫