<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>01.常用导航布局案例(仿淘宝导航条)</title><link rel="stylesheet" type="text/css" href="../css/index2.css"><link rel="stylesheet" type="text/css" href="../static/font-awesome/css/font-awesome.min.css"></head><body><div class="header"><div class="header_content"><div class="header_left"><a href="" class="header_a">中国大陆 <i class="fa fa-angle-down"></i></a><a href="" style="color:#FF5000;">亲，请登录</a><a href="">免费注册</a><a href="">手机逛淘宝</a></div><div class="header_right"><a href=" " class="header_a">我的淘宝 <i class="fa fa-angle-down"></i><ul><li>已买到的宝贝</li><li>我的足迹</li></ul></a><a href=" "><span class="fa fa-cart-plus" style="color:#FF5000;"></span> 购物车</a><a href=" " class="header_a"><span class="fa fa-star"></span> 收藏夹<i class="fa fa-angle-down"></i><ul><li>已买到的宝贝</li><li>我的足迹</li></ul></a><a href=" " class="header_a">商品分类</a><a href=" ">千牛卖家中心 <i class="fa fa-angle-down"></i></a><a href=" " class="header_a">联系客服 <i class="fa fa-angle-down"></i></a><a href=" " class="header_a"><span class="fa fa-align-justify" style="color:#FF5000;"></span>网站导航 <i class="fa fa-angle-down" style="color:#FF5000;"></i><ul><li>已买到的宝贝</li><li>我的足迹</li><li>我的足迹</li><li>我的足迹</li></ul></a></div></div><div class="clear"></div></div></body></html>
*{margin:0px;padding:0px;}a{text-decoration:none;color:#6c6c6c;font-size:13px;}li{list-style:none;}.clear{clear:both;}.header{width:100%;background-color:#F5F5F5;}.header_content{width:1200px;margin:0px auto;line-height:40px;}.header_left{height:40px;float:left;}.header_left a{margin-right:5px;}.header_content a:hover{color:#FF5000;}.header_right{height:40px;float:right;}.header_a{display:inline-block;height:40px;width:90px;text-align:center;position:relative;}.header_a:hover{background:#fff;}.header_a ul{border:1px solid #F5F5F5;display:none;border-top:none;}.header_a:hover ul{display:block;position:absolute;width:100px;}.header_a ul li:hover{background-color:#F5F5F5;}.header_a ul li{color:#6c6c6c;height:30px;line-height:30px;text-align:left;padding:0px 3px;margin:5px 0px;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
