怎样设计重叠效果的菜单

DIV+CSS 21NN 1年前 (2018-05-24) 60次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]
当前位置 :| 建站学>网页设计>css设计教程> 怎样设计重叠效果的菜单

 建站教程导航

网站策划
  • 建站理念与思路
  • 确定网站主题
  • 网站内容规划
  • 网站标题,关键词和描述
  • 网站的风格和创意
  • 建站心得与技术巧门
  • 用户体验
建站基础
  • 网站域名
  • 网站空间
  • 提交网站备案
  • FTP工具下载与使用
网页设计与设计
  • 色彩原理与网页配色
  • 网页设计
     · fireworks(教程);
     · photoshop(教程)
     · flash(教程)
     · 素材(下载)
  • 网页设计
     · Dreamvever(教程)
     · HTML(教程)
     · XHTML(教程)
     · DIV+CSS(教程)
  • 网页特效
网站功能开发
  • 开源系统建站
     · 源码
     · 模板
     · 教程
  • WEB常用编程语言
     · ASP(交流)
     · PHP(教程)
     · asp.net
     · JSP
     · XML/XSLT
     · javascript(教程)
     · Ajax(教程)
     · jQuery教程
  • WEB常用数据库
     · 数据库综合
     · MSSQL SERVER
     · MYSQL
     · oracle
网站维护与内容建设
  • 网站内容编辑
  • 网站内容采集
  • 服务器管理
     · Web服务
     · Windows 教程
     · Linux教程
     · 集群、安全与缓存
网站推广与运营
  • SEM
  • SEO搜索引擎优化 交流>>
  • 网站综合推广
  • 网站数据统计与分析
  • 网站运营策略与技术巧门
网站赚钱
  • 网站赢利模式
  • 网络广告联盟
  • 淘宝客赚钱
  • Google adsense赚钱

怎样设计重叠效果的菜单

时间:2011-04-17
相关文章:
  • HTML代码技术巧门:HTML注释表达式判断IE版本
  • CSS网页设计技术巧门:图片的自适应居中和兼容处
  • css3设计网页实例:点击切换不同的CSS列表
  • css-sprite适用的条件:对css-sprite的理解
  • CSS3实例资源收集:11个CSS3开发实用工具
  • 从四个方面谈谈Web标准的价值所在
  • 控制网页文件大小通过精简CSS实现
  • css的语法
  • 怎样插入CSS样式表
  • 什么是css
  • 我们来学习一下怎样用CSS设计重叠效果的菜单,首先我们要知道什么是重叠菜单?大家看图一就明白了,重叠菜单就是在设计图中一个盖在另一个上面的菜单效果。

    怎样设计重叠效果的菜单

    当然这个菜单的效果全要靠背景图体现出来,设计难点就在重叠部分背景和第一个菜单背景的运用,除此之外还有当前状态的背景运用。

    下面我以图一中的黑底菜单为例讲解一下重叠菜单的设计办法。

    首先,将菜单所用的背景图全部裁切出来,背景图分为三张,图二中A为第一个菜单的背景,B为当前状态的背景,C为普通菜单的背景。这三个背景都是缺一不可的,下面再讲怎么应用。

    其次,写出菜单的Html代码:

    菜单的代码十分简单,用header为背景,menu作为菜单的容器,菜单项用项目列表ul和li列出即可。真正的背景效果体现在CSS中。

    以下为CSS代码:

    在CSS中,首先定义所有菜单项的背景,使用背景c.gif,并使每个菜单项向左偏移6像素产生重叠效果。然后让第一菜单项的背景为a.gif,让当前状态的背景为b.gif,并使当前状态的Z轴置于其它普通菜单项上面。

    这样,一个简单的重叠菜单就设计好了,您也可以按照这个办法设计其它背景的菜单

    推荐教程:
  • DIV+CSS总结:有用的3个网页设计技术巧门
  • 详解CSS中background(背景)属性的语法
  • 用CSS美化input file按钮的办法
  • 【DIV+CSS入门教程】DIV+CSS的叫法是不准确
  • 一步步教你实现纯CSS的柱形图
  • CSS常见问题及小技术巧门汇总
  • CSS3入门教程(4):关于阴影
  • 9个精简优化CSS文件的技术巧门
  • CSS3 RGBA颜色类型不等于RGB与opacity相加
  • 发现css中出现的bug以及修复办法教程
  • 最新评论:

    怎样设计重叠效果的菜单 评论加载中….
    发表评论:
    评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
    用户名: 验证码:

    返回页首

    建站论坛热门话题


    本文:怎样设计重叠效果的菜单 本文链接:https://www.21nn.cn/biancheng/divcss/16754.html 本站所以图片、文章仅限用于学习和研究目的; 不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关。 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如有侵权请邮件与我们联系处理。i@ki4.cn
    喜欢 (0)
    [1353713598@qq.com]
    分享 (0)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址