一入前端深似海
随笔

css-分类导航栏

底部分类导航栏

 

↓↓↓↓↓↓↓↓↓代码↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>navv</title>
    <link rel="stylesheet" href="nav.css" >
</head>
<body>
<nav>
    <div class="nav1">
        <div class="left left1">
            <img src="banner.png" alt="">
        </div>
        <div class="right">
            <img src="bg1.png" alt="">
        </div>
    </div>
    <div class="nav1">
        <div class="left">
            <ul>
                <li><a class="fir" href="###">支付方式</a></li>
                <li><a href="###" href="###" href="###" href="###">货到付款</a></li>
                <li><a href="###" href="###" href="###" href="###">余额支付</a></li>
                <li><a href="###" href="###" href="###" href="###">物流运输</a></li>
                <li><a href="###" href="###" href="###" href="###">在线支付</a></li>
            </ul>
        </div>
        <div class="right">
            <img src="bg2.png" alt="">
        </div>
    </div>
    <div class="nav1">
        <div class="left">
            <ul>
                <li><a class="fir" href="###" href="###" href="###">支付方式</a></li>
                <li><a href="###" href="###" href="###">货到付款</a></li>
                <li><a href="###" href="###" href="###">余额支付</a></li>
                <li><a href="###" href="###" href="###">物流运输</a></li>
                <li><a href="###" href="###" href="###">在线支付</a></li>
            </ul>
        </div>
        <div class="right">
            <img src="bg3.png" alt="">
        </div>
    </div>    
    <div class="nav1">
        <div class="left">
            <ul>
                <li><a class="fir" href="###" href="###">支付方式</a></li>
                <li><a href="###" href="###">货到付款</a></li>
                <li><a href="###" href="###">余额支付</a></li>
                <li><a href="###" href="###">物流运输</a></li>
                <li><a href="###" href="###">在线支付</a></li>
            </ul>
        </div>
        <div class="right">
            <img src="bg4.png" alt="">
        </div>
    </div>    
    <div class="nav1">
        <div class="left">
            <ul>
                <li><a class="fir" href="###">支付方式</a></li>
                <li><a href="###">货到付款</a></li>
                <li><a href="###">余额支付</a></li>
                <li><a href="###">物流运输</a></li>
                <li><a href="###">在线支付</a></li>
            </ul>
        </div>
    
    </div>
</nav>
    
</body>
</html>
*{
    margin: 0px;
    padding: 0px;
}
nav{
    width: 1349px;
    height: 180px;
    background: #63883C;
}
.left{
    float: left;
    margin-top: 30px;
    margin-left: 20px;
}
.right{
    float:right;
    margin-left: 60px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color:white;
    line-height: 25px;
}
a:hover{
    text-decoration: underline;
}
.nav1{
    float:left;
}
ul li{
    list-style: none;
}
.fir{
    color: #E8CF47;
    font-weight: bold;
    font-size: 18px;
}
.left1:first-child{
    margin-left: 80px;
    margin-top: 0px;
}

 

 效果

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

posted on 2016-10-10 00:32  ivan12138  阅读(302)  评论(0)    收藏  举报

导航