论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS教程:淘宝网导航交互的小三角箭头实现案例

文章类别:div+css | 发表日期:2012-7-13 9:07:15

CSS教程:淘宝网导航交互的小三角箭头实现案例

今天给大家分享淘宝导航的小三角箭头图标,测试/支持的浏览器:IE7+、Firefox8、chrome,现在我们一起看看下面的案例吧!

案例代码: 
<!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>
<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>
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058