html小米左侧导航栏,小米PC导航栏下拉.html
*{
margin: 0;
padding: 0;
list-style: none;/*清除点*/
text-decoration: none;/*清除下划线*/
}
nav{
width: 100%;
height: 40px;
background-color: #333333;
}
nav>ul>li{
display: inline-block;
line-height: 40px;
color: #424242;
margin-left: 2px;
}
nav>ul>li>a{
font-size: 12px;
color: #B0B0B0;
}
nav>ul>.nav-one{
margin-left: 17.5%;
}
nav>ul>.nav-two{
margin-left: 12%;
}
nav>ul>.nav-three{
width: 120px;
height: 40px;
background-color: #424242;
margin-left: 15px;
}
nav>ul>.nav-three>.iconfont{
font-size:18px;
color: #B0B0B0;
margin-left: 10px;
}
header{
width: 100%;
/* height: 100px; */
height: 55px;
background-color: lightblue;
/* overflow: hidden; */
position: relative;
}
header>.h-one{
width: 55px;
height: 55px;
background-color:#ff6700;
margin-top: 22.5px;
margin-left: 17.5%;
}
header>ul{
width: 650px;
height: 55px;
/* background-color: olive; */
margin-left: 30%;
margin-top: -55px;
}
header>ul>li{
display: inline-block;
line-height: 55px;
margin-left: 13px;
}
header>ul>li>a{
color: #333333;
}
header>.h-two{
width: 300px;
height: 55px;
background-color: orchid;
margin-left: 66%;
margin-top: -55px;
}
header>.h-two>input{
width: 245px;
height: 50px;
border: 1px solid #999999;
}
header>.h-two>.button{
width: 50px;
height: 50px;
border: 1px solid #999999;
background-color: white;
margin-top: -52px;
margin-left: 245px;
}
header>.h-two>.button>.iconfont{
font-size: 30px;
color: #616161;
font-weight: 600;
display: block;
margin-left: 8px;
margin-top: 8px;
}
.container{
margin: 0 auto;
/* margin-left: 17.5%; */
width: 1100px;
}
header .h-three{
position: absolute;
top: 55px;
width: 100%;
height: 230px;
background-color: #fff;
border-top: 1px solid #ccc;
box-shadow: 0 3px 3px #ccc;
display: none;
}
.three-list{
display: flex;
height: 230px;
align-items: center;
}
.ul-list li:hover{
color: #FF6700;
}
- 小米商城
- |
- MIUI
- |
- loT
- |
- 云服务
- |
- 金融
- |
- 有品
- |
- 小爱开放平台
- |
- 企业团购
- |
- 资质证照
- |
- 协议规则
- |
- 下载app
- |
- Select Location
- 登录
- |
- 注册
- |
- 消息通知
购物车(0)
- 小米手机
- Redim 红米
- 电视
- 笔记本
- 家电
- 路由器
- 智能硬件
$('header .ul-list li').hover(function() {
var index=$(this).index();
if(index<4){
$('.h-three').stop().slideDown(200);
$('.three-list').eq(index).show().siblings().hide();
}
else{
$('.h-three').stop().slideUp(200);
}
});
$('.ul-list').mouseleave(function(){
$('.h-three').stop().slideUp(200);
})
$('.h-three').hover(function(){
$(this).stop().slideDown(200);
},
function(){
$(this).stop().slideUp(200);
}
)
// $('header ul').on('mouseenter','header ul li',function(){
// $(this).children('div').slideToggle(200);
// });
// $('header ul').on('mouseleave','header ul li',function(){
// $(this).children('div').slideToggle(200);;
// });
一键复制
编辑
Web IDE
原始数据
按行查看
历史
html小米左侧导航栏,小米PC导航栏下拉.html相关推荐
- 微信小程序/网页/app/android等各种bar图标导航图标文章图标标题图标下拉/检索收藏上传客服等图标整理
在做微信小程序的时候,需要给底部放置图标.但是找了好久都没有找到自己想要的,适合的.后来我就把所有的小程序的图标都看了下.后来想想还是整理出来,方便自己以后用,也方便大家一下.我敢保证有你想要的,适合 ...
- 怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
- SharePoint:扩展DVWP - 第15部分:通过网站栏实现可维护的下拉框
本文的内容对于管理员来说都是些基础的SharePoint操作 ,目的是为接下来的DVWP扩展作准备.有经验的读者请略过. 为什么用网站栏实现下拉框? 网站栏可以用在多个地方.当使用查阅项类型的网站栏连 ...
- 仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单 首先,这是原网页的效果 接下来是html部分 <div class="box1"><ul id=" ...
- html+css+导航栏(垂直+水平+下拉式)
HTML+CSS 希望能每天更新 祷告吧kikikkk 导航栏 导航条基本上是一个链接列表所以使用 ul 和li元素非常有意义 垂直导航栏 需要 a元素的样式,建立一个垂直的导航栏 导航栏的各个格子宽 ...
- 纯CSS3编写的红色下拉导航菜单js特效代码
下载地址 一款纯css3 transition属性制作红色的导航菜单,鼠标悬停展开下拉菜单,支持三级下拉菜单代码.@charset "utf-8";/*导航栏*/.nav_menu ...
- Bootstrap带下拉的胶囊导航
带下拉的胶囊导航 下拉菜单组件(dropdown)是一个独立的组件,它可以和页面上的任何元素(如,按钮.导航等)进行组合,让相应的元素具有下拉功能. 如果把导航和下拉菜单进行组合,并让导航链接充当下拉 ...
- Bootstrap 带下拉的导航
下拉菜单(dropdown)是一个独立的组件,它可以与页面上任何元素(如,按钮.导航等)捆绑使用.可以为导航捆绑下拉菜单,来制作带下拉的导航. 如果要给导航的某个列表项添加下拉菜单,只需给相应的列表项 ...
- CSS 制作下拉导航
下拉菜单仍然是Web上流行的界面元素,虽然有一些纯Javascript 解决方案,但在禁用Javascript 的浏览器下,它却无能为力.因此,纯CSS的下拉菜单才是最好的选择. 这种技术及其简单,只 ...
- html京东下拉菜单设置,div css下拉导航菜单(图+演示)
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
最新文章
- JSON字符串 拼接与解析
- php array_multisort对数据库结果多个字段进行排序
- 【转载】JAVA内存模型和线程安全
- JAVA 作业:图形界面
- undefined reference to `vtable for XX::XX'
- category与extension
- 《Android Studio开发实战 从零基础到App上线》出版后记
- 数据挖掘十大算法之Apriori算法
- 太卷了,这篇 CPU Cache,估计没人看
- timestamp类型增加天、月、年后的时间
- 小程序的优势和劣势是什么?
- 微信公众号发红包 php,php微信公众号接口实现发红包的方法
- fullPage的简单使用
- java如何设置成中文字体,Java程序中文字体配置
- 计算机不断自动重启,电脑不断自动重启怎么办_解决电脑不断自动重启的方法...
- linux下好玩的文本工具-figlet
- easyExcel合并单元格策略
- ESM2蛋白预训练模型 蛋白质、氨基酸向量表示
- CS党必须了解的P/NP常识
- 计算机网络----前言