京东网站顶部导航条 （练习） HTML+CSS
2024-06-11 08:09:34
作为初学者写的比较简单，很多地方不完善。还是记录一下吧。
目录
一效果图
二 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="#">你好，请登录 </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;
}京东网站顶部导航条 （练习） HTML+CSS相关推荐
- 前端学习———用css实现顶部导航条及下拉框
css实现顶部导航条及下拉框 一.原理 二.HTML 三.CSS 1.设置外部容器样式 2.设置内部容器样式 3.设置导航条中的元素 4.设置下拉框元素 5.设置父元素 6.效果展示 一.原理 1. ...
- 如何构建顶部导航条_如何构建导航栏
如何构建顶部导航条 导航栏 (Navigation Bars) Navigation bars are a very important element to any website. They pr ...
- jquery根据滚动像素显示隐藏顶部导航条
本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scroll ...
- 前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点--用div来画"三角". 之前本帅博主写过一篇<前端--菜鸟网站横向CSS导航条菜单:带小三角形>,里面也有介绍如何制作小三角形,不过它是用的现 ...
- JS控制网页滑动顶部导航条变色
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
- 小程序的横向二级顶部导航条，可以切换、拖动、二级定位在一级的下面，高度怎么办
项目场景: **做一个小程序的横向二级顶部导航条,可以切换.拖动.二级定位在一级的下面** 问题描述: 我只能设置scroll-view的高度,不然不显示二级菜单 这是html代码 <view ...
- android顶部导航高度,Android特效——————底部/顶部导航条（Fragment+ViewPaper+XTabLayout）...
初次使用xtablayout和viewpaper2.所以就弄了最基础的导航条 一.效果 二.代码 配置环境[在bulid.gradle中添加以下代码] implementation 'androidx ...
- html把图片做成导航条背景,DIV+CSS背景图片导航菜单的实现方法
导航菜单通常的做法是用ul li,但是ul li纯文本方式的导航菜单实现的效果比较简单,我们可以使用背景图片来实现菜单的个性化设置.让我们开始吧: 先看效果图: 仅这一张图片,我们实现一个横行CSS菜 ...
- html div挤下去了,网站固定导航条挤动下面的DIV_html/css_WEB-ITnose
这是导航栏CSS width: 1336px; background: #333; margin-top: 0px; font-size: 20px; z-index:9999; 这是下面div的CS ...
最新文章
- Java控制台如何输入一行、多行？
- 清晰易懂的马尔科夫链原理介绍
- c语言有图小游戏,【图片】C语言小游戏～贪吃蛇【c语言吧】_百度贴吧
- .Net Core和Jexus配置HTTPS服务
- gateway调用后台系统时选择RFC的决定逻辑
- ajxs跨域 php_PHP项目中是如何处理Ajax请求与Ajax跨域的
- 断点调试 debug模式 1006
- dorado 7 使用总结
- 【前端技术】一篇文章搞掂：微信小程序
- iOS TableView性能优化
- WIN7 VS2005 安装wince6.0教程（不管是X86还是X64,我都尝试成功了）
- 【重磅】《演化学习：理论与算法进展》| 南大周志华、俞扬、钱超重要成果...
- Spring Transaction : TransactionInterceptor
- vue项目获取视频封面展示在页面上
- Python游戏开发，pygame模块，Python实现记忆翻牌小游戏
- 姜小白的Python日记Day11 生成器与并行运算
- tif文件转换为CAD编辑操作
- C++ 实验二 NO.4 字符串合并：输入两个已经按从小到大顺序排列好的字符串，编写一个合并两个字符串的函数，使合并后的字符串，仍然是从小到大排列。
- Linux如何记录运行的Bash命令？
- Android 自定义View合集