搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
CSS 教程
CSS 基础教程
源代码
清空
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 设置精灵菜单的公共链接属性示例</title> <style> ul.menu { list-style-type: none; } ul.menu li { padding: 5px; font-size: 16px; font-family: "Trebuchet MS", Arial, sans-serif; } ul.menu li a { height: 50px; line-height: 50px; display: inline-block; padding-left: 60px; /* To sift text off the background-image */ color: #3E789F; background: url("/run/images/mySprite.png") no-repeat; /* As all link share the same background-image */ } </style> </head> <body> <ul class="menu"> <li class="firefox"><a href="#">Firefox</a></li> <li class="chrome"><a href="#">Chrome</a></li> <li class="ie"><a href="#">Explorer</a></li> <li class="opera"><a href="#">Opera</a></li> <li class="safari"><a href="#">Safari</a></li> </ul> </body> </html>
运行结果
