h5+css 圆角菜单

来源：互联网发布：php网站编辑：程序博客网时间：2024/05/22 14:22

圆角菜单

<!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:20px;}.nav{list-style:none;height:30px;border-bottom:10px solid #f60;padding-left:11px;margin-top:111px;}.nav li{float:left;}.nav li a{text-decoration:none;color:#333;display:block;height:30px;line-height:30px;width:120px;background:url(http://img.mukewang.com/53846438000168f901200060.jpg);margin-right:1px;text-align:center;}   //这是一张高120宽60的图片；.nav > li >a.on,.nav li a:hover{color:#f00;background-position:0-30px;}</style></head><body><ul class="nav">    <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