纯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

相关推荐

  • 网站被百度和google封了,怎么办?

    先要确定你的网站已经被百度或google封了(也有人叫K了),通过日志可以获得该信息。菜鸟通过这里学习下怎么看日志。我的站怎么就不被收录呀? 日志中的HTTP状态码都代表什么? 网站被百度和google封了,怎么办? 谷歌从来都不会人工来检查或删除某一个网站,整个建立索引和排名的过程都用自动化的程序进行。如果涉及中国法律相关的内容,百度或许会采取相应办法吧。…

    建站入门 2018年2月11日
    10000
  • 日志中的HTTP状态码都代表什么?

    作SEO时,我们经常会在日志上看到类似这样的代码: 61.135.166.232 – – [31/Dec/2007:02:30:11 +0800] “GET /category21.html HTTP/1.1” 200 10968 “-” “Baiduspider+(+htt…

    建站入门 2018年2月11日
    6500
  • Apache伪静态规则文件.htaccess的另类用法

    1、开启/关闭拼写检查(关闭后会区分大小写) CheckSpelling On #开启 CheckSpelling Off #关闭 关闭拼写检查可以解决一下报错 2、禁止/只允许特定IP访问 (1) 禁止单个IP访问,例如192.168.1.1 Order Allow,Deny Allow from all Deny from 192.168.1.1 (2)…

    建站入门 2019年10月6日
    7900
  • 博客引流技巧

    很多人觉得博客已经过气,在博客上引流可能没什么戏。但是有时候,越不被看好的爆发力越强。新浪博客想必大家都知道,它不仅仅在百度上的排名很靠前,而且是和三大社交软件之一—新浪微博是相关联的,这样就可以引来很多流量了。今天入门屋就跟大家介绍下新浪博客的引流方法。 一、长尾关键词。大家可能常常看到过这个名词,但是对这个词的具体还不算太清楚。我们在百度上搜索下这个词。…

    2018年10月2日
    7800
  • 11个SEO最常见问题解答

    SEO 初学者最经常会提到这些问题: 1、帮我看看我的站点 XXX.XXX.com SEO 得怎么样? 简单的 SEO 评估,我们主要从这几个方面: 网站导航和链接是否采用 Html 方式实现。 是否实现 URL 静态化。 关键词优化是否到位,包括标题的书写、关键词的设置、关键词密度控制等。 网站结构是否合理,是否有简单的 SEO技巧。 2、搜索引擎一般多长…

    建站入门 2018年2月21日
    6700

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信