纯css实现移动端水平滚动导航

目前最简单呈现效果最好的纯css实现移动端水平滚动导航解决方案。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style> .maincate{width: 100%; height: 50px; line-height: 50px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.1); overflow-x: scroll; overflow-y: hidden; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-overflow-scrolling: touch; text-align: justify; background: #f78361; padding: 0px 5px; box-sizing: border-box; } .maincate a{ color: #fff; text-decoration: none; margin-right: 10px;} .maincate::-webkit-scrollbar{display: none;} </style>
</head>
<body>
<div id="maincate" class="maincate">
    <a href="#">系列1</a>
    <a href="#">系列2</a>
    <a href="#">系列3</a>
    <a href="#">系列4</a>
    <a href="#">系列5</a>
    <a href="#">系列6</a>
    <a href="#">系列7</a>
    <a href="#">系列8</a>
    <a href="#">系列9</a>
    <a href="#">系列10</a>
</div>
<div>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
</div>
</body>
</html>

 

主题测试文章,只做测试使用。发布者:小屋,转转请注明出处:http://www.rumenwu.com/site/1589.html

(0)
小屋的头像小屋
上一篇 2020年10月26日 下午9:44
下一篇 2020年11月5日 上午10:59

相关推荐

  • 织梦CMS通用安装教程

    今天先跟大家介绍一下dedecms织梦系统安装的方法步骤,以及织梦数据库还原的教程。详细请看图文讲解:1.运行 http://域名/install/index.php(比如你的域名是:http://www.rumenwu.com/,就输入http://www.rumenwu.com/install/index.php) (注)输入网址 http://域名/i…

    建站入门 2018年3月8日
    19700
  • 6大主流自媒体平台运营方式

    在新媒体的风口上,许多企业将自己的内容做全渠道的覆盖推广,得到的效果却并不好,因为企业并没有仔细研究每个自媒体平台的机制,只是机械式的发文。只有将自媒体平台的各个方面研究透,再去做运营推广,才能得到你想要的效果。毕竟知己知彼,方能百战百胜。不过今天入门屋为你总结了6大自媒体平台的运营方法,让你玩转新媒体平台! 一、 今日头条 优点:头条号的申请难度不大,唯一…

    建站入门 2018年8月1日
    18100
  • 百度智能小程序SEO指南

    第一章、智能小程序建设如何对搜索友好 一、页面结构要求 1、页面结构清晰、各模块划分清晰。 2、分类划分明确,设置醒目,分类主题的文章对应发布到相应分类下。 3、Web化url结构清晰,易提炼成正则规则,如果有对应H5网站,建议形成对应关系。 4、页面导航设置合理,机器可读、位置突出,用户能很好得知所访问页面在小程序中的位置。 二、链接 链接在移动端依然起着…

    2019年5月6日
    13900
  • 谷歌搜索算法升级,盗版图书网站流量猛增

    北京时间 10 月 27 日晚间消息,据报道,在线教科书订阅服务 Perlego 的数据显示,谷歌近期对搜索算法的调整,可能加剧了在线图书的盗版势头。 利用搜索引擎优化(SEO)分析工具 Ahrefs,以及搜索流量监测工具 Keywords Everywhere,Perlego 监测了五年来主要在线图书盗版网站的搜索流量。 监测结果显示,最近一些最受欢迎的图…

    建站入门 2021年10月27日
    26000
  • 百度指数是什么?百度指数如何提升?

    百度指数是seo以及市场推广人员比较关注的数据,因为百度指数一方面反映了市场情况,另一方面也客观反映了品牌推广的效果。下面入门屋就为大家介绍一下百度指数以及提升百度指数的方法。 百度指数是什么? 百度指数是以百度海量网民行为数据为基础的数据分享平台。在这里,你可以研究关键词搜索趋势、洞察网民需求变化、监测媒体舆情趋势、定位数字消费者特征;还可以从行业的角度,…

    建站入门 2022年1月6日
    22900

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信