html：制作简易京东导航栏
2024-05-10 10:17:36
一天的努力，不过还是有不尽如人意的地方，
代码如下：
<!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"><style>/* 消除默认格式 */* {margin: 0;padding: 0;}li {list-style: none;}a {text-decoration: none;}/* 大盒子 */#body {height: 30px;background-color: #E3E4E5;}#wrap {width: 1600px;height: 30px;/* background-color: #E3E4E5; */font-size: 12px;/* white-space: nowrap; overflow: hidden; */color: #999999;margin: 0 auto;}#box {/* width: 70%; */height: 30px;/* background-color: #E33333; */}/*左侧图标部分设置 */.d1 {/* background-color: black; */line-height: 30px;height: 30px;float: left;}.s1 {color: #F10215;font-size: 16px;padding: 0 5px;}/* 导航主体部分设置 */.d2>ul {padding-left: 400px;width: 1200px;height: 30px;/* background-color: purple; *//* float: left; */}.d2 li {line-height: 30px;float: left;width: 80px;/* background-color: red; */text-align: center;}.p1 {float: left;line-height: 30px;}/* 超链接设置 */a {color: #999999;}a:hover {color: #E33333;}/* 特殊字体样式 */.a1 {color: #FF0000;}/* 第一个下拉框 */.d1>ul {display: none;width: 260px;/* height: 60px; */border: 2px solid #CCCCCC;overflow: hidden;position: relative;bottom: 2px;right: 2px;text-align: center;}.d1>ul>li {float: left;background-color: #fff;}/* 转化为块元素 */.d1:hover>ul {display: block;}/* 鼠标移入安徽 */.d1:hover {color: red;background-color: #fff;width: 60px;border: 2px solid #CCCCCC;}.d1>ul>li>a {margin: 5px 5px 5px 3px;padding: 0 10px;color: #999;display: block;}/* 下拉框安徽设置 */.d1>ul>li>a:hover {background-color: #F4F4F4;color: #E55151;}.d1>ul>li>.anhui {display: block;background-color: red;color: white;}.d1>ul>li>.anhui:hover {background-color: red;color: white;}/* 第二个下拉框 */.l1>ul {width: 180px;/* height: 100px; */border: 2px solid #cccccc;display: none;overflow: hidden;position: relative;bottom: 2px;right: 2px;/* position: absolute; */}.l1>ul>li {float: left;background-color: #fff;}.l1:hover {background-color: #fff;width: 76px;height: 28px;border: 2px solid #CCCCCC;}/* 转化为块元素 */.l1:hover>ul {display: block;}.l1>ul>li>a {margin: 5px 5px 5px 3px;padding: 0 5px;}/* .l1>ul>li>a:hover {background-color: #F4F4F4;color: #E55151;} *//* 第三块下拉框 */.l2>ul {width: 180px;/* height: 100px; */border: 2px solid #cccccc;display: none;overflow: hidden;position: relative;bottom: 2px;right: 2px;/* position: absolute; */}.l2>ul>li {float: left;background-color: #fff;}.l2:hover {background-color: #fff;width: 76px;height: 28px;border: 2px solid #CCCCCC;}/* 转化为块元素 */.l2:hover>ul {display: block;}.l2>ul>li>a {margin: 5px 5px 5px 3px;padding: 0 5px;}</style>
</head><body><div id="body"><div id="wrap"><div class="d1"><i class="fa fa-map-marker s1" aria-hidden="true"></i> <a href="">安徽</a><!-- 下拉框 --><ul><li><a href="">北京</a></li><li><a href="">上海</a></li><li><a href="">天津</a></li><li><a href="">重庆</a></li><li><a href="">山西</a></li><li><a href="">河南</a></li><li><a href="">辽宁</a></li><li><a href="">吉林</a></li><li><a href="">内蒙</a></li><li><a href="">江苏</a></li><li><a href="">山东</a></li><li><a href="">福建</a></li><li><a href="">湖北</a></li><li><a href="">湖南</a></li><li><a href="" class="anhui">安徽</a></li><li><a href="">广东</a></li><li><a href="">江西</a></li><li><a href="">四川</a></li><li><a href="">海南</a></li><li><a href="">贵州</a></li></ul></div><div class="d2"><ul><li><a href="">你好,请登录</a></li><li><a href="" class="a1">免费注册</a></li><p class="p1">|</p><li><a href="">我的订单</a></li><p class="p1">|</p><li class="l1"><a href="">我的京东</a> <i class="fa fa-angle-down s2" aria-hidden="true"></i><!-- 下拉框 --><ul><li><a href="">待处理订单</a></li><li><a href="">我的问答</a></li><li><a href="">返修退货单</a></li></ul></li><p class="p1">|</p><li><a href="">京东会员</a></li><p class="p1">|</p><li class="l2"><a href="" class="a1">企业采购</a> <i class="fa fa-angle-down s2"aria-hidden="true"></i><!-- 下拉框 --><ul><li><a href="">企业购</a></li><li><a href="">公共频道</a></li><li><a href="">工业品</a></li></ul></li><p class="p1">|</p><li><span>客户服务</span> <i class="fa fa-angle-down s2" aria-hidden="true"></i></li><p class="p1">|</p><li><span>网站导航</span> <i class="fa fa-angle-down s2" aria-hidden="true"></i></li><p class="p1">|</p><li><span>手机京东</span></li><p class="p1">|</p><li><a href="">网站无障碍</a></li></ul></div></div></div>
</body></html>html：制作简易京东导航栏相关推荐
- html响应式导航栏制作,用Sass制作响应式导航栏(原创)
插件描述:用Sass制作响应式导航栏 更新时间:2017/12/29 下午8:33:04 更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面// 插入js代码 $(docu ...
- 手把手教你制作手机底部导航栏，领导看完都说好
手把手教你制作手机底部导航栏,领导看完都说好
- MIPCMS模板制作之过滤导航栏
文章目录[隐藏] 需求说明 MIPCMS 模板制作之过滤导航栏 我是用MIPCMS有段事件了,做了两个模板,其中一个虽然有 bug 但是还是上线了,地址时:https://heboy.me.这个网站是 ...
- 移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
- flutter制作具有自定义导航栏的渐进式 Web 应用程序
本文主要介绍具有自定义导航栏的渐进式 Web 应用程序 gitee github 哔哩哔哩 第一节 第二节 第三节 让我们准备我们的 - "Main.dart" 我们将整个页面分成 ...
- php 京东首页分类导航,仿京东导航栏
摘要: 仿京东顶部导航栏 仿京东顶部导航栏 *{ margin:0px; padding:0px; } .header{ width:100%; height:35px; background-co ...
- 怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
- HTML+CSS 创建京东导航栏
使用HTML+CSS 搭建京东首页导航栏,主要实现的功能: 静态部分以及鼠标移入显示下拉列表信息 位置和向下图标使用Font Awesome图标字体库 <!DOCTYPE html> &l ...
- css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- css3制作炫酷导航栏效果 转
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
最新文章
- LVS负载均衡的简单实现
- python爬虫软件-Python爬虫工具篇 - 必会用的6款Chrome插件
- [YTU]_2445(C++习题 输入输出--公用继承)
- Android Jetpack组件之数据库Room详解(二)
- 替代密码的c语言程序,替代密码及置换密码的C语言实现.doc
- mysql 查询用户权限
- 安装，激活（不更新升级）Navicat premium12.0.24（12.0.18）
- python cmp_to_key
- 结构化随机森林 代码说明
- 利用LSTM自动生成中文文本
- php 修改图像大小,如何改变图片大小
- 野蛮人传教士问题（上）
- linux操作TF卡的命令
- PE系统优盘制作教程
- PMP分享｜不在挣扎中蜕变，就在安逸中消亡
- 自定义小部件Widget的探讨
- Omit和Exclude的区别
- U盘启动盘装系统Win10教程
- HTML添加背景音乐/视频
- Vim - 官方网站