html京东下拉菜单设置,实现京东导航栏的下拉框
/* 解决高度塌陷的问题 */
.clearfix::before,
.clearfix::after{
content: table;
clear:both;
}
body{
/* 设置字体以及字体的大小和行高 */
font: 12px/5.5 微软雅黑;
}
.top-bar-wrapper{
/* 设置盒子宽度 */
width: 100%;
/* 设置盒子高度 */
height: 30px;
/* 设置行高 */
line-height: 30px;
/* 设置背景颜色 */
background-color: #E3E4E5;
/* 设置边框样式 */
border-bottom: 1px #dddddd solid;
}
/* 设置字体的样式及颜色 */
.top-bar a,
.top-bar span,
.top-bar i{
color: #999;
text-decoration: none;
}
/* 设置导航栏的鼠标移入改变颜色的功能 */
.top-bar a:hover,
.top-bar a.color-a{
color: #f36162;
}
/* 设置内部容器的样式 */
.top-bar{
/* 固定宽度 */
width: 1190px;
/* 设置水平居中 */
margin: 0 auto;
/* 设置一个相对定位 */
position: relative;
}
/* 定义向左浮动 */
.location{
float: left;
}
/* 设置小图标的颜色 */
.location .fas{
color: #f10215;
}
/* 设置城市弹窗列表 */
.location .city-list{
/* 设置一个自动隐藏功能 */
display: none;
width: 320px;
height: 460px;
background-color: #fff8f8;
/* 表示边框线宽度 1像素,实心线,定义颜色 */
border: 1px solid #cccccc ;
/* 设置绝对定位,使其显示使不占用页面位置 */
position: absolute;
/* 这里设置作用是向上移动一个像素 */
top: 31px;
/* 为避免弹窗被其他元素盖住,设置一个较高的层级 */
z-index: 999;
/* 给边框添加阴影 x轴偏移量 y轴偏移量 阴影模糊半径 阴影颜色*/
box-shadow: 0 2px 2px rgb(0, 0 ,0, .2);
}
/* 当鼠标移入到location时,让city-list 元素显示出来 */
/* 注意,只有将 */
.location:hover .city-list{
display: block;
}
/* 增加一个鼠标移入后背景颜色改变的效果 */
.current-city{
/* 增加一个内边距效果 */
padding: 0 10px;
/* 设置一个相对定位 */
position: relative;
/* 新增一个层级 */
z-index: 99999;
}
/* 设置current-city 鼠标移入后的效果 */
.location:hover .current-city{
/* 设置背景颜色 */
background-color: #ffffff;
/* 设置边框颜色 */
border: 1px solid rgb(204, 204 ,204);
/* 描述下边框的样式及定义样式 */
border-bottom: none;
/*
padding-bottom 是指一个元素在内边距区域
(padding area)中下方的高度。内边距(padding)
是指一个元素的内容和边框之间的区域
*/
padding-bottom: 1px;
}
/* 定义向右浮动 */
.shortcut{
float: right;
}
/* 设置分割线的样式及颜色 */
.shortcut .line{
width: 1px;
height: 10px;
background-color: #cccccc;
/* 位置调整 */
margin: 10px 12px;
}
/* 定义li 向左浮动 */
.shortcut li{
float: left;
}
/* 调整图标图标的上下位置 */
.shortcut .fas{
margin: 10px 0 0 5px;
}
北京
你好,请登录
免费注册
- 我的订单
我的京东
- 京东会员
企业采购
客户服务
网站导航
- 手机京东
html京东下拉菜单设置,实现京东导航栏的下拉框相关推荐
- vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单 引入顶部导航栏 使用下拉菜单 获取Vuex store数据 配置Vuex store 定义logout方法 引入顶部导航栏 创建client/s ...
- 鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
- ios 系统状态栏样式修改_超简单!!! iOS设置状态栏、导航栏按钮、标题、颜色、透明度,偏移等...
原标题:超简单!!! iOS设置状态栏.导航栏按钮.标题.颜色.透明度,偏移等 1. 要实现以下这些效果都非常简单 2. 废话不多说,先看看实现效果 3. 下面告诉你我为什么说实现这些效果非常简单 比 ...
- android 固定底部导航,如何设置android底部导航栏位置固定在android
请帮我设置底部导航栏位置固定在底部, ,因为我在输入editText字段时遇到问题,底部导航栏向上移动并覆盖其他领域如何设置android底部导航栏位置固定在android 代码: xmlns:and ...
- html京东下拉菜单设置,div css下拉导航菜单(图+演示)
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
- 【BIEE】BI Publisher下拉菜单设置
在使用BIEE的过程中,通常会有需要根据下拉菜单所选内容进行数据展示,如下图所示: 设置参数 进入数据模型编辑界面→参数 新增参数,P_DATADATE为示例参数 参数赋值 同时点击"值列表 ...
- html给下拉菜单设置背景色,如何更改下拉菜单活动背景的颜色(即。tk.列表框)在一个ttk.组合框...
下面的代码创建一个ttk.组合框小工具:import tkinter.ttk as ttk default_values = ['Peter','Scotty','Walter','Scott','M ...
- CSS样式:小米商城导航栏及下拉菜单小项目
小米商城 一.Html网页 二.CSS美化样式 三.成果图 一.Html网页 <!DOCTYPE html> <html lang="en"><hea ...
- Android m 自定义下拉菜单,Android实现动画效果的自定义下拉菜单功能
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
- php 下拉菜单 多个值,PHP,而foreach下拉菜单在所有下拉菜单中都具有相同的选定值...
3个带值的下拉菜单 $options1 = array( 1=>'= Equals', '≠ Does not Equal', '> Is greater than', '≥ Is gre ...
最新文章
- Java设计模式—代理模式
- Error: Visual Inheritance is currently disabled because the base … (NET CF)
- 车载安卓导航一键root_听说比Carplay牛 率先体验华为HiCar车载互联
- AcWing 164. 可达性统计
- 如何修改被编译后DLL文件
- How to handle the generic error Cannot read property md of undefined
- 小强系列之大话移动测试
- mysql union_Mysql union和union all用法
- MySQL中的翻页优化和延迟缓存
- extjs中滚动条属性_36个工作中常用的JavaScript函数片段「值得收藏」
- FragmentSharedFabTransition
- linux下latex使用教程,LaTeX使用--XeLaTeX入门基础(二)
- 小红书小程序x-sign加密算法解析
- 设计师和程序员必备5个超赞的配色工具,从此配色无忧!
- 如何与新同事共同成长?
- 项目中分页查询得实现
- 华三交换机如何进入配置_H3C交换机恢复出厂和各种基本配置方法
- Linux命令curl详解(一)
- CentOS系统下Tomcat无法正常启动解决(8005端口不能启动)
- Redis集群原理与容器化部署集群
热门文章
- CSS backdrop-filter 和filter两种高斯模糊的区别
- 一篇文章“简单”认识《生成对抗网络》(GAN)
- 太阳高度角计算题_【高考地理】地理计算题型汇总(附太阳高度角专题设计)...
- mysql ndb 命令_MySQL NDB Cluster环境启动与关闭
- vector的小用法
- 什么是pisa测试_PISA测试是什么?
- 5款高质量app界面ui设计实例欣赏
- 教你如何用C/C++做高大上的软件界面
- CF1132D Stressful Training Solution
- 2300专项:D. Stressful Training(二分 充电)