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 ...
随机推荐
- linux会话命令screen详解
Screen会话命令 我其实是把文件下载到 /home/zhang/temp/ 里面,当我N久以后再联上服务器,想看看文件下载情况怎样,那又要 cd 老半天,这时候 screen 就是好帮手了. 顾名 ...
- 如何允许外网可以连接mysql数据库
1.首先检查mysql所在服务器的防火墙,如果限制了外网对3306端口的连接,那么放开限制Linux服务器中执行 iptables -L 可以查看当前的防火墙规则iptables -F 可以清 ...
- haproxy简单负载均衡搭建
最近对负载均衡进行搭建具体方法如下: haproxy 修改部分(haproxy-cfg.cfg) global daemon maxconn 4500 defaults mode http timeo ...
- UVA1218--树形DP
没有看书和题解做的一道树形DP题,思路很清晰..只是debug上花了很久的时间才发现看错了条件..并不是每个点都只能和一台服务器相邻,而是非服务器的点只能和一台服务器相邻..看错了一个条件差距大了去了 ...
- win10无法使用内置管理员账户打开
对于这种问题其实对于专业版用户倒不是难事,很容易解决,具体方法如下: 首先WIN+R输入:gpedit.msc,打开组策略,找到“计算机配置”里面的“Windows设置”,打开“安全设置” -> ...
- IO之流程与buffer概览
为了说明这个流程,还是用图来描述一下比较直观. 中间过程请参考 <IO之内核buffer----"buffer cache"> <IO之标准C库buffer> ...
- spark二次排序
数据: 2012,01,01,52012,01,02,452012,01,03,352012,01,04,102012,02,04,102012,02,03,182012,02,01,222012,0 ...
- FZU 2102 Solve equation（水，进制转化）&& FZU 2111（贪心，交换使数字最小）
C Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Pra ...
- Asp.net Mvc 请求是如何到达 MvcHandler的——UrlRoutingModule、MvcRouteHandler分析，并造个轮子
这个是转载自:http://www.cnblogs.com/keyindex/archive/2012/08/11/2634005.html(那个比较容易忘记,希望博主不要生气的) 前言 本文假定读者 ...
- AJAX 控件集之TextBoxWatermark(水印文本框)控件
功能: 可以让TextBox控件初始化的时候拥有水印文字.属性: TargetControlID :要使用具有水印效果的TextBox控件ID. WatermarkCssCla ...