css练习002--双斜角横线菜单

来源:互联网 发布:淘宝营销推广教程 编辑:程序博客网 时间:2024/04/28 19:58
<html><head><meta http-equiv="Content-Type" content="charset=utf-8"/><style type="text/css">#menu{width:9em;font-family:Arial;font-size:14px;margin:0 auto;border:solid 1px #aaa;}#menu a,#menu a:visited{display:block;background-color:#fff;line-height:1.4em;color:#000;text-decoration:none;border:0.5em solid #fff;}#menu a#first,#menu a#last{margin:0px;}#menu a:hover{color:#fff;background-color:#aaa;border-color:#ddd #aaa;}</style></head><body><div id="menu"><a href="#" id="first"> Home </a><a href="#"> Contant Us</a><a href="#"> web dev</a><a href="#"> Web Design </a><a href="#" id="last"> Map </a></div></body></html>
效果展示:http://codepen.io/huangwei/pen/EKbGoX
0 0
原创粉丝点击