一个网页菜单的CSS代码分析

最新推荐文章于 2021-08-03 21:47:51 发布
最新推荐文章于 2021-08-03 21:47:51 发布
阅读量742 收藏
点赞数
分类专栏： 原创教程 .Net 文章标签： css css选择器 网页菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bcbobo21cn/article/details/49679789
版权
.Net 同时被 2 个专栏收录
383 篇文章 14 订阅
订阅专栏
原创教程
190 篇文章 6 订阅
订阅专栏

一个绿色网页菜单，效果如下，网上可下载到该资源；



下面研究其css代码；这是一个比较复杂的菜单；可学到很多东西；

/* menu::base */
div#menu {
    height: 46px;
    padding-left: 10px;
    background: url(images/left.png) no-repeat;
    _background-image: url(images/left.gif);
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 10px;
    background: url(images/right.png) no-repeat right 0;
    _background-image: url(images/right.gif);
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0 0 0 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 36px;
    left: 0;
    visibility: hidden;
    width: 187px;
    padding: 0 0 11px 7px;
    background: url(images/submenu-bottom.png) no-repeat 7px bottom;
    _background-image: url(images/submenu-bottom.gif);
    margin: 0px 0 0 -4px;
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right: 5px;
    text-align: center;
}
div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 30px 0 0;
    line-height: 40px;
    height: 46px;
    margin-right: 5px;
    _margin-right: 1px;
    background: none;
}
div#menu span {
    margin-top: 2px;
    padding-left: 30px;
    color: #fff;
    font: bold 11px Trebuchet MS,Arial,san-serif;
    background: none;
    line-height: 40px;
}
div#menu a:hover,
div#menu a.over {
    background:  url(images/selected-right-sub.png)  no-repeat right -1px;
    _background-image: url(images/selected-right-sub.gif);
}
div#menu a:hover span,
div#menu a.over span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(images/selected-left-sub.gif);
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background: url(images/selected-right-sub.png) no-repeat right -1px;
    _background-image: url(images/selected-right-sub.gif);
}
div#menu li.current a span,
div#menu ul.menu>li:hover>a span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(images/selected-left-sub.gif);
}
div#menu ul.menu>li:hover>a span {
    color: #3d4e29;
}
div#menu li {  }
div#menu li.last { background: none; }

div#menu li.current a,
div#menu li.current a span,
div#menu.js-active a:hover,
div#menu.js-active a:hover span,
div#menu.js-active a,
div#menu.js-active span {
    background:none;
}
div#menu.js-active ul.menu>li:hover>a,
div#menu.js-active ul.menu>li:hover>a span {
    background:none;
}
div#menu li.current a.over {
    background: url(images/selected-right-sub.png)  no-repeat right -1px;
    _background-image: url(images/selected-right-sub.gif);
}
div#menu li.current a.over span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(images/selected-left-sub.gif);
}
div#menu a.over span {
    color: #3d4e29;
}

/* menu::level2 */
div#menu ul ul li {
    background: none;
    padding: 0;
}
div#menu ul ul {
    padding-top: 10px;
}
div#menu ul ul a {
    padding: 0;
    height: auto;
    float: none;
    display: block;
    line-height: 26px;
    font-size: 11px;
    color: #d8ebc5;
    z-index: -1;
    padding-left: 5px;
    white-space: normal;
    width: 160px;
    margin: 0 5px;
    text-transform: none;
}
    
div#menu ul ul a span {
    padding: 0 15px;
    line-height: 26px;
    font-size: 11px;
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background:none;
}
div#menu ul ul a:hover {
    background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a:hover span {
    background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent {
    background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom;
}
div#menu ul ul a.parent span {
    background: url(images/submenu-pointer-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent:hover {
    background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a.parent:hover span {
    background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul span {
    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul div {
    width: 180px;
    padding: 15px 0px 8px 0px;
    margin: -44px 0 0 169px !important;
    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
    _background-image: url(images/subsubmenu-top.gif);
}
*+html div#menu ul ul div { height:10px }
*+html div#menu.ie7 ul ul div { height:auto }
div#menu ul ul ul {
    padding: 0 4px 5px 1px;
    background: url(images/submenu-bottom.png) no-repeat 0px bottom;
    _background-image: url(images/submenu-bottom.gif);
}
div#menu ul ul div li {
    position:relative;
    top:-5px;
}

/* lava lamp */
div#menu li.back {
    background: url(images/lavalamp-left.png) no-repeat 0 0;
    _background-image: url(images/lavalamp-left.gif);
    width: 10px;
    height: 46px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0;
}

div#menu li.back .left {
    padding:0;
    width:auto;
    background: url(images/lavalamp-right.png) no-repeat right 0;
    _background-image: url(images/lavalamp-right.gif);
    height: 46px;
    margin: 0 5px 0 10px;
    _margin-right: 2px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}

定义id为menu的div的样式
定义id为menu的div中的ul的样式
定义id为menu的div中的，使用“menu”为css类的ul的样式
定义id为menu的div中的li的样式
定义id为menu的div中的ul中的ul中的li的样式
定义id为menu的div中的li中的div的样式
定义id为menu的div中的li当鼠标悬停时li下的div的样式
定义id为menu的div中的a的样式
定义id为menu的div中的span的样式
定义id为menu的div中的a的样式
定义id为menu的div中的span的样式
定义id为menu的div中的a当鼠标悬停时的样式, a下的over css类的样式
定义id为menu的div中的a当鼠标悬停时 中的span的样式，a下的over css类中的span的样式
定义id为menu的div中的li下的current css类中的a的样式，
定义id为menu的div中的ul下的menu css类下的li，li当鼠标悬停时下的a的样式
定义id为menu的div中的li下的current css类 中的a中的span的样式
定义id为menu的div中的ul下的menu css类下的li当鼠标悬停时下的a中的span的样式


定义id为menu的div中的ul下的menu css类下的li当鼠标悬停时下的a中的span的样式
定义id为menu的div中的li的样式
定义id为menu的div中的li下的last css类的样式


定义id为menu的div中的li下的current css类中的a,
定义id为menu的div中的li下的current css类中的a中的span,
定义id为menu的div下的js-active css类中的a当鼠标悬停时，
定义id为menu的div下的js-active css类中的a当鼠标悬停时中的span，
定义id为menu的div下的js-active css类中的a,
定义id为menu的div下的js-active css类中的a中的span的样式；


定义id为menu的div下的js-active css类中的ul下li鼠标悬停时下的a,
定义id为menu的div下的js-active css类中的ul下li鼠标悬停时下的a中的span的样式


定义id为menu的div下的li下的current css类中的a下的over类的样式
定义id为menu的div下的li下的current css类中的a下的over类的中的span的样式
定义id为menu的div中的a下的over类中的span的样式


/* menu::level2 */
定义id为menu的div中的ul中的ul中的li的样式
定义id为menu的div中的ul中的ul的样式
定义id为menu的div中的ul中的ul的a的样式
定义id为menu的div中的ul中的ul的a中的span的样式
定义id为menu的div中的li下的current类中的ul中的a,
定义id为menu的div中的li下的current类中的ul中的a中的span的样式
...
...
定义a中的parent类
...
...
...
...
ul中的ul中的li下的last类


/* menu::level3 */


/* lava lamp */
定义id为menu的div中的li中的back类
定义id为menu的div中的li下的back类 中的left类


使用了甚多的css选择器和伪类等；


bcbobo21cn
关注
专栏目录
网页设计css分析,基于CSS技术的网页制作实例分析
weixin_32251525的博客
08-03 1552
21世纪我国科学技术水平大幅提高，计算机网络技术成为了推动各行各业事业发展的助推器，可以利用计算机网络快速发布和获取信息，同样在人们的政治生活、经济生活等多个方面发挥着无可比拟的作用。网页设计与计算机网络技术同步发展，也是应用计算机上网的主要依托。而当前计算机网络的受众群体不断壮大，人们依赖对计算机网络的使用使得网页设计的重要性更为突出。因此，做好网页设计是利民的事业，而仅以对CSS技术在网页设计...
CSS网页菜单
QDY5945的博客
10-17 114
1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" 2 Inherit...
css 常用代码解析
weixin_34279579的博客
08-29 74
.cBan_1 .e2-pro li a{ display: block; -webkit-transition: all 0.3s linear;transition: all 0.3s linear;} .cBan_1 .e2-pro li a:hover{box-shadow: rgba(0, 0, 0, 0.7) 0 0 8px;-webkit-transform: translateY(...
web菜单代码
lmhine的专栏
06-18 2296
.level_0{font-size:14px;background-color:#000080;color:#FFFFFF;}.level_1{font-size:12px;background-color:#008080;color:#FFFFFF;}.level_2{font-size:11px;background-color:#808080;color:#FFFFFF;}// 定义菜单数
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码 学生个人html静态网页制作成品代码
08-10
以上CSS代码定义了网页的基本样式，包括字体、颜色、间距等。通过使用CSS选择器，可以轻松地控制各个元素的样式，使得页面看起来更加美观。 ### 四、总结 此网页设计案例是一个非常优秀的教学资源，不仅可以帮助...
制作一个简单HTML电影网页设计（HTML+CSS）
08-10
通过以上分析，我们了解到如何构建一个基本的HTML电影网页设计，包括HTML文档结构、CSS样式设置、前端布局技术、导航栏效果、JavaScript的应用以及多媒体元素的使用。此外，还提到了常用的HTML编辑器，这对于初学者...
用HTML+CSS做一个漂亮简单的节日网页【元宵节】
08-10
- **案例**: 以元宵节为例，设计一个包含节日介绍、习俗庆祝等内容的网页。该网页需要有清晰的导航结构，丰富的视觉元素以及良好的交互体验。 - **技术要点**: 在设计过程中需要注意HTML5的语义化标签使用、CSS3的新...
JS+CSS实现自动切换的网页滑动门菜单效果代码
10-23
实例代码中包含了一个`<ul>`标签内的`<li>`元素，这些`<li>`元素代表不同的菜单项。每个菜单项都有相应的`<span>`标签显示菜单文本。通过JavaScript定时器，我们可以周期性地改变这些`<li>`元素的类，从而触发CSS...
网页设计css分析,网页设计之CSS中常见的六大问题解析
weixin_30293523的博客
08-03 557
网站设计中CSS是一种被称为层叠样式表的编程开发语言，主要是有来表现HTML和XML等文件样式的计算机语言。CSS的功能很强大，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。此外，CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。在进行企业网站设计过程中很多设计师都会使用到CSS，但是有时候因为各种原因...
CSS解析源代码
08-21
解析网页中CSS代码
js+html实现网页底部菜单栏
06-06
利用js和html做的一个简单底部菜单栏
经典网页菜单(源代码)
11-30
经典网页菜单源代码，图片显示！ 用css加div实现！
html菜单栏
03-26
html菜单栏可以指定那个页面被选中
食谱网站源代码，食谱管理系统两个版本
11-08
食谱网站源代码，食谱管理系统两个版本，包括重写地址版本和不重写地址版本
纯手工制作一个网页 -- html css结构分析
徐亦快的踩坑记录
05-22 497
文章目录headerlogin-bannersearchcontentmainhot-recruithot-companyhot-linksfootercopyrightbacktop header login-banner search content 先写html main 先来看看main区域 由两部分组成，左边的aside和右边的banner。其中aside的li里面有个hover效果，会出来一个dl。banner里有一个ul放很多li图片，一个div放左右btn，一个ol放很多小圆点
【HTML+CSS】5.简单代码分析
M&Q的博客
04-15 589
通过之前的内容学习了HTML和CSS基础知识之后，我们就可以上手写一些”徒有其表“的网页了~在这个过程中，我们可以参考别人的网页设计和代码，多多学习总结。 下面是一个登陆界面的代码，来自黑子Kuroko，网页制作：一个简易美观的登录界面。我把其中的HTML和CSS代码写了比较详细的注释，感受一下效果。 HTML部分： CSS部分： /*主体部分*/ body { back...
网页状态栏图标html代码,利用CSS实现几款不错的菜单栏实例代码
weixin_42533120的博客
05-30 1471
前言其实前端那些事蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！一、滑动菜单1、代码：纯CSS3垂直菜单 菜单项滑动动画DEMO演示body {background-color:#282828;}.demo {margin: ...
HTML期末作业-美食网站
学生期末作业
06-16 7130
美食网站HTML+CSS+JavaScript 部分代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=".
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值