京东网站顶部导航条 （练习） HTML+CSS

已于 2022-07-05 18:31:18 修改
阅读量717 收藏 9
点赞数 1
分类专栏： html 前端学习html css 文章标签： html css 前端
于 2022-07-03 20:36:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52153640/article/details/125588975
版权
前端学习html 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
css
13 篇文章 0 订阅
订阅专栏
html
7 篇文章 0 订阅
订阅专栏

         作为初学者写的比较简单，很多地方不完善。还是记录一下吧。

目录

一效果图

二 HTML

三 CSS

一效果图

二 HTML

     

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/jd.css">
</head>

<body>
    <div class="box">
        <div class="nav">
            <ul class="l">
                <li class="nav-local hov">
                    <a href="#">
                        <i style="color: red;" class="fa fa-map-marker" aria-hidden="true" ></i>
                        <span>安徽</span>
                    </a>
                    <div class="local-xl">
                        <div class="xl">
                            <a href="#" style="color: white; background-color: red;">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#" >安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                        <div class="xl">
                            <a href="#">安徽</a>
                        </div>
                    </div>
                </li>
        </ul> 
        <ul class="r">
                <li class="nav1">
                    <a href="#">你好，请登录&nbsp;&nbsp;</a>
                    <a href="#" style="color: red;">免费注册</a>
                </li>
                <li>|</li>
                <li class="nav2">
                    <div><a href="#">我的订单</a></div>
                </li>
                <li>|</li>
                <li class="nav3 hov">
                    <div class="jd">
                        <a href="#">我的京东</a>
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                         <div class="jd-xl">
                            <div class="xl1">
                                <a href="#">待处理订单</a>
                            </div>
                            <div class="xl1">
                                <a href="#">我的问答</a>
                            </div>
                            <div class="xl1">
                                <a href="#">返修退换货</a>
                            </div>
                            <div class="xl1">
                                <a href="#">我的关注</a>
                            </div>
                            <div class="xl1">
                                <a href="#">降价商品</a>
                            </div>
                         </div>
                    </div>
                </li>
                <li>|</li>
                <li class="nav4 ">
                    <div>
                        <a href="#">京东会员</a>
                    </div>
                </li>
                <li>|</li>
                <li class="nav5 hov">
                    <div class="cg">
                        <a href="#" style="color: red;">企业采购</a>
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                        <div class="cg-xl">
                            <div class="xl2">
                                <a href="#">企业购</a>
                            </div>
                            <div class="xl2">
                                <a href="#">公共频道</a>
                            </div>
                            <div class="xl2">
                                <a href="#">工业品</a>
                            </div>
                            <div class="xl2">
                                <a href="#">商用场景馆</a>
                            </div>
                            <div class="xl2">
                                <a href="#">礼品卡</a>
                            
                         </div>
                         <div class="xl2">
                            <a href="#">维修企业购</a>
                        </div>
                            <div class="xl2">
                                <a href="#">工品优选</a>
                            
                         </div>
                         <div class="xl2">
                            <a href="#">京东优选</a>
                        
                     </div>
                     <div class="xl2">
                        <a href="#">大中型企业购买</a>
                    
                 </div>
                    </div>
                    </div>
                </li>
                <li>|</li>
                <li class="nav6 hov">
                    <div class="kh">
                        客户服务
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                        <div class="kh-xl">
                            <div class="xl3">
                                <a href="#">企业购</a>
                            </div>
                            <div class="xl3">
                                <a href="#">公共频道</a>
                            </div>
                            <div class="xl3">
                                <a href="#">工业品</a>
                            </div>
                            <div class="xl3">
                                <a href="#">商用场景馆</a>
                            </div>
                            <div class="xl3">
                                <a href="#">礼品卡</a>
                            
                         </div>
                         <div class="xl3">
                            <a href="#">维修企业购</a>
                        </div>
                            <div class="xl3">
                                <a href="#">工品优选</a>
                            
                         </div>
                         <div class="xl3">
                            <a href="#">京东优选</a>
                        
                     </div>
                     </div>
                    </div>
                </li>
                <li>|</li>
                <li class="nav7 hov">
                    <div>
                        网站导航
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                    </div>
                </li>
                <li>|</li>
                <li class="nav8">
                    <div>
                        手机京东
                    </div>
                </li>
                <li>|</li>
                <li class="nav9">
                    <div>
                        <a href="#">无障碍通道</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

三 CSS

     

*{
    margin:0;
    padding: 0;
}
a{ 
    color: rgb(153,153,153);
    text-decoration: none;
}
a:hover{
    color: red;
}
/* 整体设置 */
.box{
    font-size: 10px;
    text-align: center;
    color: rgb(153,153,153);
    line-height: 30px;
    height: 30px;
    background-color: rgb(227,228,229);
    border: 1px solid rgb(221,221,221);
}
/* 父元素相对定位 */
.nav-local{
  
    position: relative;
    
}

.nav{
    width: 1200px;
    line-height: 30px;
    margin: auto;
}

ul{
    /* width: 1300px; */
    list-style: none;  
    /* margin: 0 100px auto ;  */
}
/* 左边位置左浮动 */
.l{
    float: left;
}
/* 右边 全体右浮动 */
.r{
  
    float: right;
}
/* 小标题左浮动 */
.r>li{
    float: left;
}
/* 小标题边框 */
li{
    padding: 0 10px 0 10px;
}
/* 提前设置边框解决抖动 */
.hov{
    display: block;
    position: relative;
    border-top: 1px solid rgb(227,228,229);
   border-left: 1px solid rgb(227,228,229);
   border-right: 1px solid rgb(227,228,229);
}
/* 边框设置 */
.hov:hover{
    background-color: white;
    border-top: 1px solid rgb(221,221,221);
    border-left: 1px solid rgb(221,221,221);
    border-right: 1px solid rgb(221,221,221);
    
}
/* 地址 下拉框设置 */
.local-xl{
    display: none;
     position: absolute;
     border-bottom: 1px solid rgb(221,221,221);
     border-left: 1px solid rgb(221,221,221);
     border-right: 1px solid rgb(221,221,221);
     width: 200px;
    
     left: -1.2px;
    margin-top: -2px;
}
.xl{
    margin: auto;
     width: 50px;
     float: right;
}
/* 浏览显示地址下拉框 */
.nav-local:hover .local-xl{
    display: block;
}
/* 京东会员下拉框设置 */
.jd-xl{
    display: none;
    border-bottom: 1px solid rgb(221,221,221);
    border-left: 1px solid rgb(221,221,221);
    border-right: 1px solid rgb(221,221,221);
    position: absolute;
    width: 200px;
    left: -1px;
}
.xl1{
    width: 70px;
    float: left;
}
/* 浏览显示我的京东下拉框 */
.jd:hover .jd-xl{
    display: block;
}
/* 企业采购下拉框 */
.cg-xl{
    display: none;
    border-bottom: 1px solid rgb(221,221,221);
    border-left: 1px solid rgb(221,221,221);
    border-right: 1px solid rgb(221,221,221);
    position: absolute;
    width:200px;
    left: -1px;
}
.xl2{
    width: 70px;
    float: left;
}
/* 浏览显示企业采购下拉框 */
.cg:hover .cg-xl{
    display: block;
}
/* 客户服务下拉框 */
.kh-xl{
    display: none;
    border-bottom: 1px solid rgb(221,221,221);
    border-left: 1px solid rgb(221,221,221);
    border-right: 1px solid rgb(221,221,221);
    position: absolute;
    width:150px;
    left: -82px;
}
.xl3{
    width: 70px;
    float: right;
}
/* 浏览显示客户服务下拉框 */
.kh:hover .kh-xl{
    display: block;
}

四分十七
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（396）：京东制作页面5三大标签优化
歌谣的博客
01-13 478
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
前端基础---淘宝商城练习
m0_51123132的博客
04-23 175
淘宝商城静态页面布局的练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘宝网 - 淘！我喜欢</title> <link rel="stylesheet" href="css/index.css"> <link rel="icon" href="favicon.ico"> &l
京东购物网页端顶部栏代码.rar
01-29
京东购物网页端顶部导航下拉代码
HTML+CSS+JS实现京东首页[web课设代码+模块说明+效果图]
心态的博客
04-10 2497
用时差不多一个星期，抽空把前端课设做完了。html代码量800+行，css代码量1200+行，因为有轮播图(加了100多行js代码)。京东首页用了2000行代码。里面避免不了有冗余的代码。大多数的常见知识点均已运用。每个css样式修饰都有注释，阅读起来会很方便。 资源使用html+css+js纯手写，无任何组件。纯源生代码编写的静态页面。
仿京东首页双层吸顶效果
WOL965的博客
06-27 1791
仿京东首页双层吸顶效果，或者叫双组吸顶. 今天已经是端午节假日最后一天了，快乐的时光总是很短暂的. 端午节期间用叮咚买菜App买菜，发现他们的App首页有两个吸顶功能，而下面的tabLayout那个吸顶，居然把上部分和下部分的手指滑动事件给阻断了，没能将滑动事件传递给到另一部分接着滑动. 叮咚买菜应该用户量不少，但对于我个人来说这用户体验还是不大能接受，用着感觉不太爽，可能是大厂的APP太溜了的原因吧，像京东这些也有双层的吸顶，但就不会有这种问题. 这放假疫情期间也不太敢出去，就打算来研究研究这个双层的吸
最贴近京东首页体验的嵌套滑动吸顶效果
Android技术之家
11-16 900
吸顶效果是各家 App 或多或少都会用的一个交互，这种交互也常见于 PC、H5，可以说是一种通用性很强的前端交互体验，相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个，...
HTML+CSS+JavaScript：实现京东官网固定导航栏
lbcbjtlhmjq的博客
07-29 1104
在京东官网首页，只要页面滚动到京东秒杀倒计时的位置，顶部的导航栏就会自动出现且固定在窗口最上方，如下图我们将模仿京东官网的效果，做一个简易的固定导航栏，如下图。
CSS/HTML制作京东商城顶部导航条
Etui۹(･༥･´)و的博客
01-24 4337
京东商城原网站： 效果图： 源码： <!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="stylesh
前端实现小米官网导航栏的实现 主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显
小杨的博客
07-01 1667
话不多说直接上代码效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显 需要图片请私信哦
前端基础学习-（1）京东顶部导航条
YYLOVEYY520的博客
01-29 1370
前端基础学习-（1）京东顶部导航条 作为前端学习的小白，个人在学习过程中认知：京东导航条使用到了浮动(float)、定位(position)、垂直居中、图标引用等知识。 实现效果 代码实现 html代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
美食网站js+html+css
01-03
【美食网站js+html+css】是一个以JavaScript、HTML和CSS为核心技术的项目，旨在创建一个展示美食的网站。这个项目提供了完整的源代码，包括HTML结构文件、CSS样式表和JavaScript脚本，以及用于视觉呈现的网站图片。...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
京东首页Html+css+javascript代码
04-15
在本项目中，“京东首页Html+css+javascript代码”展示了如何使用前端开发的三大核心技术——HTML、CSS和JavaScript，来构建一个类似京东首页的网页。这个项目旨在帮助开发者理解购物网站的基本架构，并通过实践增强...
顶部导航菜单HTML+CSS+JS 多级导航 简洁大方
最新发布
06-25
在网页设计中，顶部导航菜单是用户界面的重要组成部分，它为用户提供了一种高效的方式来浏览网站的各个部分。本文将深入探讨如何使用HTML、CSS和JavaScript创建一个多级、简洁大方的顶部导航菜单。 首先，HTML...
html+css侧边伸缩导航栏
01-26
在创建一个具有吸引力和交互性的网站时，侧边伸缩导航栏是一个常见的设计元素，它提供了一种高效且直观的浏览体验。在这个主题中，我们将深入探讨如何使用 HTML 结构和 CSS 样式来实现一个可伸缩的侧边导航栏。 ...
京东网页端顶部导航HTML代码
ygz10483903的博客
01-31 7131
京东网页端顶部导航样式： 要实现的功能样式如下： 以下是代码片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东购物头部代码&lt...
写一个京东最顶部的导航条
qq_42999126的博客
07-18 2532
效果图 如下： 下拉框的效果： 鼠标移入以后会有一个框显示出来 结构代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东顶部
html：制作简易京东导航栏
astar2022的博客
06-30 3604
又是让人头秃的一天！
网页顶部导航条练习
WXY19990803的博客
02-06 373
<!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"> <title>京东
html+css顶部导航
11-24
以下是一个简单的HTML和CSS实现顶部导航栏的例子： ```html <!DOCTYPE html> <html> 顶部导航栏 /* 设置导航栏样式 */ nav { background-color: #333; overflow: hidden; } /* 设置导航栏链接...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值