<无线自主点餐系统>html普通导航栏实现，仿宾之郎，不做商业用途

最新推荐文章于 2024-05-19 13:08:40 发布

置顶 zzh_rj

最新推荐文章于 2024-05-19 13:08:40 发布

阅读量1k

点赞数 3

分类专栏： html5 文章标签： html 毕业设计

本文链接：https://blog.csdn.net/zzh_rj/article/details/77862109

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先是想把我自己毕业设计的一小部分记录下来，从7月26号开始，到今天已经一个多月了，期间把需求文档和设计文档也写出来，不可能一点错误没有，等到全部做完我会po上来，当做给自己的大学四年画上句号。废话不多说，有做无线点餐系统可以关注我。
今天我只实现导航栏，翻看我之前发的就会发现，我是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要自己下载

zzh_rj

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
<无线自主点餐系统>html普通导航栏实现，仿宾之郎，不做商业用途

首先是想把我自己毕业设计的一小部分记录下来，从7月26号开始，到今天已经一个多月了，期间把需求文档和设计文档也出来，不可能一点错误没有，等到全部做完我会po上来，当做给自己的大学四年画上句号。废话不多说，有做无线点餐系统可以关注我。今天我只实现导航栏，翻看我之前发的就会发现，我是HTML新手小白。这很容易看出来是实现li二级列表的滑动 css的代码：header{ width:
复制链接

扫一扫

专栏目录