运维开发网
广告位招商联系QQ:123077622
 
广告位招商联系QQ:123077622

2.圆角菜单的两种方法和菜单的缩放

运维开发网 https://www.qedev.com 2020-07-23 18:57 出处:网络 作者:运维开发网整理
方法一:设置成背景图片 style{background:url(../image/2.jpg);} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直菜单</title> <style type="text/css"> *{margin: 0;padding: 0;

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.圆角菜单的两种方法和菜单的缩放

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直菜单</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        /*可以伸缩的菜单*/
        .class3{
            border-bottom: 5px solid #f60;
            list-style: none;
            height: 50px;
            padding-left: 30px;
        }
        .class3 li a{
            text-decoration: none;
            width: 120px;
            line-height: 30px;
            margin-top: 20px;
            background: #ccc;
            float: left;
            text-align: center;
        }
        .class3 .shouYe{
            color: white;
            background: #f60;
        }
        .class3 .shouYe:hover,.class3 a:hover{
            color: white;
            background: #f60;
            height: 40px;
            margin-top: 10px; /*往上移10px*/
            line-height: 40px; /*文字上下居中显示*/
        }
    </style>
</head>
<body>
    <ul class="class3">
        <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>

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消