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 ...
随机推荐
- 【转】ubuntu 12.04 LTS将关闭最大化最小化移动到右上角
原文网址:http://www.4byte.cn/learning/114801.html ubuntu 12.04 LTS将关闭最大化最小化移动到右上角 还是按下“ALT +F2”组合键,输入g ...
- bzoj3431 [Usaco2014 Jan]Bessie Slows Down
Description [Brian Dean, 2014] Bessie the cow is competing in a cross-country skiing event at the wi ...
- c++ 14
一.堆栈(stack) stack -> vector/deque/list push -> push_back pop -> pop_back top -> bac ...
- pyqt sender()学习
#!/usr/bin/python # -*- coding: utf-8 -*- # sender.py import sys from PyQt4 import QtGui, QtCore cla ...
- python学习之路-7 模块configparser/xml/shutil/subprocess以及面向对象初级入门
本篇记录内容 模块 configparser xml shutil subprocess 面向对象 面向对象基础 面向对象编程和函数式编程对比 面向对象中对象和类的关系 面向对象之构造方法 面向对象之 ...
- 制作nginx的rpm包出现问题
在学习打包rpm,找到了个不错的参考站点 https://src.fedoraproject.org/cgit/rpms/ 过程: git clone -b el6 git://pkgs.fedor ...
- 怎样实现IOS开发中的数据存储方式
iOS 开发中,一般有如下几种数据存储方式.需要根据具体的业务场景,选择 合适的数据存储方式. (1) 用户默认设置 – 这种情况通常不需要用户干预,如游戏通关信息,Video 播放记录,或者 Ap ...
- mysql 使用游标进行删除操作的存储过程
BEGIN DECLARE hprocessInstanceId bigint DEFAULT 0; -- 历史流程实例id DECLARE hprocessInstanceIdStart ...
- Socket介绍
一 socket协议 Socket协议的形象描述 socket的英文原义是“孔”或“插座”.在这里作为4BDS UNIX的进程通信机制,取后一种意思.socket非常类似于电话插座.以一个国家级电话网 ...
- Xcode 中添加 .pch文件
1 新建工程 2 创建 .pch文件 3 在setting里面进行设置: