ennnn
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="圆角边.css" type="text/css" rel="stylesheet" /> </head> <body> <ul> <li class="on"><a 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> /*上面为HTML代码*/ /*下面是css外联样式代码*/
@charset "utf-8"
*{margin: 0;padding: 0; font-size: 20px}
ul{height: 50px;list-style: none;border-bottom: 5px solid #F36708;padding-left: 40px;}
li{float: left;margin-top: 20px;}
a{display: block;width: 120px;height: 30px;
text-decoration: none;text-align: center;
background:url("../decompression/《导航条菜单制作》课程源代码/images/btnBg.png");color: black;
background-color: aqua;}
.on ,a:hover{background-position: 0 -30px;color: #ED6A6D;}
还可以定义一个盒子把两宽变圆:
因为超链接a是内联样式
代码如下
a{ display:block;/*更改为块元素*/
width:300px;
height:30px;
border-radious:30px;/*定义圆边*/
}