首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

复古式的立体CSS菜单实例

作者：爱是种承诺ml | 来源：互联网 | 2023-09-18 13:32
CSS菜单的制作在CSS网页布局中一直是重头戏，用CSS制作菜单重要的是语义，结构简单，形式更加的灵活。今天的这一款菜单仅是作为小品来展示，其编码并不可取，我们通这个实例可以

CSS菜单的制作在CSS网页布局中一直是重头戏，用CSS制作菜单重要的是语义，结构简单，形式更加的灵活。
　　今天的这一款菜单仅是作为小品来展示，其编码并不可取，我们通这个实例可以看到CSS功能的强大与形式的灵活，在具体的工作中不可以用此案例进行应用。因为其代码太冗余了。
　　更多的CSS菜单制作知识，您可以参考大量的教程与实例，相信你一定会有更多的收获。
　　关于CSS菜单的网址：
　　http://www.52css.com/search.asp?SearchCOntent=%E8%8F%9C%E5%8D%95
　　关于CSS导航的网址：
　　http://www.52css.com/search.asp?SearchCOntent=%E5%AF%BC%E8%88%AA
　　这款复古式的立体CSS菜单实例具有典型的90年代风&＃26684;。整个菜单的实现不应用一张图片，全部通过CSS进行控制。重申，本实例仅是作为小品来展示，其编码并不可取，我们通这个实例可以看到CSS功能的强大与形式的灵活。看最终的效果如下图所示。
bubuko.com,布布扣

我们来看HTML编码：

bubuko.com,布布扣 Example Source Code



我们再看CSS编码：

bubuko.com,布布扣 Example Source Code

#menu {
    display:block;
    position:relative;
    background:#edebdc;
    width:112px;
    padding:25px;
    border:1px solid #000;
    margin:0 auto;
}
.white {
    position:absolute;
    width:100px;
    height:20px;
    color:#fff;
    background:#fff;
    border-top:1px solid #ffdc56;
    border-right:1px solid #957704;
    border-bottom:1px solid #937603;
    border-left:1px solid #ffdc56;
    overflow:hidden;
    text-align:center;
}
.blackc {
    position:absolute;
    top:0;
    left:0;
    width:98px;
    height:18px;
    color:#000;
    font-family:verdana;
    font-size:11px;
    font-weight:bold;
    overflow:hidden;
    border-top:1px solid #ffd42e;
    border-right:1px solid #caa205;
    border-bottom:1px solid #c9a105;
    border-left:1px solid #ffd42e;
    overflow:hidden;
    text-align:center;
    line-height:15px;
    background:#fc0;
}
.black {
    position:relative;
    top:0;
    left:0;
    width:102px;
    height:22px;
    border:1px solid #000;
}
.cona {
    position:relative;
    top:0;
    left:0;
    width:105px;
    height:25px;
    border-top:1px solid #d5d3ca;
    border-left:1px solid #d5d3ca;
    background:#f7f6ef;
}
.conb {
    position:relative;
    top:0;
    left:0;
    width:107px;
    height:27px;
    border-top:1px solid #b8b7af;
    border-left:1px solid #b8b7af;
    background:#f7f6ef;
}
.conc {
    position:relative;
    top:0;
    left:0;
    width:109px;
    height:29px;
    border-top:1px solid #9c9b95;
    border-left:1px solid #9c9b95;
    background:#f7f6ef;
}
.cond {
    position:relative;
    top:0;
    left:0;
    width:111px;
    height:31px;
    border-top:1px solid #d5d3ca;
    border-left:1px solid #d5dc3a;
    background:#fff;
    margin-top:2px;
}
#menu a.switch:visited {
    text-decoration:none;
}
#menu a.switch {
    color:#c00;
    text-decoration:none;
    position:absolute;
}
#menu a.switch:hover {
    color:#c00;
    background:#edebdc;
    cursor:pointer;
}
#menu a.switch:hover .white {
    position:absolute;
    width:100px;
    height:20px;
    color:#fff;
    background:#fff;
    border-bottom:1px solid #ffdc56;
    border-left:1px solid #957704;
    border-top:1px solid #937603;
    border-right:1px solid #ffdc56;
    overflow:hidden;
    text-align:center;
}
#menu a.switch:hover .blackc {
    position:absolute;
    top:0;
    left:0;
    width:98px;
    height:18px;
    color:#000;
    font-size:11px;
    font-weight:bold;
    overflow:hidden;
    border-bottom:1px solid #ffd42e;
    border-left:1px solid #caa205;
    border-top:1px solid #c9a105;
    border-right:1px solid #ffd42e;
    overflow:hidden;
    text-align:center;
    line-height:17px;
    background:#eb0;
}


▲▲▲　>>>点击这里查看最终效果<<<
　　
　　

复古式的立体CSS菜单实例,布布扣,bubuko.com


推荐阅读
  • main

    C++ 中的 malloc 函数详解

    malloc 是 C 语言中的一个标准库函数，全称为 memory allocation，即动态内存分配。它用于在程序运行时申请一块指定大小的连续内存区域，并返回该区域的起始地址。当无法预先确定内存的具体位置时，可以通过 malloc 动态分配内存。 ... [详细]
  • byte

    Linux常用命令解析：ipcs与ipcrm

    本文详细介绍了Linux系统中用于管理IPC（Inter-Process Communication）资源的两个重要命令：ipcs和ipcrm。通过这些命令，用户可以查看和删除系统中的消息队列、共享内存和信号量。 ... [详细]
  • byte

    NX二次开发：UFUN点收集器UF_UI_select_point_collection详解

    NX二次开发：UFUN点收集器UF_UI_select_point_collection详解
    本文介绍了如何在NX中使用UFUN库进行点收集器的二次开发，包括必要的头文件包含、初始化和选择点集合的具体实现。 ... [详细]
  • merge

    ASP.NET 中操作 Excel 的常见方法和属性

    本文介绍了如何在 ASP.NET 中设置 Excel 单元格格式为文本，获取多个单元格区域并作为表头，以及进行单元格合并、赋值、格式设置等操作。 ... [详细]
  • merge

    LDAP服务器配置与管理

    LDAP服务器配置与管理
    本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息，并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器，确保用户账户信息的集中管理和安全访问。 ... [详细]
  • java

    Java代码分层详解及其应用场景

    本文详细介绍了Java代码分层的基本概念和常见分层模式，特别是MVC模式。同时探讨了不同项目需求下的分层策略，帮助读者更好地理解和应用Java分层思想。 ... [详细]
  • instance

    SoundPool

    如果应用程序经常播放密集、急促而又短暂的音效（如游戏音效）那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点：1)延时时间较长，且资源占用率高 ... [详细]
  • instance

    网络爬虫的规范与限制

    网络爬虫的规范与限制
    本文探讨了网络爬虫引发的问题及其解决方案，重点介绍了Robots协议的作用和使用方法，旨在为网络爬虫的合理使用提供指导。 ... [详细]
  • instance

    A*算法在AI路径规划中的应用

    A*算法在AI路径规划中的应用
    路径规划算法用于在地图上找到从起点到终点的最佳路径，特别是在存在障碍物的情况下。A*算法是一种高效且广泛使用的路径规划算法，适用于静态和动态环境。 ... [详细]
  • instance

    解决SQL Server数据库sa登录名无法连接的问题

    解决SQL Server数据库sa登录名无法连接的问题
    在安装SQL Server数据库后，使用Windows身份验证成功，但使用SQL Server身份验证时遇到问题。本文将介绍如何通过设置sa登录名的密码、启用登录名状态以及开启TCP协议来解决这一问题。 ... [详细]
  • instance

    MySQL 数据库连接方法

    MySQL 数据库连接方法
    本文介绍了如何使用 MySQL 命令行工具连接到指定的数据库。 ... [详细]
  • instance

    如何解决8080端口被占用问题

    如何解决8080端口被占用问题
    本文介绍了如何通过命令行和任务管理器查找并终止占用8080端口的进程，以确保该端口能够正常使用。 ... [详细]
  • instance

    AngularJS $compile 详解

    本文介绍了 AngularJS 中的 $compile 服务及其用法，通过示例代码展示了如何使用 $compile 动态编译和链接 HTML 元素。 ... [详细]
  • const

    [c++基础]STL

    [c++基础]STL
    cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]
  • const

    ZooKeeper 入门指南

    ZooKeeper 入门指南
    本文将详细介绍ZooKeeper的工作机制、特点、数据结构以及常见的应用场景，包括统一命名服务、统一配置管理、统一集群管理、服务器动态上下线和软负载均衡。 ... [详细]
author-avatar
爱是种承诺ml
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有