如何在HTML里面实现鼠标划上去导航出现下拉菜单呢?或者说用js插件如何调用?

如何在HTML里面实现鼠标划上去导航出现下拉菜单呢?或者说用js插件如何调用?,第1张

这个用jQuery就的toggle函数可以实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script   src="

>

    <style>

        .main

        {

            list-style: none

            float: left

            margin-left: 20px

        }

        .main li

        {

            list-style: none

            text-align: left

            margin-left: -40px

        }

        .main ul

        {

            display: none

        }

        .main a

        {

            text-decoration: none

        }

        .main li a

        {

            text-decoration: none

        }

    </style>

</head>

<body>

<ul id="uid">

    <li class="main"><a href="#">菜单一</a>

    <ul>

        <li><a href="#">子菜单</a></li>

        <li><a href="#">子菜单</a></li>

        <li><a href="#">子菜单</a></li>

    </ul>

    </li>

    <li class="main"><a href="#">菜单二</a>

        <ul>

            <li><a href="#">子菜单</a></li>

            <li><a href="#">子菜单</a></li>

            <li><a href="#">子菜单</a></li>

        </ul>

    </li>

    <li class="main"><a href="#">菜单三</a>

        <ul>

            <li><a href="#">子菜单</a></li>

            <li><a href="#">子菜单</a></li>

            <li><a href="#">子菜单</a></li>

        </ul>

    </li>

</ul>

</body>

<script >

$(document).ready(

    function () {

        $(".main").hover(function () {

            $(this).children("ul").toggle()

        })

    }

)

</script>

</html>

三种写法,以市场价:108元为例,108元划上删除线。

1.

市场价:<u>108元</u>

2.

市场价:<s>108元</s>

3.

市场价:<del>108元</del>

三种均可,可以任意挑选。

<style type="text/css" media="screen">.line_m{text-decoration:line-through} </style><span class="line_m">中间是空格</span>文字<span class="line_m">中间是空格</span>需要多长就多加一个(空格)。CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。 在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 它的作用可以达到:(1)在几乎所有的浏览器上都可以使用。(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。(4)你可以轻松地控制页面的布局 。(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7360938.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存