css案例学习之通过relative与absolute实现带说明信息的菜单
效果如下
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> #menu { /*对menu层设置*/
font-family:Arial; /*字体*/
font-size:16px; /*字号*/
width:140px; /*宽度*/
margin:; /*菜单项之间间隔0.5em,并水平居中*/
border:solid 1px #ccc; /*灰色细边框*/
} #menu a, #menu a:visited {
text-decoration:none; /*文字无下划线*/
text-align:center; /*文字水平居中对齐*/
color:#c00; /*红色文字*/
display:block; /*设置为块级元素*/
padding:4px; /*内边距*/
background-color:#fff; /*背景色*/
border:solid 1px #fff; /*与背景色相同边框,防止跳动*/
position:relative; /*使用相对定位,只有a使用了relative,子元素的absolute才会有效*/
width:130px;
} #menu a span { /*先把说明的span隐藏*/
display:none;
}
#menu a:hover {
border-color:#c00; /*边框颜色红色*/
} #menu a:hover span {
display:block; /*设置为块级元素*/
position:absolute; /*使用绝对定位*/
height:; /*高度为0*/
width:; /*宽度为0*/
overflow:hidden; /*防止溢出*/
border:solid 8px #fff; /*设置默认的边框样式*/
top:4px; /*竖直方向的定位*/
} #menu a:hover span.left {
border-left-color:#c00;
left:8px;
} #menu a:hover span.right {
border-right-color:#c00;
right:8px;
} #menu a:hover span.intro {
font-size:12px;
display:block; /*span是inline元素,必须设置成block元素*/
position:absolute; /*绝对定位*/
left:150px;
top:0px;
padding:5px;
width:100px;
height:auto; /*高度设为auto很重要,保证内容能够完整的灵活的显示出来*/
background-color:#eee;
color:#;
border:1px dashed #;
} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>带说明信息的菜单</title></head> <body>
<div id="menu">
<a href="#">
<span class="left"></span>
Home
<span class="right"></span>
<span class="intro">这里说明Home菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Contact Us
<span class="right"></span>
<span class="intro">这里说明Contact Us菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Web Dev
<span class="right"></span>
<span class="intro">这里说明Web Dev菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Web Design
<span class="right"></span>
<span class="intro">这里说明Web Design菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Map
<span class="right"></span>
<span class="intro">这里说明Map菜单项</span>
</a>
</div>
</body>
</html>
css案例学习之通过relative与absolute实现带说明信息的菜单的更多相关文章
- css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之span边框实现的特殊效果
bottom left bottom right top left top right 配合颜色来使用,实现一些神奇的效果 #menu a span{ height:; width:; /*borde ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
- 一张图看懂css的position里的relative和absolute的区别
position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...
- CSS 案例学习
1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...
- CSS的position属性:relative和absolute
relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
随机推荐
- sql server 2008 在与 SQL Server 提示建立连接时出现与网络相关的或特定于实例的错误
原文地址:http://zhidao.baidu.com/link?url=Ndav32DO9zL5XnltqoqlhvKHbJv_n3Zwihhw4cwF9ffNq8hb8z7h7n3vJVfoeW ...
- Binary Search Tree DFS Template
Two methods: 1. Traverse 2. Divide & Conquer // Traverse: usually do not have return value publi ...
- linux 虚拟机设置IP访问外网
1 设置网络为桥接模式:(Vmware为例,安装过程中也可以设置) 选中当前的操作系统,点击虚拟机-->设置-->硬件-->网络设备器,勾选桥接模式 2 修改网络配置在命令行界面输入 ...
- python之路-模块 WebDriver API
相关文档: http://selenium-python.readthedocs.org/en/latest/api.html#selenium.common.exceptions.InvalidEl ...
- robots.txt网站爬虫文件设置
目录: 什么是robots.txt robots.txt使用误区 robots.txt使用技巧 什么是robots.txt? robots.txt是搜索引擎中访问网站的时候要查看的第一个文件.Robo ...
- [置顶] 正则表达式应用:匹配IP地址
都知道iP地址有四个数值,三个点号组成.三个数值的具体范围为0到255,为了使用正则表达式匹配就必须分析IP地址的组成 1先分析数值,2再组合数值和点号 1先分析数值 IP地址的数字范围从0到255, ...
- Android应用程序注冊广播接收器(registerReceiver)的过程分析
前面我们介绍了Android系统的广播机制,从本质来说,它是一种消息订阅/公布机制,因此,使用这样的消息驱动模型的第一步便是订阅消息:而对Android应用程序来说,订阅消息事实上就是注冊广播接收器, ...
- ArrayList的分析(转)
一. ArrayList概述: ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存. ArrayList不是线程安全的,只能用在单线程环境 ...
- [Python学习笔记][第五章Python函数设计与使用]
2016/1/29学习内容 第四章 Python函数设计与使用 之前的几页忘记保存了 很伤心 变量作用域 -一个变量已在函数外定义,如果在函数内需要修改这个变量的值,并将这个赋值结果反映到函数之外,可 ...
- 前端--关于javascript对象
在javascript中对象是一种基本的数据类型,在数据结构上是一种散列表,可以看作是属性的无序集合,除了原始值其他一切都是对象.它可以用来表示现实世界中或者我们大脑中抽象出来的客体,这和其他面向对象 ...