纯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 21:44
下一篇 2020-11-05 10:59

相关推荐

  • WordPress七牛云静态文件CDN加速配置教程

    WordPress网站优化加速一直都是广大站长比较关注的问题,今天主要介绍一下基于七牛云的静态文件(比如图片、js、css)CDN加速的设置方法。 CDN还是对象储存? 目前我们接触到的很多客户都是基于第三方插件对接的对象存储服务,这个本身其实也是没什么问题的,不过接触下来发现很多用户经常会遇到插件选择、文件同步、缩略图生成等各种问题,所以我们更推荐的是CD…

    2018-11-02
    2.8K0
  • 首页改版方法总结:服务市场首页改版项目

    首页改版一般由以下几种原因引起 业务策略变化 品牌升级 年久失修,体验变差 换了老板,嘿嘿 首页改版一般想要达到的目标 业务策略变化引起的内容变化,从而为用户提供更加丰富、更加精准的内容和服务 品牌升级引起的内容变化,从而在原有用户的体感上新增品牌增益的内容 年久失修导致用户流失严重,通过内容和服务的变化提升用户的留存和转化 感受: 换个品牌LOGO,改个页…

    2018-04-01
    2.5K0
  • 升级WordPress 5.0后,切换回经典编辑器Classic Editor

    升级WordPress 5.0后,切换回经典编辑器Classic Editor WordPress 5.0 正式采用了全新的区块编辑器-古德堡编辑器Block Editor Gutenberg,对于很多已经习惯国产编辑器习惯的站长来说不是特别方便,下面我们看看如何切换成经典编辑器吧。   相信有不少人不太习惯新编辑器的使用,那么在更新了WordPress 5…

    2018-12-15
    2.1K0
  • WordPress 实现文章中远程(外链)图片自动本地化的方法[免插件]

    WordPress 文章中远程图片自动保存到本地服务器,最大的好处就是复制粘贴,方便对文章的转载复制。就现实中而言,并不是所有网站都会全部写原创内容或者想伪原创一下,有些好文章想转载,但是对方网站有可能对图片进了防盗链,而图文比较多的情况下,那么就相当麻烦,而此代码功能可有效的帮助你转载复制。 不过,无论载转与否,建议保留出处,这是对原作者的尊重,毕竟人家写…

    2022-04-30
    3550
  • 怎样迁移网站服务器和域名?

    继续回答有普遍性的问题。今天是一个网站服务器和域名迁移的问题。 读者Pete Zhang问: Zac你好,占用你的宝贵时间,向你请教个问题。想要迁移网站,内容基本不变,但域名不同,服务器也不同,我该如何是好? 问题描述:我经营一个小公司,公司有一个网站(域名假设是www.AAA.com),网站的服务器在美国(IP假设是1.1.1.1)。公司的所有业务都来自w…

    2021-04-20
    4910
  • WordPress网站HTTPS配置教程 WordPress如何启用HTTPS

    随着HTTPS的不断普及,越来越多的网站开启了HTTPS,给网站加上了小绿锁标识,作为全球知名的建站系统,WordPress对于HTTPS的兼容性是非常好的,几乎不用任何修改,只需要服务器配置好证书即可使用https链接访问。但是经常有用户反馈开启了以后地址栏没有绿色的锁(chrome浏览器),下面简单介绍下配置教程。 以下配置教程是基于已经在服务器配置好S…

    2018-04-15
    2.5K0