css案例学习之span边框实现的特殊效果
bottom left
bottom right
top left
top right
配合颜色来使用，实现一些神奇的效果
#menu a span{
height:;
width:;
/*border-top:solid 6px #fff;
border-left:solid 6px #f90;*/
/*border-top:solid 6px #fff;
border-right:solid 6px #f90;*/
/*border-bottom:solid 6px #fff;
border-left:solid 6px #f90;*/
border-bottom:solid 6px #fff;
border-right:solid 6px #f90;
position:absolute;
top:;
left:;
overflow:hidden;
}
<div id="menu">
<a href="#">
<span class="left"></span>
Home </a>
<a href="#">
<span class="left"></span>
Contact Us </a>
<a href="#">
<span class="left"></span>
Web Dev </a>
<a href="#">
<span class="left"></span>
Web Design </a>
<a href="#">
<span class="left"></span>
Map </a>
</div>
说明：当span的height、width设置为0的时候，配合border的样式，就能实现神奇的边框效果
完整代码如下
<!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> <style>
#menu {
font-family:Arial;
font-size:14px;
} #menu a, #menu a:visited {
display:block;
float:left;
position:relative;
background-color:#c00;
color:#fff;
text-decoration:none;
padding:6px;
margin:1px 1px;
} #menu a span{
height:;
width:;
border-bottom:solid 6px #c00;
border-left:solid 6px #fff;
position:absolute;
top:;
left:;
overflow:hidden;
} #menu a:hover{
background-color: #F90;
color:#
} #menu a:hover span{
border-bottom:solid 6px #f90;
} </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 </a>
<a href="#">
<span class="left"></span>
Contact Us </a>
<a href="#">
<span class="left"></span>
Web Dev </a>
<a href="#">
<span class="left"></span>
Web Design </a>
<a href="#">
<span class="left"></span>
Map </a>
</div>
</body>
</html>
实现了一种被裁减的感觉
css案例学习之span边框实现的特殊效果的更多相关文章
- css案例学习之div与span的区别
代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- css案例学习之通过relative与absolute实现带说明信息的菜单
效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- css案例学习之按钮超链接
效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...
- css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
- CSS 案例学习
1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
随机推荐
- Java内存回收(垃圾回收)机制总结
一.背景: Java程序员编写程序时,对于新建的对象,当不再需要此对象时,不必去释放这个对象所占用的空间,这个工作是由Java虚拟机自己完成的 ,即内存回收或垃圾回收. 二.如何知道一个对象所占用的空 ...
- 返回本机的外网ip地址
; ); string ip = tempip.Replace("]", "").Replace(" ...
- telnet 不是内部或外部 命令
win7->程序和功能->打开或关闭Windows功能->找到telnet安装下
- yum笔记
rpm --> yum HTML: HyperText Mark LanguageXML: eXtended Mark Language XML, JSON: 半结构化的数据 yum仓库中的元数 ...
- PHP连接Mysql服务器的操作
我们的数据存储在数据库中以后,要把数据和网页联系起来的话,要通过web服务器的解释器进行读取数据,再传递给客户端网页.如图: 这里,我选择了PHP作为学习的解释器.下面就具体来总结一下PHP连接MYS ...
- Linux curses库使用
相信您在网路上一定用过如 tin,elm 等工具, 这些软体有项共同的特色, 即他们能利用上下左右等方向键来控制游标的位置. 除此之外, 这些程式的画面也较为美观. 对Programming 有兴趣 ...
- [Spring入门学习笔记][maven]
什么是maven? 我的理解: 一个项目有一大堆依赖包的时候,没必要下下来,可以利用maven中的pom.xml 指定需要那些依赖包,让maven去本地中央库(如果没找到)->网上仓库库帮你调用 ...
- 《JavaScript 闯关记》之作用域和闭包
作用域和闭包是 JavaScript 最重要的概念之一,想要进一步学习 JavaScript,就必须理解 JavaScript 作用域和闭包的工作原理. 作用域 任何程序设计语言都有作用域的概念,简单 ...
- EF搭建可扩展菜单
EF实现可扩展性菜单 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !impo ...
- 怎么改变Android手机里面文件的打开方式?包括文件管理器或者需要用到文件的APP
工具-程序-qq-清除默认设置 设置>程序与功能>默认