纯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

相关推荐

  • 解读反向链接与外链的区别?

    对于SEO初学者而言,经常容易混淆反向链接与外部链接,大家并不清楚二者之间的区别,这对于SEO优化而言,却有着完全不同的概念,比如:增加反链与增加外链,严格意义上讲,这是两码事。 那么,反向链接与外链的区别有哪些? 简单举例,比如:X与Y这两个页面,如果SEO人员在Y的页面上,利用超链接指向了X页面,那么我们可以明确的指出Y页面的URL,就是X页面的反向链接…

    建站入门 2018年8月29日
    1.1K00
  • 升级WordPress 5.0后,切换回经典编辑器Classic Editor

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

    2018年12月15日
    91600
  • 404页面该怎么做?

    404页面的目的是:告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用网站其他页面而不是关闭窗口离开。 很多开源系统如CMS系统、Blog系统等不提供404页面或提供的404页面并未达到SEO的要求,这让网站的权威性大打折扣。 404页面该达到怎么样的效果才符合SEO要求? 搜索引擎通过HTTP状态码来识别网页的状态。当搜索引擎获得了一个错误链接时,…

    建站入门 2018年1月23日
    67900
  • 百度烽火算法升级,持续打击网络劫持问题

    网站劫持对用户伤害极大,严重危害搜索用户的网络安全。一直以来,网站劫持问题都是百度搜索重点关注和严厉打击的问题之一。 网站劫持的表现形式 百度搜索中的网站劫持有以下两种表现形式: 跳转劫持:用户点击目标网页后,页面直接跳转至另一页面; 后退劫持:用户完成对某网页的浏览,点击“后退”按钮时出现以下几种情况 (1)无法后退,点击后退时页面无反应,内容无变化; (…

    建站入门 2019年3月15日
    54600
  • 百度移动搜索落地页体验白皮书——广告篇3.0

    1.  百度坚决捍卫移动搜索用户体验 2.  名词解释 2.1.广告 2.2.APP引导 2.3.主体内容 2.4.首屏 2.5.一屏 3.  落地页广告规范 3.1.禁止的广告样式 3.2.广告位置以及面积 3.3.广告内容 3.4.注意规范 1. 百度坚决捍卫移动搜索用户体验 2017年初,百度用户体验部针对用户进行了满意度调研,发现很多恶意低质的广告严…

    建站入门 2018年3月10日
    89500

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信