做一个底部导航栏的，主要有连接，关于我们，等等

最新推荐文章于 2023-08-28 12:03:31 发布
最新推荐文章于 2023-08-28 12:03:31 发布
阅读量604 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weijunbaoshuai/article/details/97648729
版权

前端我是用jsp写的，如果需要HTML，可以把开头的部分删除就行。

jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/footer.css" />
    </head>

    <body>
        <!--底部_start-->
        <div class="site-footer">
            <div class="footer-related">
                <div class="footer-article w1100">
                    <dl class="contact clearfix">
                        <dt class="fl">
                            <i class="iconfont"></i>
                        </dt>
                        <dd class="fl">
                            <p class="text">售前咨询热线</p>
                            <p class="tel">400-11111-111</p>
                            <a href="#">在线咨询</a>
                        </dd>
                    </dl>
                    <dl class="col-article">
                        <dt>电商产品</dt>
                        <dd>
                            <a href="#">云小店</a>
                        </dd>
                        <dd>
                            <a href="#">品牌商城</a>
                        </dd>
                        <dd>
                            <a href="#">商户商城</a>
                        </dd>
                        <dd>
                            <a href="#">批发商城</a>
                        </dd>
                        <dd>
                            <a href="#">招商加盟商城</a>
                        </dd>
                        <dd>
                            <a href="#">同城电商平台</a>
                        </dd>
                    </dl>
                    <dl class="col-article">
                        <dt>行业方案</dt>
                        <dd>
                            <a href="#">新零售</a>
                        </dd>
                        <dd>
                            <a href="#">O2O</a>
                        </dd>
                        <dd>
                            <a href="#">实体商超</a>
                        </dd>
                        <dd>
                            <a href="#">多供应商</a>
                        </dd>
                        <dd>
                            <a href="#">百货商场</a>
                        </dd>
                        <dd>
                            <a href="#">农村电商</a>
                        </dd>
                    </dl>
                    <dl class="col-article">
                        <dt>帮助中心</dt>
                        <dd>
                            <a href="#">新手运营手册</a>
                        </dd>
                        <dd>
                            <a href="#">视频教程</a>
                        </dd>
                        <dd>
                            <a href="#">云商城</a>
                        </dd>
                        <dd>
                            <a href="#">云物流</a>
                        </dd>
                        <dd>
                            <a href="#">更新日志</a>
                        </dd>
                        <dd>
                            <a href="#">商学院</a>
                        </dd>
                    </dl>
                    <!--关于我们-->
                    <dl class="col-article">
                        <dt>关于我们</dt>
                        <dd>
                            <a href="#">公司简介</a>
                        </dd>
                        <dd>
                            <a href="#">服务市场</a>
                        </dd>
                        <dd>
                            <a href="#">客户案例</a>
                        </dd>
                        <dd>
                            <a href="#">代理合作</a>
                        </dd>
                        <dd>
                            <a href="#">投诉建议</a>
                        </dd>
                        <dd>
                            <a href="#">站点地图</a>
                        </dd>
                    </dl>
                    <dl class="wx">
                        <dt>关注商之云</dt>
                        <dd>
                            <img src="../images/erweima.png">
                        </dd>
                        <dd class="other">
                            <span>分公司：</span>
                            <a href="#">北京</a>
                            <a href="#">上海</a>
                            <a href="#">杭州</a>
                            <a href="#">深圳</a>
                        </dd>
                    </dl>
                </div>
                <div class="footer-links w1100">
                    <p>友情链接：</p>
                    <div class="clearfix">
                        <a href="#">站点列表</a>
                        <a href="#">云商城</a>
                        <a href="#">云产品库</a>
                        <a href="#">收银狗</a>
                        <a href="#">神码收银</a>
                        <a href="#">云物流</a>
                        <a href="#">云ERP</a>
                        <a href="#">生鲜电商</a>
                        <a href="#">农村电商</a>
                        <a href="#">母婴电商</a>
                        <a href="#">电商学员</a>
                    </div>
                </div>
                <!--友情链接结束-->
                <div class="footer-info w1100">
                    <div class="info-text w1100">
                        <p class="copyright">
                            版权所有<em></em>
                            <a href="#">备案号</a>
                        </p>
                        <p class="company-info">863科技园2号楼3层</p>
                        <p class="qualified"></p>
                    </div>

                </div>
            </div>
        </div>
    </body>

    </html>

css:

@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.w1100 {
    width: 1100px;
    margin: 0 auto;
}

.fl {
    float: left;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}


/*消息*/

.validInfo {
    background-color: rgba(0, 0, 0, .6);
    width: 190px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 110px;
    font-size: 14px;
    display: none;
}


/*底部*/

.site-footer {
    font-size: 14px;
    line-height: 1.8;
    color: #a8aaba;
    background: #32333b;
}

.site-footer a {
    color: #a8aaba;
}

.site-footer a:hover {
    color: #f44 !important;
}

.site-footer .footer-article {
    padding: 30px 0 20px;
    overflow: hidden;
}

.site-footer .contact {
    float: left;
    width: 280px;
}

.site-footer .contact dt {
    width: 90px;
}

.site-footer .contact .iconfont {
    width: 66px;
    height: 66px;
    display: block;
    float: left;
    background: url(../images/kefu.png) center center no-repeat;
    background-size: 55px;
}

.site-footer .contact .text {
    font-size: 14px;
    line-height: 30px;
    color: #fff;
}

.site-footer .contact .tel {
    padding: 3px 0 15px;
    font-size: 20px;
    color: #fff;
}

.site-footer .contact a {
    display: block;
    width: 90px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    border: 0px solid #9b9ea0;
    border-radius: 4px;
    background: url(../images/qq1.gif);
    background-size: 100%;
}

.site-footer .contact a:hover {
    background: url(../images/qq.gif);
    background-size: 100%;
}

.site-footer .col-article {
    float: left;
    width: 171px;
}

.site-footer .col-article dt {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: normal;
    color: #d7d8d9;
}

.site-footer .col-article dd {
    margin-bottom: 8px;
    overflow: hidden;
}

.site-footer .col-article dd a {
    font-size: 12px;
    color: #9b9ea0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.site-footer .wx {
    float: left;
    width: 135px;
    margin-right: 0;
}

.site-footer .wx dt {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: normal;
    color: #d7d8d9;
}

.site-footer .wx dd {
    margin-bottom: 15px;
}

.site-footer .wx dd img {
    display: block;
    width: 110px;
    height: 110px;
    margin: 5px 0;
    border-radius: 2px;
}

.site-footer .wx dd.other {
    margin-bottom: 0;
    line-height: 18px;
}

.site-footer .wx dd.other span {
    display: block;
    font-size: 12px;
}

.site-footer .wx dd.other a {
    display: inline-block;
    margin-right: 5px;
    font-size: 12px;
    line-height: 18px;
    vertical-align: top;
}

.footer-links {
    padding: 10px 0;
    border-top: 1px solid #41424c;
    border-bottom: 1px solid #41424c;
}

.footer-links p {
    font-size: 14px;
    color: #a8aaba;
}

.footer-links a {
    margin-right: 20px;
    font-size: 12px;
    color: #a8aaba;
}

.footer-info .info-text {
    padding: 20px 0;
    font-size: 12px;
    text-align: center;
}

.footer-info .info-text .nav-bottom {
    padding: 20px 0 5px;
    font-size: 14px;
    color: #ccc;
    text-align: center;
}

.footer-info .info-text .nav-bottom a {
    padding: 0 8px;
    color: #9b9ea0;
}

.footer-info .info-text .copyright {
    padding-top: 5px;
}

.footer-info .info-text em {
    padding: 0 8px;
}

展示：

weijunbaoshuai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android app安卓应用实例：起始页+fragment底部导航栏+ViewPager滑动切换+个人信息界面（一）
weixin_43910309的博客
07-05 1003
android app安卓应用实例：起始页+fragment底部导航栏+ViewPager滑动切换+个人信息界面
android开发　修改标题栏背景_android 开发 修改系统背景（状态栏颜色、导航栏颜色、标题栏颜色等等）...
weixin_39946767的博客
01-17 939
正常方式1、打开values下的styles.xml发现有以下代码：@color/myBarColor@color/myBarColor@color/colorAccent那么其中的colorPrimary、colorPrimaryDark、colorAccent分别代表什么呢？看下图就可以一目了然：2、更改colorPrimary和colorPrimaryDark将colorPrimary、co...
Android常用底部导航栏实现(二)
qq_39055743的博客
08-19 1995
本文将展示实现底部导航栏的第二种实现方法,第一种方法链接：https://blog.csdn.net/qq_39055743/article/details/81809630 二.BottomNavigationView+ViewPager 与第一种方法不同的是，该方法使用ViewPager作为切换内容的容器。 ViewPager，视图翻页工具。是Android 3.0后引入的一个UI控件，...
Android stuido底部导航栏使用Fragment实现切换
热门推荐
weixin_44223883的博客
12-05 4万+
Android studio底部导航栏使用Fragment实现切换 大家好，我是DXZ，今天刚写完一个使用Fragment实现切换功能的APP，很高兴就和大家分享一下，APP还可以实现连接蓝牙功能和语音功能，主要用来实现与蓝牙模块进行通信来获取单片机上采集的数据和手机APP上发送数据控制单片机。再使用时首先进入搜索界面搜索蓝牙设备，然后选择自己需要连接的蓝牙，连接成功后会进行语音提示，然后即可和单...
Android学习笔记（2）——底部导航栏、菜单的使用
张大大丶
09-15 2452
适合初学者的底部菜单栏学习教程，TabHost使用，避繁就简，从基础开始。
UI导航栏设计规范及注意事项有哪些？
weixin_48575991的博客
07-14 1466
UI导航栏设计规范及注意事项有哪些？设计不仅凸显了产品的主次，并引导用户行为，就拿文章来说，标题显得很重要，UI设计也是一样，有了导航栏之后才有灵魂，这样用户在使用的过程中就会更加明确。所以我们今天就来说说UI导航栏设计规范及注意事项有哪些？希望对大家有帮助。 设计好导航栏不仅仅是视觉上的工作，表现的方式、承载的按钮与组件、滚屏时的组合操作还能给用户带来极大的体验增益。接下来带你一起学习导航栏UI设计规范及注意事项： 一、导航栏位置 导航栏 Navigation Bar，也简称为Navbar。有不少刚入门的
Android开发笔记（二十）顶部导航栏ActionBar
aqi00的博客
12-16 1万+
标题栏ActionBar ActionBar是在Android3.0之后引入的，所以Android2.x之前的版本不能直接使用ActionBar。现在ActionBar广泛用做APP的顶部导航栏，它在布局上主要分为三部分：左边是返回区域，包括logo、返回箭头、左侧标题等等；右边是菜单区域，放的是溢出菜单OverflowMenu的各菜单项；中间是条件区域，包括导航项Navigation（下拉列表
UI培训分享：导航栏UI设计规范及注意事项有哪些?
qinge_Crazy的博客
12-14 755
　　UI设计学习起来要注意的东西还是有很多的，例如导航栏，导航栏UI设计规范及注意事项有哪些呢?今天小编为大家详细的介绍一下关于导航栏的设计注意事项，希望能够帮助到今后工作的你。 　　 　　UI培训分享：导航栏UI设计规范及注意事项有哪些?设计好导航栏不仅仅是视觉上的工作，表现的方式、承载的按钮与组件、滚屏时的组合操作还能给用户带来极大的体验增益。 　　一、导航栏位置 　　导航栏 Navigation Bar，也简称为Navbar。有不少刚入门的UI新人在诸多的Bar控件中，难以区分它所指代
百亿补贴通用H5导航栏方案 | 京东云技术团队
JDDTechTalk的博客
08-28 255
在移动端页面中，由于屏幕空间有限，导航条扮演着非常重要的角色，提供了快速导航到不同页面或功能的方式。用户也通常会在导航条中寻找他们感兴趣的内容，因此导航条的曝光率较高。在这样的背景下，提供一个动态灵活的导航条，为产品赋能，变得尤其重要。
Android用Scroller实现一个可向上滑动的底部导航栏
08-30
今天，我们将学习如何使用Scroller类来实现一个可向上滑动的底部导航栏。 首先，让我们了解一下Scroller类的基本使用方法。Scroller类提供了两个重要的方法：startScroll和computeScroll。startScroll方法用于启动...
jetpack compose 底部导航栏
08-17
在这个讨论中，我们将深入探讨如何使用Jetpack Compose来创建一个“完美的”底部导航栏。 首先，了解底部导航栏的基本结构至关重要。它通常包含3到5个图标，每个图标代表一个不同的主要功能区域。用户点击任一图标...
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
Android底部导航栏的三种风格实现
08-19
这是 Google 给我们提供的一个专门用于底部导航的 View。你只需要在新建 Activity 的时候选择 “Bottom Navigation Activity”，IDE 就会自动使用 BottomNavigationView 帮你生成好相应的代码了。 在使用 Bottom...
基于python开发的居民区电动汽车TOPSIS有序充电仿真+源码解析+项目文档+仿真（毕业设计&课程设计&项目开发）
最新发布
08-06
基于python开发的居民区电动汽车TOPSIS有序充电仿真+源码解析+项目文档+仿真，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 项目简介： "Simulation.md" 为代码解析说明文档 "仿真过程.py" 为仿真过程代码 "cargo.txt" 为随机生成的电动汽车出行数据，格式为[离开时间，回来时间，是否出行，剩余电量百分比]，其中是否出行 1表示出行，0表示不出行 "cargo.py" 为生成电动汽车出行数据代码 "carimf.txt" 为电动汽车信息初始化数据，格式为[序号，电池容量，慢充时间，最大行驶里程，慢充每15分钟增加电量百分比] "price.txt" 为时间价格表，格式为[时间，时段，电价]，其中，时段1表示峰时，时段2表示谷时，时段3表示平时 "drawpic.py" 为绘图函数 "小区居民日常负荷数据.txt" 为通过蒙特卡洛方法生成的小区居民日常负荷数据，格式为[时间，负荷]
【流程管理】LTC流程介绍.pptx
08-06
【流程管理】LTC流程介绍.pptx
libmavsdk-server.so-debug-202408062018-wk-proto-ok
08-06
libmavsdk_server.so_debug_202408062018_wk_proto_ok
信息安全lsClssify-mas笔记
08-06
信息安全lsClssify-mas笔记
ROS小车复刻资源整理
08-06
ROS小车复刻资源整理 包含复刻过程中需要的所有文件，以及自己复刻过程中的记录，如果复刻还有什么问题，欢迎积极讨论交流啊…… 复刻记录： 2024年7月5日 购买元件和配件、购买工具、打印外壳和PCB、开钢网 2024年7月10日 整理工具和元件及配件：发现缺少LED（0603）、排插4P（雷达使用） 2024年7月15日 元件到位，准备焊接，发现加热台使用不熟练、锡膏已经干了没有助焊剂、焊接效果不好、后面尝试时连焊严重、钢网涂锡膏时没有固定导致锡膏涂的太多，需要提升自己的焊接技术。（钢网可以定制成PCB板形状的更好用） 2024年7月16日 准备先放弃一段时间、复习考研。然后有时间再进行。后续可购买更好的工具（烙铁和热风枪、助焊剂、清洗剂等等、以及中低温锡膏）、打印沉金的PCB板、重新打印钢网、以及部分元件。 2024年7月22日 购买的焊接好的PCB板到货，因为插反电池，导致PCB内部损坏电池供电无法使用 收获：学会了导入、编译、烧录esp32的程序 学会分析pcb图和电路故障初步分析 学会插件的接线方式。 准备寒假再继续搞！！ 可以先学一些简单的pcb制作（电子DIY）
使用android studio做一个含有底部导航栏的页面
05-13
好的，下面是Android Studio中创建含有底部导航栏的页面的步骤： 1. 打开Android Studio并创建一个新项目。 2. 在项目中创建一个新的Activity。 3. 打开xml布局文件，添加一个底部导航栏。可以使用Google提供的Material Design组件库中的BottomNavigationView。 4. 在Activity中，使用findViewByID方法找到布局文件中的BottomNavigationView对象。 5. 使用BottomNavigationView的setOnNavigationItemSelectedListener方法设置导航栏的选项被选中时的监听器。 6. 在监听器中，根据选中的选项，使用Intent启动对应的Activity。 以下是一个简单的示例代码： 布局文件 `activity_main.xml`： ```xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/frameLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottom_navigation" /> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:menu="@menu/bottom_navigation_menu" /> </RelativeLayout> ``` `MainActivity.java` 文件： ```java public class MainActivity extends AppCompatActivity { private BottomNavigationView bottomNavigationView; private FrameLayout frameLayout; private HomeFragment homeFragment; private DashboardFragment dashboardFragment; private NotificationsFragment notificationsFragment; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); bottomNavigationView = findViewById(R.id.bottom_navigation); frameLayout = findViewById(R.id.frameLayout); // 初始化Fragment homeFragment = new HomeFragment(); dashboardFragment = new DashboardFragment(); notificationsFragment = new NotificationsFragment(); // 默认显示HomeFragment setFragment(homeFragment); // 设置底部导航栏的监听器 bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.nav_home: setFragment(homeFragment); return true; case R.id.nav_dashboard: setFragment(dashboardFragment); return true; case R.id.nav_notifications: setFragment(notificationsFragment); return true; } return false; } }); } // 切换Fragment private void setFragment(Fragment fragment) { FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction(); fragmentTransaction.replace(R.id.frameLayout, fragment); fragmentTransaction.commit(); } } ``` `bottom_navigation_menu.xml` 文件： ```xml <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_home" android:title="Home" app:showAsAction="ifRoom" /> <item android:id="@+id/nav_dashboard" android:icon="@drawable/ic_dashboard" android:title="Dashboard" app:showAsAction="ifRoom" /> <item android:id="@+id/nav_notifications" android:icon="@drawable/ic_notifications" android:title="Notifications" app:showAsAction="ifRoom" /> </menu> ``` 在这个示例中，我们创建了一个包含三个Fragment的底部导航栏，分别是HomeFragment、DashboardFragment和NotificationsFragment。当用户点击导航栏中的选项时，我们会使用Intent启动对应的Fragment。你可以根据自己的需求修改/扩展代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值