移动端底部导航栏之css滚动

最新推荐文章于 2024-07-19 17:50:03 发布

milijiangjun

最新推荐文章于 2024-07-19 17:50:03 发布

阅读量3.6k

点赞数

分类专栏： # html5

本文链接：https://blog.csdn.net/milijiangjun/article/details/79203436

版权

这篇博客介绍了如何使用CSS实现移动端底部导航栏的固定定位和横向滚动效果。通过设置`position: fixed`确保导航栏始终位于屏幕底部，并利用`white-space: nowrap`和`overflow-x: auto`实现内容超出时的横向滚动。每个导航项被包装在`

`中，通过调整其样式来完成布局。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端导航栏滚动之css</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
user-scalable=no">
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        
        /*整体菜单的高度*/
        #Nav
        {
            width: 99%;
            height: 120px;
            position: fixed;
            bottom: 0;
            margin: 0px 0px 10px 0px;
           
        }
        /*一横流的设置*/
        #category-head
        {
            width: 100%;
            white-space: nowrap;
            overflow-x: auto;
           /* float: left; */
        
            cursor: pointer;
        }
        /*每个小div容器的*/
        /*容器分为上下2部分*/
        #category-head .flex
        {
            w

最低0.47元/天解锁文章

milijiangjun

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
移动端底部导航栏之css滚动

移动端导航栏滚动之css <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> * { margin: 0; padding: 0;
复制链接

扫一扫

专栏目录