首页 > 开发 > CSS > 正文

网页代码实例:CSS制作淘宝导航交互的小三角箭头

2024-07-11 09:01:53
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:淘宝导航的小三角箭头图标.

 

没事做了一个淘宝导航的小三角箭头图标,测试/支持环境:IE7+、Firefox8、chrome

以下为源码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css实现的交互小三角箭头图标 -webjx.com网页教学网</title>


<style type="text/css">

* {padding:0; margin:0;font:16px/22px verdana,"microsoft yahei";}

div {width:400px; height:22px; background:#eee;margin:20px auto; padding:0 20px;}

b {width:0; height:0;+margin-top:-15px;display:inline-block;border-color:#000 #eee #eee; border-style:solid; border-width:10px 10px 0;}

strong {font-weight:500;margin:0 5px 0 0;}

a {color:#333; text-decoration:none;}

a:hover {color:#666}

a:hover b {border-color:#eee #eee #000;border-width:0 10px 10px;}

</style>

</head>


<body>

<a href="#"><strong>菜单</strong><b></b></a>

</body>

</html>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表