CSS/HTML制作京东商城顶部导航条

article/2025/3/10 10:10:54

京东商城原网站：
在这里插入图片描述
效果图：

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东商城导航条</title><link rel="stylesheet" href="../02CSS/reset.css"><link rel="stylesheet" href="./icon/定位icon/iconfont.css"><link rel="stylesheet" href="./icon/xia_shuxian/iconfont.css"><link rel="stylesheet" href="./icon/xia2/iconfont.css"><style>body{background-color: rgb(255, 240, 213);}/* 导航栏背景 */.back{height: 31px;background-color: #E3E4E5;margin: 20px;border-bottom: #DDDDDD 1px solid;position: relative;}/* 主要内容区 */.primary{width: 1190px;height: 30px;margin: 0px auto;/* background: white; */position: relative;}/* 定位图标 */.dw{width: 60px;height: 30px;position: relative;float: left;}.p1::before{    /* 引用定位的iconfont */content: '\e663';font-family: 'iconfont';font-size: 30px;color: #F10215;float: left;}/* 设置地理位置的文字格式 */.back .primary .dw a{height: 30px;line-height: 30px;font-size: 12px;color: #999999;text-decoration: none;}/* 鼠标移入定位区域时的操作 */.dw:hover{background-color: #FFFFFF;color: #E33333;}/* 右侧菜单栏 */.nav{width: 710px;height: 30px;/* background-color: white; */margin-left: 460px;}.nav li{float: left;margin-left: 6px;margin-right: -3px;/* margin: 0px 6px; */}.nav li a:hover{color: #F10215;}.nav a{display: inline-block;height: 30px;line-height: 30px;font-size: 12px;position: relative;padding-left: 3px;color: #999999;text-decoration: none;}/* 针对竖线的处理 */.sp1{height: 30px;margin-left: 4px;/* float: left; */font-size: 8px;color: #b1b1b1;}.sp2{font-weight: bold;color: #999999;margin-left: 3px;font-size: 1px;}.nav li a.bac:hover{background-color: white;}</style>
</head>
<body><div class="back"><div class="primary"><div class="dw"><a href="" class="a"><p class="p1"></p>安徽</a></div><div class="nav"><ul><li><a href="">你好，请登录</a></li><li><a href="" style="color: #F10215;">免费注册</a><span class="sp1"></span></li><li><a href="">我的订单</a><span class="sp1 iconfont icon-vertical_line"></span></li><li><a href="" class="bac">我的京东<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span></li><li><a href="">京东会员</a><span class="sp1 iconfont icon-vertical_line"></span></li><li><a href="" style="color: #F10215;" class="bac">企业采购<span class="sp2 iconfont icon-xiala"></span></a></span><span class="sp1 iconfont icon-vertical_line"></span></li><li><a href="" class="bac">客户服务<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span></li><li><a href="" class="bac">网站导航<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span></li><li><a href="">手机京东</a></li></ul></div></div></div>
</body>
</html>