美文网首页
导航条菜单的制作--要回答问题

导航条菜单的制作--要回答问题

作者: 小天工作 | 来源:发表于2016-03-28 21:39 被阅读0次

    我忽略的text-indent/文本缩进;text-align:center;

    适用于某些特定文本,改变位置

    垂直导航栏重点

    设置display :block;
    才可以设置对应元素的宽,针对行内元素变块级元素。
    Example:<stype> a{ display:block; width:XXpx;}

    行内元素设置display block.jpg

    水平导航栏重点

    float属性想了好久,尽然没想到还在想其它的东东。
    好对不起我自学一个月的成果啊!

    水平导航栏float.jpg

    圆角菜单的制作(圆角贴图法)

    这里是用图片的方法,image的图层要在color之上。
    你也可以用border-radius,此属性基于css3.0
    ** background-position:XXpx XXpx; 这个是收获,以前不知道!**
    http://www.w3school.com.cn/cssref/pr_background-position.asp

    圆角菜单制作.jpg

    ---问题---?---

    1.你可知道那道黄杠杠如何制出?(提示border!!!)
    2.如何实现贴图位置改变的?

    附代码:<pre>
    <style type="text/css">
    { margin: 0px; padding:0px;
    }
    ul{
    list-style: none;
    border-bottom: 5px solid darkorange;
    height: 50px;
    padding-left: 30px;
    上面是答案
    --
    }
    a{
    display: block;
    /
    display: block;
    此项设置,直接影响a标签,
    块级元素才能设置宽度,
    不然就是自适应/
    color: #333;
    text-decoration: none;
    /
    text-indent: 15px;/text-align: center;
    /
    margin-top: 1px;/ margin-left: 1px;
    height: 30px;
    line-height: 30px;
    width: 120px;
    margin-top: 20px;
    /
    background-color: darkcyan;*
    / background-image: url("../Nav/btnBg.png");
    }
    li .on , a:hover {
    /background-color: darkorange;/
    background-image: url("../Nav/btnBg.png");
    background-position: 0px -30px;
    /!border-radius: 15px;! 注意这个使用css3.0/
    color: white;
    }
    .nav li {
    float: left;
    }
    </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>

    </pre>

    相关文章

      网友评论

          本文标题:导航条菜单的制作--要回答问题

          本文链接:https://www.haomeiwen.com/subject/grnjlttx.html