css-分类导航栏

首页 > 代码库 > css-分类导航栏

2024-08-16 03:34:28 220人阅读

底部分类导航栏

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

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