纯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

相关推荐

  • 怎么解决WordPress更新时,提示无法连接到FTP服务器?

    怎么解决WordPress更新时,提示无法连接到FTP服务器?在 WordPress 目录下找到 wp-config.php 文件并编辑,在最后一行加上define(‘FS_METHOD’, “direct”);

    建站入门 2018年2月8日
    79200
  • 百度搜索网页标题规范

    对搜索用户来说,标题是一个网页最直观的认知渠道和展现方式,也是吸引用户点击搜索结果进入落地页的关键因素。 为了保障搜索用户对所需资源的有效获取,保证搜索结果的公平性,现百度搜索对外发布《百度搜索网页标题规范》,希望在满足用户需求的同时,为站长带来更多流量,实现共赢。 1、标题的定义 对网页内容的准确且简明扼要的描述。 具体举例: 图1-1 符合规范的标题示例…

    建站入门 2019年3月15日
    81900
  • 微信、抖音加码电商权重,搜索框被曝新增固定电商入口

    微信、抖音纷纷加码了电商业务权重,分别在各自搜索入口内增加了名为小店、店铺的电商频道,这也是微信首次增加固定的电商入口。 报道称,增加电商入口从平台自身发展角度来看,有助于实现其多元化发展。抖音和微信分别以短视频内容为核心、以社交沟通为基础,在引入电商业务后两者都可进一步拓展业务领域、增加收入来源。 抖音:今年上半年在搜索栏内原有的“商品”入口之外,再度为抖…

    2024年9月14日
    60000
  • 纯CSS3制作TAB选项卡

    这个CSS3 Tab样式已经写出来很久了,一直没有时间把它分享出来,也许网上还有其他很多这样子的代码,但没有一种是用到我说的:checked来做的,不管如何,多掌握一种方式对你也是有帮助的。 效果就如博客之前写过的一个Tab一样:有最新文章、热门文章和随机文章。 第一种::checked 首先像平常写HTML和CSS一样,不过要使用input的radio来做…

    2020年10月26日
    58000
  • WordPress网站HTTPS配置教程 WordPress如何启用HTTPS

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

    产品运营 2018年4月15日
    78900

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信