CSS制作的导航菜单向上箭头
2014-08-16 10:24
260 查看
使用纯CSS技术制作导航菜单上的向上箭头图标,不使用图片,用CSS实现,挑战自己的CSS布局水平,最终效果自己满意,如果您对此感兴趣的话,就要好好研究一下CSS代码啦。
<!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> <title>潜水射流曝气机</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .wrap{width:200px;height:50px;position:relative;margin-top:50px;background:#080;} .arrow{width:0;height:0;position:absolute;left:50%;margin-left:-17px;top:-32px;font-size:0;border-width:16px;border-color:transparent transparent #080;border-style:dashed dashed solid;} </style> </head> <body> <div class="wrap"> <div class="arrow"></div> </div> </body> </html>
相关文章推荐
- CSS 菜单系列:用 UL 制作横向导航菜单-入门版
- HTML/CSS导航菜单-垂直菜单的制作
- 借助得力工具快速制作CSS导航菜单(附工具下载地址)
- 用UL制作横向CSS导航菜单
- 使用CSS 制作导航菜单 (一)
- HTML/CSS导航菜单-水平菜单的制作
- HTML/CSS导航菜单-伸缩菜单的制作(垂直方向)
- 使用CSS 制作导航菜单 (二)
- CSS制作水平导航菜单效果
- 纯CSS制作下拉导航菜单实例代码
- css分类导航和圆角菜单的制作
- CSS制作的垂直导航菜单效果
- 制作导航菜单分隔线的总结:用css3
- 简单 纯css 多级导航菜单 制作教程1 - 使用ul li 制作导航栏
- div+css 制作横向导航菜单
- CSS实现带箭头的垂直导航菜单
- 实例:用UL制作横向CSS导航菜单
- 用CSS打造向上展开的多级导航菜单
- CSS+DIV设计实例:纯CSS制作下拉导航菜单
- csc实例:用UL制作横向CSS导航菜单