精华内容
下载资源
问答
  • 微站底部导航菜单html源码
  • html 导航栏

    2019-03-25 01:09:40
    NULL 博文链接:https://qinya.iteye.com/blog/1142268
  • 一个HTML5底部导航栏特效,显示在网页最底部的小菜单栏,页脚导航特效,带动画特效,右侧还有小图标,美化的挺漂亮,CSS3代码,运行于支持HTML5的浏览器中,移动设备的浏览器效果最佳。
  • HTML5手机底部菜单

    2016-12-08 08:49:18
    手机底部菜单
  • 手机网页底部悬浮固定导航1.所含文件:index.html,wap.css,ico.png2.文件说明:index.html文件为演示文件,双击或者在运行环境中浏览器打开即可看到效果
  • 手机底部导航栏完整代码

    千次阅读 2020-07-06 17:12:10
    以下是手机底部导航栏完整代码HTML文件代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" ...

    效果体验:http://hovertree.com/texiao/mobile/5.htm

    可以使用手机浏览器查看体验效果。

    以下是手机底部导航栏完整代码,HTML文件代码:

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>手机底部导航栏 - 何问起</title><base target="_blank"/>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/mobile/5/hovertreebottom.css" media="all">
    </head>
    <body>
    <div class="bg"></div>
    <div class="hovertreebottom">
    <nav>
    <div id="hovertreebottom_ul">
    <ul class="box">
    <li>
    <a href="javascript:;" class=""><span>何问起</span></a>
    <dl>
    <dd><a href="http://hovertree.com"><span>首页</span></a></dd>
    <dd><a href="http://hovertree.com/texiao/"><span>特效</span></a></dd>
    <dd><a href="http://hovertree.com/menu/aspnet/"><span>ASP.NET</span></a></dd>
    <dd><a href="http://hovertree.com/down/"><span>源码下载</span></a></dd>
    <dd><a href="http://hovertree.com/hvtart/bjae/j0x9ww3x.htm"><span>原文</span></a></dd>
    </dl>
    </li>
    <li>
    <a href="javascript:;" class=""><span>柯乐义</span></a>
    <dl>
    <dd><a href="http://keleyi.com"><span>首页</span></a></dd>
    <dd><a href="http://keleyi.com/a/bjad/5vw5k0au.htm"><span>CSS3旋转</span></a></dd>
    <dd><a href="http://tool.keleyi.com/"><span>工具</span></a></dd>
    <dd><a href="http://keleyi.com/menu/jquery/"><span>jQuery</span></a></dd>
    </dl>
    </li>
    <li>
    <a href="javascript:;" class="on"><span>HoverTree</span></a>
    <dl>
    <dd><a href="http://m.hovertree.com/"><span>谜语</span></a></dd>
    <dd><a href="http://m.hovertree.com/yzdd/bjae/a8rbum7w.htm"><span>看图回答</span></a></dd>
    <dd><a href="http://m.hovertree.com/miyu/bjae/m81a842g.htm"><span>何问起(猜字)</span></a></dd>
    <dd><a href="http://hovertree.com/menu/sqlserver/"><span>Sql Server</span></a></dd>
    </dl>
    </li>
    
    </ul>
    </div>
    </nav>
    <div id="hovertreebottom_masklayer" class="masklayer_div on">&nbsp;</div>
    </div>
    <script src="http://hovertree.com/texiao/mobile/5/hovertreebottom.js"></script>
    <script type="text/javascript">
    hovertreebottom.bindClick(document.getElementById("hovertreebottom_ul").querySelectorAll("li>a"), document.getElementById("hovertreebottom_masklayer"));
    </script>
    </body>
    </html>

     

     

    当一级菜单的样式为 class="on" 时,默认是自动弹出子菜单
    例如
    <a href="javascript:;" class="on"><span>HoverTree</span></a>

    web前端资源: http://www.cnblogs.com/jihua/p/webfront.html

    展开全文
  • app 底部导航栏代码的实现

    千次阅读 2019-03-13 09:12:34
    api.css html{ font-family: sans-serif;...html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption...

    api.css

    html{
    	font-family: sans-serif;
    }
    html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,h1,h2,h3,h4,h5,h6,p{
    	margin:0;
    	border:0;
    	padding:0;
    	font-style:normal;
    }
    html,body {
    	-webkit-touch-callout:none;
    	-webkit-text-size-adjust:none;
    	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    	-webkit-user-select:none;
    	background-color: #fff;
    }
    nav,article,aside,details,main,header,footer,section,fieldset,figcaption,figure{
    	display: block;
    }
    img,a,button,em,del,strong,var,label,cite,small,time,mark,code,textarea{
    	display:inline-block;
    }
    header,section,footer {
    	position:relative;
    }
    ol,ul{
    	list-style:none;
    }
    input,button,textarea {
    	border:0;
    	margin:0;
    	padding:0;
    	font-size:1em;
    	line-height:1em;
    	/*-webkit-appearance:none;*/
    	background-color:rgba(0, 0, 0, 0);
    }
    span{
    	display:inline-block;
    }
    a:active, a:hover {
      outline: 0;
    }
    a, a:visited{
    	text-decoration:none;
    }
    
    label, .wordWrap{
        word-wrap: break-word;
        word-break: break-all;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    td,th {
      padding: 0;
    }
    .clearfix:after{
    	content: ' ';
    	display: block;
    	clear: both;
    	visibility:hidden;
    	line-height: 0;
    	height:0;
    }
    .loading_more{
    	display: block;
    	height: 1.5em;
    	width: 100%;
    }
    .loading_more:before {
    	display: inline-block; vertical-align: text-bottom;
    	content: ' '; height: 16px; width: 16px; margin-right: 6px;
    	background: url(../image/loading_more.gif) no-repeat center;
    	-webkit-background-size: contain;
    	background-size: contain;
    } 
    .loading_more:after {
    	content: '加载更多';	
    }

    style.css 

    html,body {  font-size:14px; height:100%;  }
    .hover{ opacity: .8; }
    
    .flex-wrap{ display: -webkit-box;	display: -webkit-flex;	display: flex; }
    .flex-con{     -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1;}
    .flex-vertical{ -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}
    
    .border-t,
    .border-b{ position:relative;  }
    .border-t:before,
    .border-b:after{     content: '';     position: absolute;     left: 0;  top:0;     background: #ddd;   right:0;    height: 1px;     -webkit-transform: scaleY(0.5);             transform: scaleY(0.5);     -webkit-transform-origin: 0 0;             transform-origin: 0 0; }
    .border-b:after{ top:auto; bottom:0;  }
    
    #wrap{ height: 100%; }

    index.html 

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>底部导航</title>
        <link rel="stylesheet" type="text/css" href="./css/api.css"/>
        <link rel="stylesheet" type="text/css" href="./css/style.css"/>
        <style>
            header{ background-color: #f2f2f2; }
            header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
            header ul li.active{ display: block; }
            #footer{  background-color: #f2f2f2; }
            #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
            #footer ul li.active{ color: #6ab494; }
            #footer ul li:nth-child(1){ background-image: url(./image/shouyes.png); }
            #footer ul li:nth-child(2){ background-image: url(./image/publics.png); }
            #footer ul li:nth-child(3){ background-image: url(./image/guanlis.png); }
            #footer ul li:nth-child(4){ background-image: url(./image/mys.png); }
            #footer ul li:nth-child(1).active{ background-image: url(./image/shouye.png); }
            #footer ul li:nth-child(2).active{ background-image: url(./image/public.png); }
            #footer ul li:nth-child(3).active{ background-image: url(./image/guanli.png); }
            #footer ul li:nth-child(4).active{ background-image: url(./image/my.png); }
            .flex-con{
              overflow: auto
            }
        </style>
    </head>
    <body>
    <div id="wrap" class="flex-wrap flex-vertical">
        <header>
            <ul>
                <li class="border-b active" >首页</li>
                <li class="border-b" >我的发布</li>
                <li class="border-b" >管理历史发布</li>
                <li class="border-b" >我的资料</li>
            </ul>
        </header>
        <div id="main" class="flex-con">
        </div>
        <div id="footer" class="border-t">
            <ul class="flex-wrap" >
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >首页</li>
                <li tapmode="hover"  onclick="randomSwitchBtn( this );" class="flex-con" >发布</li>
                <li tapmode="hover"  onclick="randomSwitchBtn( this );" class="flex-con">管理</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >我的</li>
            </ul>
        </div>
    </div
    </body>
    </html>
    <script type="text/javascript" src="script/api.js"></script>
    <script type="text/javascript">
        apiready = function () {
            $api.fixStatusBar( $api.dom('header') );
            api.setStatusBarStyle({
                style: 'dark',
                color: '#6ab494'
            });
            funIniGroup();
        }
    
        function funIniGroup(){
            var eHeaderLis = $api.domAll('header li'),
                frames = [];
            for (var i = 0,len = eHeaderLis.length; i < len; i++) {
                    frames.push( {
                        name: 'frame'+i,
                        url: './html/frame'+i+'.html',
                        bgColor : 'rgba(0,0,0,.2)',
                        bounces:true
                    } )
            }
            api.openFrameGroup({
                name: 'group',
                scrollEnabled: false,
                rect: {
                    x: 0,
                    y: $api.dom('header').offsetHeight,
                    w: api.winWidth,
                    h: $api.dom('#main').offsetHeight
                },
                index: 0,
                frames: frames
            }, function (ret, err) {
    
            });
        }
    
        // 随意切换按钮
        function randomSwitchBtn( tag ) {
            if( tag == $api.dom('#footer li.active') )return;
            var eFootLis = $api.domAll('#footer li'),
                eHeaderLis = $api.domAll('header li'),
                index = 0;
            for (var i = 0,len = eFootLis.length; i < len; i++) {
                if( tag == eFootLis[i] ){
                    index = i;
                }else{
                    $api.removeCls(eFootLis[i], 'active');
                    $api.removeCls(eHeaderLis[i], 'active');
                }
            }
            $api.addCls( eFootLis[index], 'active');
            $api.addCls( eHeaderLis[index], 'active');
            api.setFrameGroupIndex({
                name: 'group',
                index: index
            });
        }
    </script>
    

    展开全文
  • HTML5--底部导航

    千次阅读 2018-11-06 17:22:06
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" ...

    code:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<style>
    			*{
    				margin: 0;
    			}
    			body{
    				font-size: 14px;
    				background: #eee;
    				padding-bottom: 60px;
    				
    			}
    			a{
    				text-decoration: none;
    				color: #333;
    			}
    			
    			.footer{
    				display: flex;
    				position: fixed;
    				bottom: 0;
    				left: 0;
    				right: 0;
    				background: #fff;
    				height: 50px;
    			}
    			.footer .tab{
    				flex: 1;
    				text-align: center;
    				box-sizing: border-box;
    				padding: 5px 0;
    				
    			}
    			.icon{
    				display: block;
    			}
    			.icon img{
    				width: 16px;
    				height: 16px;
    			}
    			.footer .tab a{
    				display: block;
    				height: 50px;
    				line-height: 20px;
    			}
    		</style>
    	</head>
    	<body>		
    		<div class="footer">
    			<div class="tab">
    				<a href="javascript:;">
    					
    					<i class="icon">
    						<img src="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1024 1024%22%3E%3Cpath d%3D%22M898.8 987.2H695.6c-11.6 0-21-9.4-21-21 0-3.1-.3-319.6-.3-322.8v-.2c0-4.2-1.8-8.1-5-10.9-6-5-15.1-4.3-20.2 1.7-.1.1-.2.2-.2.3l-28 33c-12.3 14.5-30.2 22.8-49.2 22.8H452.4c-19 0-37-8.3-49.2-22.8l-28-33c-.1-.1-.2-.2-.2-.3-5.1-6-14.2-6.7-20.2-1.7-3.2 2.7-5.1 6.7-5 10.9v.2c0 13.1.7 319.7.7 322.8 0 5.6-2.2 10.9-6.2 14.8-3.9 3.9-9.3 6.2-14.8 6.2H125.2C87 987.2 56 956.1 56 918V451c0-36.3 14-66.6 43-92.6.3-.2.5-.5.8-.7L462.4 64C480 48.4 500 40.4 520.3 40.8c19.9.3 39.8 8.7 57.3 24.3l348.7 287.8c.2.2.4.3.6.5 21 18.7 43.2 43.3 41 99.2V918c.1 38.1-31 69.2-69.1 69.2zm-182.3-42h182.2c15 0 27.2-12.2 27.2-27.2V452.1v-.9c1.7-40.8-12.7-53.8-26.7-66.3L550.6 97.2c-.2-.2-.4-.4-.6-.5-20.3-18.1-40.5-18.5-60-1-.3.2-.5.4-.8.7L126.7 390C107.1 407.7 98 427.1 98 451v466.9c0 15 12.2 27.2 27.2 27.2h183.2c-.2-70.9-.7-296.8-.7-301.7-.1-16.8 7.2-32.6 20.1-43.4 23.5-19.6 58.6-16.8 78.7 6.1.1.2.3.3.4.5l28.3 33.4c4.3 5 10.5 7.9 17.2 7.9h119.1c6.7 0 12.9-2.9 17.2-7.9l28.3-33.4c.1-.2.3-.3.4-.5 20.1-23 55.2-25.8 78.7-6.1 12.9 10.8 20.2 26.6 20.1 43.3.1 12.2.3 232.1.3 301.9z%22%2F%3E%3C%2Fsvg%3E" />
    					</i>
    					
    					<span>
    						首页
    					</span>
    					
    				</a>
    			</div>
    			<div class="tab">
    				<a href="javascript:;">
    					<i class="icon">
    						<img src="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1024 1024%22%3E%3Cpath d%3D%22M898.8 987.2H695.6c-11.6 0-21-9.4-21-21 0-3.1-.3-319.6-.3-322.8v-.2c0-4.2-1.8-8.1-5-10.9-6-5-15.1-4.3-20.2 1.7-.1.1-.2.2-.2.3l-28 33c-12.3 14.5-30.2 22.8-49.2 22.8H452.4c-19 0-37-8.3-49.2-22.8l-28-33c-.1-.1-.2-.2-.2-.3-5.1-6-14.2-6.7-20.2-1.7-3.2 2.7-5.1 6.7-5 10.9v.2c0 13.1.7 319.7.7 322.8 0 5.6-2.2 10.9-6.2 14.8-3.9 3.9-9.3 6.2-14.8 6.2H125.2C87 987.2 56 956.1 56 918V451c0-36.3 14-66.6 43-92.6.3-.2.5-.5.8-.7L462.4 64C480 48.4 500 40.4 520.3 40.8c19.9.3 39.8 8.7 57.3 24.3l348.7 287.8c.2.2.4.3.6.5 21 18.7 43.2 43.3 41 99.2V918c.1 38.1-31 69.2-69.1 69.2zm-182.3-42h182.2c15 0 27.2-12.2 27.2-27.2V452.1v-.9c1.7-40.8-12.7-53.8-26.7-66.3L550.6 97.2c-.2-.2-.4-.4-.6-.5-20.3-18.1-40.5-18.5-60-1-.3.2-.5.4-.8.7L126.7 390C107.1 407.7 98 427.1 98 451v466.9c0 15 12.2 27.2 27.2 27.2h183.2c-.2-70.9-.7-296.8-.7-301.7-.1-16.8 7.2-32.6 20.1-43.4 23.5-19.6 58.6-16.8 78.7 6.1.1.2.3.3.4.5l28.3 33.4c4.3 5 10.5 7.9 17.2 7.9h119.1c6.7 0 12.9-2.9 17.2-7.9l28.3-33.4c.1-.2.3-.3.4-.5 20.1-23 55.2-25.8 78.7-6.1 12.9 10.8 20.2 26.6 20.1 43.3.1 12.2.3 232.1.3 301.9z%22%2F%3E%3C%2Fsvg%3E" />
    					</i>
    					<span>
    						导航
    					</span>
    					
    				</a>
    			</div>
    			<div class="tab">
    				<a href="javascript:;">
    					<i class="icon">
    						<img src="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1024 1024%22%3E%3Cpath d%3D%22M898.8 987.2H695.6c-11.6 0-21-9.4-21-21 0-3.1-.3-319.6-.3-322.8v-.2c0-4.2-1.8-8.1-5-10.9-6-5-15.1-4.3-20.2 1.7-.1.1-.2.2-.2.3l-28 33c-12.3 14.5-30.2 22.8-49.2 22.8H452.4c-19 0-37-8.3-49.2-22.8l-28-33c-.1-.1-.2-.2-.2-.3-5.1-6-14.2-6.7-20.2-1.7-3.2 2.7-5.1 6.7-5 10.9v.2c0 13.1.7 319.7.7 322.8 0 5.6-2.2 10.9-6.2 14.8-3.9 3.9-9.3 6.2-14.8 6.2H125.2C87 987.2 56 956.1 56 918V451c0-36.3 14-66.6 43-92.6.3-.2.5-.5.8-.7L462.4 64C480 48.4 500 40.4 520.3 40.8c19.9.3 39.8 8.7 57.3 24.3l348.7 287.8c.2.2.4.3.6.5 21 18.7 43.2 43.3 41 99.2V918c.1 38.1-31 69.2-69.1 69.2zm-182.3-42h182.2c15 0 27.2-12.2 27.2-27.2V452.1v-.9c1.7-40.8-12.7-53.8-26.7-66.3L550.6 97.2c-.2-.2-.4-.4-.6-.5-20.3-18.1-40.5-18.5-60-1-.3.2-.5.4-.8.7L126.7 390C107.1 407.7 98 427.1 98 451v466.9c0 15 12.2 27.2 27.2 27.2h183.2c-.2-70.9-.7-296.8-.7-301.7-.1-16.8 7.2-32.6 20.1-43.4 23.5-19.6 58.6-16.8 78.7 6.1.1.2.3.3.4.5l28.3 33.4c4.3 5 10.5 7.9 17.2 7.9h119.1c6.7 0 12.9-2.9 17.2-7.9l28.3-33.4c.1-.2.3-.3.4-.5 20.1-23 55.2-25.8 78.7-6.1 12.9 10.8 20.2 26.6 20.1 43.3.1 12.2.3 232.1.3 301.9z%22%2F%3E%3C%2Fsvg%3E" />
    					</i>
    					<span>
    						我的
    					</span>
    					
    				</a>
    			</div>
    			<div class="tab">
    				<a href="javascript:;">
    					<i class="icon">
    						<img src="data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1024 1024%22%3E%3Cpath d%3D%22M898.8 987.2H695.6c-11.6 0-21-9.4-21-21 0-3.1-.3-319.6-.3-322.8v-.2c0-4.2-1.8-8.1-5-10.9-6-5-15.1-4.3-20.2 1.7-.1.1-.2.2-.2.3l-28 33c-12.3 14.5-30.2 22.8-49.2 22.8H452.4c-19 0-37-8.3-49.2-22.8l-28-33c-.1-.1-.2-.2-.2-.3-5.1-6-14.2-6.7-20.2-1.7-3.2 2.7-5.1 6.7-5 10.9v.2c0 13.1.7 319.7.7 322.8 0 5.6-2.2 10.9-6.2 14.8-3.9 3.9-9.3 6.2-14.8 6.2H125.2C87 987.2 56 956.1 56 918V451c0-36.3 14-66.6 43-92.6.3-.2.5-.5.8-.7L462.4 64C480 48.4 500 40.4 520.3 40.8c19.9.3 39.8 8.7 57.3 24.3l348.7 287.8c.2.2.4.3.6.5 21 18.7 43.2 43.3 41 99.2V918c.1 38.1-31 69.2-69.1 69.2zm-182.3-42h182.2c15 0 27.2-12.2 27.2-27.2V452.1v-.9c1.7-40.8-12.7-53.8-26.7-66.3L550.6 97.2c-.2-.2-.4-.4-.6-.5-20.3-18.1-40.5-18.5-60-1-.3.2-.5.4-.8.7L126.7 390C107.1 407.7 98 427.1 98 451v466.9c0 15 12.2 27.2 27.2 27.2h183.2c-.2-70.9-.7-296.8-.7-301.7-.1-16.8 7.2-32.6 20.1-43.4 23.5-19.6 58.6-16.8 78.7 6.1.1.2.3.3.4.5l28.3 33.4c4.3 5 10.5 7.9 17.2 7.9h119.1c6.7 0 12.9-2.9 17.2-7.9l28.3-33.4c.1-.2.3-.3.4-.5 20.1-23 55.2-25.8 78.7-6.1 12.9 10.8 20.2 26.6 20.1 43.3.1 12.2.3 232.1.3 301.9z%22%2F%3E%3C%2Fsvg%3E" />
    					</i>
    					<span>
    						中心
    					</span>
    					
    				</a>
    			</div>
    		</div>
    	</body>
    </html>
    

    effect:

    computer show

    phone show

    展开全文
  • 利用js和html做的一个简单底部菜单
  • 微信底部导航栏菜单

    2016-01-05 10:47:00
    一套几乎与微信底部导航栏一样的手机端底部导航栏代码
  • 一款取自国外某网站的纯CSS实现的始终固定在网页底部
  • HTML代码结构 <div className="nav-bar"> {/*清除浮动:一般一行排列而且使用了浮动元素的,都是要清楚浮动的,浮动的代码在初始化样式common.less中已经写好了*/} <ul className="clear-fix"> <...

    页面结构展示
    在这里插入图片描述

    HTML代码结构

    <div className="nav-bar">
    {/*清除浮动:一般一行排列而且使用了浮动元素的,都是要清楚浮动的,浮动的代码在初始化样式common.less中已经写好了*/}
    	<ul className="clear-fix">
    		<li>
    			<NavLink exact to="/">
    				<i className="iconfont icon-home"></i>
    				首页
    			</NavLink>
    		</li>
    		<li>
    			<NavLink to="/shop">
    				<i className="iconfont icon-shop"></i>
    				商城
    			</NavLink>
    		</li>
    		<li>
    			<NavLink to="/life">
    				<i className="iconfont icon-trophy"></i>
    				生活服务
    			</NavLink>
    		</li>
    		<li>
    			<NavLink to="/mine">
    				<i className="iconfont icon-mine"></i>
    				我的
    			</NavLink>
    		</li>
    	</ul>
    </div>
    

    CSS代码(使用less写的)

    .nav-bar {
    	background: #fff;
    	position: fixed;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	box-shadow: 0px 0px 0px #e1e1e1;
    	ul {
    		height: 1rem;
    		padding-top: 6.5px;
    		li {
    			float: left;
    			width: 25%;
    			text-align: center;
    			i {
    				display: block;
    				font-size: 20px;
    			}
    		}
    	}
    }
    
    展开全文
  • 小程序底部导航栏

    2020-06-09 18:19:02
    小程序底部导航栏 参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html 如何实现: 实现功能: 实现代码: "tabBar": { "color": "#353535", "selectedColor": "#09bb07...
  • css+html模仿京东app底部导航栏 完成效果如下: 上下滑动页面,底部导航栏一直存在,位置不变 底部导航栏实现代码如下: 只需css写超简单代码 重点是footer标签,其余标签是为和京东导航栏一样而设置的样式 footer ...
  • html 一款底部导航的实现

    千次阅读 2016-10-14 19:07:29
    </html> <!DOCTYPE html> <html> , initial-scale=1"> <script src="../js/jquery-1.11.3.min.js"></script> <script src="../js/jquery.mobile-1
  • 仿京东导航栏..
  • 仿京东导航栏

    2018-07-24 17:19:52
    仿京东导航栏,仿京东导航栏,仿京东导航栏仿京东导航栏
  • 固定顶部导航栏,在样式(css)中加入以下代码 position: fixed; ...固定底部导航栏,在样式(css)中加入以下代码 position:fixed; left:0; bottom:0; width: 100%; z-index: 1000; background
  • 使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一个下拉菜单,当鼠标滑向菜单时下拉展示全部菜单
  • 相信现在APP里面必不可少的功能就是 底部导航栏 ,因为它可以点击任意一个页面进行查看不同的商品 接下来给大家简单实际操作一把。 注意:Fragment页面没有写出自拟就好,第二种实现方法一定不能忘记写提交!!! 第...
  • 手机端页面的底部导航栏,仿照安卓、IOS等Apps应用底部导航栏的设计。许许多多的移动端页面前端框架都有这个组件。AmazeUI也不例外。还提供了分享到站外的分享按钮,组件,完全不用自己写。直接提供国内主流网站的...
  • HTML导航栏的四种制作方法

    万次阅读 多人点赞 2018-10-17 17:36:29
    1.首先,大家可以直接使用html5中的导航栏标签&lt;nav&gt;&lt;/nav&gt; 具体代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...
  • html中,固定在底部代码 这个方法简单好用。 运用这个CSS把DIV永远置于页面的底部 利用绝对定位,然后设置底部距离为0 <style> .footer{ left:0px; position:fixed; width:100%; height:30px; background-...
  • 导航栏固定到html底部 学习产出: 代码 <!-- 导航条start --> <!-- navbar-fixed-bottom固定在底部 --> <nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse"> <!-- ...
  • HTML5移动端导航栏

    2015-10-15 16:42:26
    HTML5移动端导航栏
  • 底部导航菜单 使用HTML和CSS的基于底部图标的导航栏 预览范例 图预览
  • 主要介绍了JS实现仿苹果底部任务菜单效果代码,可实现鼠标滑过显示大图标功能,涉及javascript鼠标事件及页面元素遍历并修改属性的技巧,需要的朋友可以参考下
  • html5-css3仿微信底部固定响应式导航菜单代码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,975
精华内容 7,590
关键字:

html底部导航栏代码