网页代码实例:CSS制造淘宝导航交互的小三角箭头-CSS教程-爱易网页

日期：2013-11-18　浏览次数：21209 次

网页制造aiyiweb文章简介：淘宝导航的小三角箭头图标.

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

以下为源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>css实现的交互小三角箭头图标 -Aiyiweb.Com爱易网任务室</title>

* {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>

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。