[置顶] <无线自主点餐系统>html普通导航栏实现,仿宾之郎,不做商业用途
2017-09-06 09:17
295 查看
首先是想把我自己毕业设计的一小部分记录下来,从7月26号开始,到今天已经一个多月了,期间把需求文档和设计文档也写出来,不可能一点错误没有,等到全部做完我会po上来,当做给自己的大学四年画上句号。废话不多说,有做无线点餐系统可以关注我。
今天我只实现导航栏,翻看我之前发的就会发现,我是HTML新手小白。
这很容易看出来是实现li二级列表的滑动
css的代码:
body的代码:
js的代码:
注意:jquery-1.7.1.min.js要自己下载
今天我只实现导航栏,翻看我之前发的就会发现,我是HTML新手小白。
这很容易看出来是实现li二级列表的滑动
css的代码:
header{ width: 100%; height: 91px; background-color: #c9151e; overflow: hidden; } header section{ width: 1200px; height: 91px; margin: 0 auto; background-color: white; } header section .logo{ width: 166px; height: 91px; float: left; background-repeat: no-repeat; background-image: url(img/logo_02.png); } #logoImg{ position: absolute; top: 0px; left: 10px; width: 300px; height: 91px; } header section .nav{ width: 804px; height: 91px; float: left; } header section .nav ul{ list-style: none; padding: 0; width: 804px; height: 91px; } header section .nav ul .li{ width: 100.5px; height: 91px; float: left; text-align: center; line-height: 91px; font-size: 14px; } header section .nav ul .li .a{ /*color: #555555;*/ text-decoration: none; display: inline-block; height: 16px; line-height: 16px; border-left: 1px solid #E8E8E8; width: 100.5px; text-align: center; font-family: "微软雅黑",sans-serif; } header section .nav ul .li:hover .a{ color: #C9151E; } header section .nav ul .li:hover .firsta{ color: #C9151E; } header section .nav ul .li ul{ width: 240px; padding: 0; list-style: none; z-index: 50; position: absolute; height: 0; overflow: hidden; } header section .nav ul .li ul li{ height: 0px; width: 240px; border-bottom: 1px solid #E8E8E8; background-color: rgba(255,255,255,.9); line-height: 50px; text-align: left; } header section .nav ul .li:hover ul li{ height: 50px; } header section .nav ul .li:hover ul { border-top: 3px solid #C9151E; height: auto; } header section .nav ul .li ul li a{ color: #555555; text-decoration: none; border: none; width: auto; margin-left: 40px; /*position: absolute;*/ /*z-index: 10;*/ } header section .nav ul .li ul li:hover a{ color: #C9151E; font-weight: bold; } header section .icon{ width: 185px; height: 91px; float: left; list-style: none; padding: 0; } #qr{ width: 100px; height: 120px; } header section .icon li{ height: 34px; width: 34px; border: solid 1px #D3AC5C; border-radius: 17px; float: left; margin-left: 6px; margin-top: 27.5px; background-image: url(img/top_email.png); cursor:pointer; background-size: 25px; background-position: center; background-repeat: no-repeat; } header section .right{ width:45px ; height: 91px; float: left; background-repeat: no-repeat; background-image: url(img/head_bg.png); } header section .right div{ margin-left: 100%; background-color: #e50014; height: 91px; width: 1000px; } header section .icon div:hover{ border: #c9151e 1px solid; background-color: #c9151e; } header section .icon .two{ background-image: url(img/erweima.png); } header section .icon .three{ position: relative; background-image: url(img/sousuo.png); } header section .icon .four{ background-image: url(img/tel.png); } header section .icon input{ height: 34px; width: 0px; border-radius: 18px; border: solid 1px #D3AC5C; position: absolute; right: -1px; top: -1px; text-indent: 2em; display: none; outline: none; } header section .icon .three:hover input{ width: 220px; border: solid 1px #D3AC5C; display: block; } header section .icon .two{ overflow: hidden; } header section .icon .two .a{ position: absolute; width: 120px; height: 0px; border: 1px solid transparent; background: none; border-radius: 0; z-index: 100; margin: 0; padding: 0; background-color: white; overflow: hidden; margin-top: 45px; margin-left: -45px; } header section .icon .two .a div{ width: 120px; height: 100px; padding-left: 10px; margin-top: 5px; background: none; border-radius: 0; border: none; position: absolute; top: 0; } header section .icon .two .a span{ display: block; width: 120px; height: 20px; text-align: center; line-height: 20px; color: #C8C8C8; position: absolute; bottom: 0; padding-bottom: 10px; /*font-family: "微软雅黑",sans-serif;*/ /*font-weight: normal;*/ font-size: 14px; color: #555555; } header section .icon .two:hover .a{ /*display: block;*/ height: 140px; border: 1px solid #D3AC5C; } header section .icon .one:hover{ background-image: url(img/email_bai.png); } header section .icon .two:hover{ background-image: url(img/erweima_bai.png); } header section .icon .three:hover{ background-image: url(img/sousuo_bai.png); } header section .icon .four:hover{ background-image: url(img/tel_bai.png); } header section .icon li:hover{ background-color: #C9151E; border: 1px solid #C9151E; } #logoImg{ position: absolute; left: 25px; }
body的代码:
<header> <section> <div class="logo"> <img id="logoImg" src="img/logo.png"> </div> <div class="nav"> <ul> <li class="li"> <a href="AdministratorMain.html" target="_blank"class="firsta">首页</a></li> <li class="li"> <a href="#" target="_blank" class="a">餐桌信息</a> <ul> <li><a href="../Table/Table.html">添加餐桌信息</a></li> </ul> </li> <li class="li"> <a href="#" target="_blank" class="a">菜品信息</a> <ul> <li><a href="#" target="_blank">添加菜品信息</a></li> <li><a href="#" target="_blank">修改菜品信息</a></li> <li><a href="#" target="_blank">屏蔽菜品信息</a></li> </ul> </li> <li class="li"> <a href="#" target="_blank" class="a">服务员信息</a> <ul> <li><a href="#" target="_blank">添加服务员信息</a></li> <li><a href="#" target="_blank">查询服务员信息</a></li> <li><a href="#" target="_blank">修改服务员信息</a></li> <li><a href="#" target="_blank">删除服务员信息</a></li> </ul> </li> <li class="li"> <a href="#" target="_blank" class="a">优惠券</a> <ul> <li><a href="#" target="_blank">发放优惠券</a></li> <li><a href="#" target="_blank">查询优惠券信息</a></li> </ul> </li> <li class="li"> <a href="#" target="_blank" class="a">折扣信息</a> <ul> <li><a href="#" target="_blank">菜价优惠</a></li> <li><a href="#" target="_blank">办理会员</a></li> </ul> </li> <li class="li"><a href="#" target="_blank" class="a">查看评价</a></li> <li class="li"><a href="#" target="_blank" class="a">数据分析</a></li> </ul> </div> <ul class="icon"> <li class="one"></li> <li class="two"> <div class="a"> <div ><img id="qr" src="img/qr.jpg"/></div> <span>扫描二维码</span> </div> </li> <li class="three"> <input type="text" name="search" placeholder="请输入关键词"/> </li> <li class="four"></li> </ul> <div class="right"> <div></div> </div> </section> </header>
js的代码:
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script> jQuery(function($){ $('#demo1').slideBox(); $('#demo2').slideBox({ direction : 'top',//left,top#方向 duration : 0.3,//滚动持续时间,单位:秒 easing : 'linear',//swing,linear//滚动特效 delay : 5,//滚动延迟时间,单位:秒 startIndex : 1//初始焦点顺序 }); $('#demo3').slideBox({ duration : 0.3,//滚动持续时间,单位:秒 easing : 'linear',//swing,linear//滚动特效 delay : 5,//滚动延迟时间,单位:秒 hideClickBar : false,//不自动隐藏点选按键 clickBarRadius : 10 }); $('#demo4').slideBox({ hideBottomBar : true//隐藏底栏 }); }); </script>
注意:jquery-1.7.1.min.js要自己下载
相关文章推荐
- 利用html 自身支持的<meta>实现页面过渡特效
- <1>c语言实现ATM存取款系统(数组)
- html的<marquee></marquee>标签实现滚动效果
- < < PXE实现Linux系统无人值守批量安装 > >
- <3>c语言实现ATM存取款系统(数组实现)
- 利用HTML的<meta>实现页面跳转
- Html --用简单的<hr>实现多样化分割效果
- <C语言>使用一个二维数组实现学生姓名管理系统,要求不能使用链表
- <<Linux内核设计与实现>>读书笔际(五)-系统调用
- 导航栏-- HTML中的<UL>标签中li横向排列
- HTML实现置顶-->火箭置顶
- <html5+css3+js>javascript实现图片滚动播放功能
- <java代码> 实现Unix时间戳(Unix timestamp)与普通时间 之间的相互转换
- <模拟飞机票订票和退票系统>的c++实现
- <转>Win7系统下利用U盘安装Ubuntu_12.04实现双系统教程
- HTML的<a>标签点击实现不跳转
- <iOS 导航栏>第一节:导航栏透明方法实现代码
- <5>c语言实现ATM存取款系统(文件、排序)
- <ios>调用系统的短信和发送邮件功能,实现短信分享邮件分享
- HTML中的<a>标签属性统一设置-如‘新窗口打开’