css案例学习之div a实现立体菜单
效果
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>立体菜单</title>
<style> #menu { /*对menu层设置*/
font-family:Arial; /*字体*/
font-size:14px; /*字号*/
} #menu a, #menu a:visited {
text-decoration:none; /*文字无下划线*/
text-align:center; /*文字水平居中对齐*/
color:#fff; /*白色文字*/
display:block; /*设置为块级元素*/
width:10em; /*宽度*/
padding:.25em; /*内边距*/
margin:.5em auto; /*菜单项之间间隔0.5em,并水平居中*/
background-color:#8ab; /*背景色*/
border:2px solid #fff; /*边框粗细2像素*/
border-color:#def # # #cde; /*边框颜色显示突起效果,关键就是边框给人的错觉*/
position:relative; /*使用相对定位*/
} #menu a:hover {
top:2px; /*向下移动2像素*/
left:2px; /*向右移动2像素*/
border-color:# #cde #def #; /*边框颜色显示突起效果*/
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head> <body>
<div id="menu">
<a href="#"> Home</a>
<a href="#"> Contact Us</a>
<a href="#"> Web Dev</a>
<a href="#"> Web Design</a>
<a href="#"> Map</a>
</div>
</body>
</html>
css案例学习之div a实现立体菜单的更多相关文章
- css案例学习之div与span的区别
代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...
- css案例学习之div+a实现菜单
效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- css案例学习之div ul li a 实现导航效果
效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- CSS 案例学习
1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- css案例学习之float浮动
代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- css案例学习之父子块的margin
两边还会有些距离,这是body默认的. 代码: <head> <title>父子块的margin</title> <style type="text ...
随机推荐
- elasticsearh 中每个节点中需要有相同的插件
elasticsearh 中每个节点中需要有相同的插件 [2016-09-13 19:25:24,049][INFO ][discovery.zen ] [node02] failed to send ...
- UVALive 6190 Beautiful Spacing (2012 Tokyo regional)
Beautiful Spacing 题意是给一个文本排版,求在满足题目所给要求的条件下,最长连续空格最小是多少. trick: 贪心地模拟是错的,至少无法证明正确性. 正解应该是二分答案+验证. 比较 ...
- linux group
groups 查看当前登录用户的组内成员 groups gliethttp 查看gliethttp用户所在的组,以及组内成员 whoami 查看当前登录用户名 /etc/group文件包含所有组 ...
- python小记列表排序
a=[('b',4),('a',7),('c',2)] 正向排序a.sort() 反向排序:a.sort(reverse=True) 对第二关键字排序 a.sort(lambda x,y:cmp(x[ ...
- 编码规范(CSS)
code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px ...
- Android开发之去掉标题栏的三种方法,推荐第三种
Android:去掉标题栏的三种方法和全屏的三种方法 第一种:一般入门的时候常常使用的一种方法 onCreate函数中增加下面代码: requestWindowFeature(Window.FEATU ...
- [HeadFirst-HTMLCSS入门][第九章盒模式]
新属性 line-height 行间距 line-height: 1.6em; border 边框 属性值 solid 实线 double 双实线 groove 一个槽 outset 外凸 inset ...
- html_day4+css
表单控件共有的属性: enabled:表示表单控件可用 disabled:表示表单控件被禁用 readonly:表示表单控件只能读name属性值的作用: 需要将表单的数据提交到服务器处理就要写name ...
- SOLR使用手册之操作collection
一.Collections API 参考:https://cwiki.apache.org/confluence/display/solr/Collections+API 因为API比较多,我就不一 ...
- Java学习——接口Interface
接口: 初期理解可以认为是一个特殊的抽象类 当抽象类中的方法都是抽象的,那么该类可以通过接口的形式来表示.class用于定义类interface 用于定义接口 接口定义时,格式特点:1,接口中常量见定 ...