带图片的仿天猫导航栏

来源：互联网发布：赢时胜软件上海分公司编辑：程序博客网时间：2024/06/09 22:49

刚开始自学前端一周趁着周末休息，利用做了一个带图片的导航栏，主要是给我这样半路出家的小菜鸟看的，各位大神。如有不当之处，敬请指责。废话不多说，看源码.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{margin: 0px;            padding: 0px;        }        .box{            width: 100%;        }        .center{            width: 1000px;            height:50px;            background: black;            text-align: center;            line-height: 50px;            margin: auto;        }        a{            display: inline-block;            height: 30px;            color: white;            line-height: 40px;            background: url("images/fiee.png") no-repeat;            background-size: 30px 30px;            padding: 0px 30px;            text-decoration: none;            text-indent:5px;        }    </style></head><body>    <div class="box">        <div class="center">            <a href="">天猫国际</a>            <a href="">天猫超市</a>            <a href="">天猫会员</a>            <a href="">品牌街</a>            <a href="">电器城</a>            <a href="">猫鲜生</a>        </div>    </div></body>

效果图
chrome下的
chrome
主要是给a标签设置display：inline-block；padding：0px 30px;不要给a标签设置宽度将图片设置为a标签的background，用line-height调整图片和文字的水平位置。第一次在网上写东西，各位多多指教。

0 0