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

小屋 • 2020-10-27 11:37 • 建站入门

目前最简单呈现效果最好的纯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)

打赏

支付宝打赏

微信打赏

小屋认证管理

0 0

纯CSS3制作TAB选项卡

上一篇 2020-10-26 21:44

网信办公布10月主要商业网站举报受理量情况：微博最多

下一篇 2020-11-05 10:59

建站入门

纯CSS3制作TAB选项卡

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

小屋
2020-10-26
0
建站入门

升级WordPress 5.0后，切换回经典编辑器Classic Editor

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

小屋
2018-12-15
0
建站入门

WordPress响应式主题添加视频手机端不显示问题解决办法

随着移动互联网的发展，现在手机端的流量占比越来越大，响应式主题由于兼容PC和移动端以及部署方便等优点也被广大站长使用接受，不过由于电脑和手机系统兼容性的问题，很多用户遇到视频播放的问题：在网站添加的视频在电脑上可以正常播放，一到手机上就无法显示。问题原因电脑上一般都会安装flash控件，视频大多也是使用flash播放器来播放的，而手机端目前网页播放视频都…

小屋
2018-10-16
0
建站入门

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

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

小屋
2018-11-02
0
产品设计

政府网站建设网页设计规范

政府网站要方便公众浏览使用，页面内容要便于复制、保存和打印。要最大限度减少用户额外安装组件、控件或插件;确需使用的，要便于在相关页面获取和安装。应用系统、附件、视频等应有效可用，名称要直观准确。附件、视频等格式应便于常用软件打开，避免用户额外安装软件。避免使用悬浮、闪烁等方式，确需使用悬浮框的必须具备关闭功能。 1.首页不宜过长。在主流计算机配置和当地平均网…

小屋
2020-11-08
0
建站入门

织梦CMS通用安装教程

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

小屋
2018-03-08
0