圆角菜单条

来源：互联网发布：百度云盘c语言安装包编辑：程序博客网时间：2024/06/11 15:46

<!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>圆角菜单条</title><style type="text/css">*{margin:0; padding:0; font-size:18px;}ul{list-style:none; height:50px;padding-left:10px;/*向左移动十个像素*/border-bottom:5px solid #F30; }a{  text-decoration:none;/*去掉下划线*/display:block;/*将a标签变为块元素*/height:30px;width:120px;background:url(../img/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A23.jpg);/*插入背景图片*/margin-right:1px;margin-top:20px;/*向下移动20个像素*/text-align:center;/*字体缩进*/float:left;}.on,a:hover{ color:#FFF;background-position: 0 -30px;}/*改变背景图片的位置*/</style></head><body><ul>        <li><a class="on" href="#">首   页</a></li>        <li><a href="#">新闻快讯</a></li>        <li><a href="#">产品展示</a></li>        <li><a href="#">售后服务</a></li>        <li><a href="#">联系我们</a></li></ul></body></html>

0 0