AmazeUI底部导航栏与分享按钮的示例代码


Posted in HTML / CSS onAugust 18, 2020

手机端页面的底部导航栏,仿照安卓、IOS等Apps应用底部导航栏的设计。许许多多的移动端页面前端框架都有这个组件。AmazeUI也不例外。还提供了分享到站外的分享按钮,组件,完全不用自己写。直接提供国内主流网站的分享,没有那些传说中的facebook之流,完全不用自己改,其效果如下:

AmazeUI底部导航栏与分享按钮的示例代码

其代码如下:

<!--使用HTML5开发-->
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--自动适应移动屏幕-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!--优先使用webkit内核渲染-->
        <meta name="renderer" content="webkit">
        <!--不要被百度转码-->
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <!--以下才是引入amazeui资源-->
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <!--引入js的时候要注意,必须先引入jQuery,再引入amazeui,因为这个框架是基于jQuery开发的-->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <title>footer</title>
    </head>
<body>
 
<div class="am-navbar am-navbar-default" data-am-widget="navbar">
    <ul class="am-navbar-nav">
        <li>
            <a href="#">
                <span class="am-icon-home"></span>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="am-icon-user-md"></span>
                <span class="am-navbar-label">个人</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="am-icon-star"></span>
                <span class="am-navbar-label">收藏</span>
            </a>
        </li>
        <li data-am-navbar-share>
            <a>
                <span class="am-icon-share-square-o"></span>
                <span class="am-navbar-label">分享</span>
            </a>
        </li>
    </ul>
</div>
 
</body>
</html>

总结

到此这篇关于AmazeUI底部导航栏与分享按钮的示例代码的文章就介绍到这了,更多相关AmazeUI导航栏与分享按钮内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 #HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 #HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 #HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 #HTML / CSS
AmazeUI 面板的实现示例
Aug 17 #HTML / CSS
AmazeUI 列表的实现示例
Aug 17 #HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 #HTML / CSS
You might like
我的论坛源代码(四)
2006/10/09 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
Vue官网todoMVC示例代码
2018/01/29 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
Python中for循环和while循环的基本使用方法
2015/08/21 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Django 自动生成api接口文档教程
2019/11/19 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
中西医专业毕业生职业规划书
2014/02/24 职场文书
《海底世界》教学反思
2014/04/16 职场文书
学校标语大全
2014/06/19 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
开国大典观后感
2015/06/04 职场文书
员工旷工检讨书
2015/08/15 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL