• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

网页代码实例:CSS制作淘宝导航交互的小_css

css 搞代码 7年前 (2018-06-11) 139次浏览 已收录 0个评论

文章简介:淘宝导航的小三角箭头图标.

没事做了一个淘宝导航的小三角箭头图标,测试/支持环境: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"&gt; <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>

欢迎大家阅读《网页代码实例:CSS制作淘宝导航交互的小…_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:网页代码实例:CSS制作淘宝导航交互的小_css
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址