CSS页面：
*{margin: 0px;padding: 0px;}
.box1{width: 100%;background-color: darkgrey}
.content{width: 1200px;margin: 0px auto;}
.href1:hover{background-color: blanchedalmond;color: red;}
.content a{display: inline-block; margin-right: 5px;text-align: center;padding-top: 10px}
.left{height: 40px;float: left;}
.right{height: 40px;float: right;}
.clear{clear: both;}
a{text-decoration: none;color: black;font-size: 13px}
html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css\font-awesome-4.7.0\css\font-awesome.min.css">
<title>淘宝导航站模拟</title>
</head>
<body>
<div class="box1">
<div class="content">
<div class="left">
<a href="" class="href1">中国大陆 <i class="fa fa-angle-down"></i></a>
<a href="" class="href">亲，请登录</a>
<a href="" class="href">免费注册</a>
<a href="" class="href">手机逛淘宝</a>
</div>
<div class="right">
<a href="" class="href">我的淘宝 <i class="fa fa-angle-down"></i></a>
<a href="" class="href"><span class="fa fa-shopping-basket"></span> 购物车</a>
<a href="" class="href"><span class="fa fa-heart"></span>收藏夹 <i class="fa fa-angle-down"></i></a>
<a href="" class="href">商品分类</a>
<a href="" class="href">卖家中心 <i class="fa fa-angle-down"></i></a>
<a href="" class="href">联系客服 <i class="fa fa-angle-down"></i></a>
<a href="" class="href">网站导航 <i class="fa fa-angle-down"></i></a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
