2.制作圆角菜单的两种方法
Posted chenjieling
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2.制作圆角菜单的两种方法相关的知识，希望对你有一定的参考价值。
方法一：设置成背景图片 style{background:url(../image/2.jpg);}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直菜单</title> <style type="text/css"> *{margin: 0;padding: 0;} .class1 {border-bottom: 5px solid #f60;height: 50px;padding-left: 30px;list-style: none;} .class1 li a{display: block;float: left;width: 120px;height: 30px;margin-top:20px;line-height: 30px;text-align: center;text-decoration: none;background: url(../image/2.jpg);} .class1 li .shouYe,.class1 li a:hover{color: white;background: url(../image/1.jpg);background-position: 0 -30px} </style> </head> <body> <ul class="class1"> <li><a href="" class="shouYe">首 页</a></li> <li><a href="">新闻快讯</a></li> <li><a href="">产品展示</a></li> <li><a href="">联系我们</a></li> </ul> </body> </html>
方法二：直接设置成圆角样式 style{border-top-left-radius:20px;border-top-right-radius:20px;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直菜单</title> <style type="text/css"> *{margin: 0;padding: 0;} .class2{border-bottom: 5px solid #f60;height: 50px;padding-left: 30px;list-style: none;} .class2 li a{display: block;float: left;width: 120px;height: 30px;margin-top: 20px;line-height: 30px;text-align: center;text-decoration: none;background-color: #ccc;border-top-left-radius: 20px;border-top-right-radius: 20px;} .class2 li .shouYe,.class2 li a:hover{color: white;background-color: #f60} </style> </head> <body> <ul class="class2"> <li><a href="" class="shouYe">首 页</a></li> <li><a href="">新闻快讯</a></li> <li><a href="">产品展示</a></li> <li><a href="">联系我们</a></li> </ul> </body> </html>
以上是关于2.制作圆角菜单的两种方法的主要内容，如果未能解决你的问题，请参考以下文章