导航部分的案列

最新推荐文章于 2022-08-23 10:59:47 发布
最新推荐文章于 2022-08-23 10:59:47 发布
阅读量94 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38068491/article/details/82385409
版权

.1.实现鼠标放上去，往上动的效果的导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>
        
        *{
            margin: 0;padding: 0;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        ul{
            width: 480px;
            height: 40px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
            /* padding-top: 4px; */
        }
         ul li{
             float: left;
             width: 72px;height: 35px;
             border: 1px solid #ccc;
             border-bottom: none;
             margin-right: 9px;
             margin-top: 4px;
             text-align: center;
             line-height: 35px;
         }
         ul li a{
             /* 元素转换：属性：display */
             display: block;
             width: 72px;
             height: 35px;
         }
         ul li:hover{
             margin-top: 0;
             /* 实际的高度：content + 上下padding + 上下的border */
             height: 39px;
             line-height: 43px;
             /* padding: 2px 0; */
             /* padding-top: 4px; */
             border-bottom: 1px solid white;
         }
         ul li:hover a{
             height: 39px;
         }
    </style>
</head>
<body>
    <ul>
        <li><a href="">tab one</a></li>
        <li><a href="">tab two</a></li>
        <li><a href="">tab three</a></li>
        <li><a href="">tab four</a></li>
    </ul>   
</body>
</html>

.2.有背景图片且可往上动的效果导航

    ps取的图：  bg-bg.png                  big-bg1.png    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        ul{
            height: 44px;
            width: 490px;
            margin: 100px auto;
            background: url(../images/big-bg.png) repeat-x left bottom;
        }
        ul li{
            float: left;
            width: 78px;
            height: 30px;
            margin-top: 6px;
            line-height: 28px;
            text-align: center;
            margin-left: 20px;
            /* border: 1px solid red; */
        }
        ul li:hover{
            margin-top: 0;
            height: 36px;
            background: url(../images/big-bg1.png) repeat-x left bottom;

        }
    
    </style>
</head>
<body>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
        <li><a href="">首页</a></li>
    </ul>
    
</body>
</html>

3.二级导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .nav1 {
            width: 350px;
            margin: 100px auto;

        }

        /*  .nav1>li 找到.nav1 子元素（儿子，不包括孙子） */

        .nav1>li {
            float: left;
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: #ccc;
            margin-right: 5px;
        }

        .nav2 {
            width: 80px;
            display: none;
        }

        .nav2>li {
            height: 50px;
            width: 80px;
            background: #d6cfcf;
        }

        .nav1>li:hover {
            background: #222;
        }

        .nav1>li:hover>a {
            color: white;
            text-decoration: underline;
        }

        /* 滑过nav1下面的li的时候，改变li下面nav2显示*/

        .nav1>li:hover .nav2 {
            display: block;
        }

        /* 滑过nav2下面的li的时候，改变li背景颜色 */

        .nav2>li:hover {
            background: #222;
        }

        /* 滑过nav2下面的li的时候，改变li下面的a标签的字体颜色 */

        .nav2>li:hover>a {
            color: white;
        }
    </style>
</head>

<body>
    <div class="nav">
        <!-- li标签一定放在ul 和 ol 
            ul 和 ol 的子元素一定要是li 
        -->
        <ul class="nav1">
            <li>
                <a href="">首页</a>
                <ul class="nav2">
                    <li>
                        <a href="">首页1</a>
                    </li>
                    <li>
                        <a href="">首页2</a>
                    </li>
                    <li>
                        <a href="">首页3</a>
                    </li>
                    <li>
                        <a href="">首页4</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">首页</a>
                <ul class="nav2">
                    <li>
                        <a href="">首页1</a>
                    </li>
                    <li>
                        <a href="">首页2</a>
                    </li>
                    <li>
                        <a href="">首页3</a>
                    </li>
                    <li>
                        <a href="">首页4</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">首页</a>
                <ul class="nav2">
                    <li>
                        <a href="">首页1</a>
                    </li>
                    <li>
                        <a href="">首页2</a>
                    </li>
                    <li>
                        <a href="">首页3</a>
                    </li>
                    <li>
                        <a href="">首页4</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">首页</a>
                <ul class="nav2">
                    <li>
                        <a href="">首页1</a>
                    </li>
                    <li>
                        <a href="">首页2</a>
                    </li>
                    <li>
                        <a href="">首页3</a>
                    </li>
                    <li>
                        <a href="">首页4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

</body>

</html>

4.精灵图实现导航背景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        ul {
            width: 248px;
            height: 22px;
            margin: 100px auto;
        }

        ul li {
            float: left;
            height: 22px;
            width: 62px;
            text-align: center;
            line-height: 22px;
            font-size: 12px;
            background-image: url(../images/bg.gif);

        }

        ul .list2 {
            background-position: -62px 0;
        }

        ul .list3 {
            background-position: -124px 0;
        }

        ul .list4 {
            background-position: -186px 0;
        }

        ul .list1:hover {
            background-position: 0 -22px;
        }

        ul .list2:hover {
            background-position: -62px -22px;
        }

        ul .list3:hover {
            background-position: -124px -22px;
        }

        ul .list4:hover {
            background-position: -186px -22px;
        }
    </style>
</head>

<body>
    <ul>
        <li class="list1">
            <a href="">首页</a>
        </li>
        <li class="list2">
            <a href="">首页</a>
        </li>
        <li class="list3">
            <a href="">首页</a>
        </li>
        <li class="list4">
            <a href="">首页</a>
        </li>
    </ul>

</body>

</html>

5.滑动门实现导航背景，好处是不管li标签里的字有多少，背景图都会有。

left.png          right.png   

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        ul {
            width: 500px;
            height: 22px;
            margin: 100px auto;
        }

        li {
            padding-left: 23px;
            float: left;
            background: url(../images/left.png) no-repeat left top;
        }

        li a {
            padding-right: 23px;
            background: url(../images/right.png) no-repeat right top;
        }

        li:hover {
            background-position: 0 -22px;
        }

        li:hover a {
            background-position: 0 -22px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="">首页</a>
        </li>
        <li>
            <a href="">首页</a>
        </li>
        <li>
            <a href="">首页首页首页</a>
        </li>
        <li>
            <a href="">首页</a>
        </li>
    </ul>

</body>

</html>

 

qq_38068491
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
共享充电柜方案开发案列详细介绍
6108我爱物联网方案开发CSDN博客
09-04 1620
现在电动车成为众多居民短途出行的交通工具，但是电动车的充电存在很大的安全隐患，很多的居民都是从楼上私拉线到地面来为电动车充电，常会导致安全事故的发生，而用共享充电柜取代用户充电器，能消除90%充电器不合格的安全隐患，也避免这些安全隐患。6108方案研发的共享充电柜防雨防雷，可全天候使用，能满足居民充电要求。 目录 一、共享充电柜方案介绍 二、共享充电柜方案优点 三、共享充电柜系统功能介绍 四、共享...
伪类选择器案例实践：新闻导航案例
YY的博客
08-29 311
伪类选择器案例实践：新闻导航案例
bootstrap自定义样式-bootstrap侧边导航栏的实现
热门推荐
dotNet全栈开发
07-25 19万+
1. 侧滑栏使用定位fixed 2. 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配 3. 侧滑栏的侧滑效果不使用jquery方法来实现，使用的是css3 transforms属性进行div的移动，侧滑的动画效果使用的是css属性transition
Bootstrap案列:首页界面
zyz博客
02-07 1323
在自学Bootstrap之后我开始完成一个旅游网项目的首页界面，本博文主要演示实现的具体过程。 首先导入BootStra的环境 <!--引入本地的bootstrap——css--> <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <sc...
jquery 动态生成导航栏
weixin_44468853的博客
08-23 934
在使用jquery开发网页的时候，做不到像vue一样引入组件，但是我们的导航栏，还是不能每个页面都写的。要不然当需要修改小部分内容的时候，还得需要一个个文件去改，这样的代码也太不好维护了。所以我们需要使用js来生成导航栏。这里写的比较简单，入门级的，提供大致思路，可以根据你们的使用场景来进行修改。
使用html和css的一些案列（小米官网）
shzbbsns的博客
07-24 793
这些就是仅用html和css所做的一些案例，对空间的布局，对元素的理解.....
uniapp技术应用，以及案列讲解
qinjinhua_的博客
08-01 3667
uniapp项目实现小程序+android多端运行以及打包发布流程
Flex布局 - 仿携程网移动端首页案列练习
JHY97的博客
01-10 1365
一、搭建相关文件结构 1.1 文件结构 创建相关存储文件夹以及搭建index.html文件结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de.
html5访问历史记录案列
秦爱德
10-23 3617
今天我们来讲一下html5如何“伪造”浏览器的访问记录。实现无刷新改变浏览器url地址！ 前进and后退，我不停歇！（李时珍的皮） 假设有这样一个场景：一个页面用来显示一系列服装列表，为了分为别类！我们需要一个分类导航，每当我们点击导航链接的时候，通过ajax加载具体服饰列表内容，而其它页面部分不需要要变化。传统的做法是给每个导航链接绑定事件，然后通过ajax请求，获取内容并显示。那么问题来了！
Socket案列
10-12
Socket案列（C#）：包含客户端、服务端代码。简单可用
JSP案列JSP
02-14
JSP案列，里面有许多经典的案列，相信在你学完之后对你的能力有很大的提升。
simplis案列
02-21
simplis案列，学习simplis的好帮手
LABVIEW 8.2案列
12-05
labview 列子可以方便学习labview
C++程序案列精编
08-04
里面包括了各个内同，文档，一级源代码，适合大家学习
《深度学习入门：基于Python的理论与实现》案例实现.zip
05-09
《深度学习入门：基于Python的理论与实现》案例实现.zip
node-v6.14.0-sunos-x86.tar.xz
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v6.15.1-linux-arm64.tar.xz
最新发布
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v6.10.3-linux-s390x.tar.xz
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
pytorch 案列
10-13
这里提供一个使用 PyTorch 实现的图像分类案例，以 MNIST 数据集为例： 1. 导入必要的库和数据集 ```python import torch import torch.nn as nn import torch.optim as optim import torchvision.datasets as ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值