码迷,mamicode.com
首页 > Web开发 > 详细

css-分类导航栏

时间:2016-10-10 01:34:11      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

底部分类导航栏

 

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

 

<!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;
}

 

 效果

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

 

css-分类导航栏

标签:

原文地址:http://www.cnblogs.com/ivan-world/p/5944369.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!