css实现移动端水平滚动导航
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</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>
<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>
</body>
</html>
css实现移动端水平滚动导航的更多相关文章
- 移动端无限滚动 TScroll.vue组件
// 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- jquery 滚轴滚动 导航定位和锚点定位
自己写的,只测试了ie9+, firefox,chrome 以下js更好 var fixbar={ init:function(){ "use strict"; // 滚轴 导航位 ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- amazeui学习笔记--css(常用组件9)--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
- 原生css实现fullPage的整屏滚动贴合
目录 1,前言 2,效果展示 3,属性说明 3.1 scroll-snap-type 3.2,scroll-snap-align 4,实际使用 4.1,兼容性 1,前言 今天摸鱼的时候,发现一个很有意 ...
随机推荐
- 数据库连接池性能比对(hikari druid c3p0 dbcp jdbc)
https://blog.csdn.net/qq_31125793/article/details/51241943 背景 对现有的数据库连接池做调研对比,综合性能,可靠性,稳定性,扩展性等因素选出推 ...
- Cloudera Manager和CDH5.8离线安装
https://blog.csdn.net/zzq900503/article/details/52982828 简介 我们在上篇文章中已经了解了CDH,为了后续的学习,我们本章就来安装CDH5.8. ...
- nginx 反向代理 负载均衡
nginx反向代理 用户(浏览器) 请求网站资源 -> 直接定位到django后台(所有的请求压力,都直接给了后台) django默认对并发性 很差,并且处理网页的静态资源,效率很差 10万个并 ...
- 20145203盖泽双《网络对抗技术》拓展:注入:shellcode及return-into-libc攻击
20145203盖泽双<网络对抗技术>拓展:注入:shellcode及return-into-libc攻击 一.注入:shellcode 1.编写一段用于获取Shellcode的C语言代码 ...
- mac 利用svn下载远程代码出现Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.
终端输出的信息:Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo. ...
- Linux soft lockup分析
关键词:watchdog.soft lockup.percpu thread.lockdep等. 近日遇到一个soft lockup问题,打印类似“[ 56.032356] NMI watchdog: ...
- mm-wiki安装部署
参考连接:https://github.com/skyhack1212/mm-wiki 打开 https://github.com/phachon/mm-wiki/releases 找到对应平台的版本 ...
- 基于微服务的DevOps落地指南 交付效率提升40%
基于微服务的DevOps落地指南 交付效率提升40% 2015-2016年,珍爱线下门店已新增覆盖城市9个,与此同时,CRM系统大小故障却发生了数十起... ... 珍爱网是以“网络征选+人工红娘”模 ...
- fisher线性判别
fisher 判决方式是监督学习,在新样本加入之前,已经有了原样本. 原样本是训练集,训练的目的是要分类,也就是要找到分类线.一刀砍成两半! 当样本集确定的时候,分类的关键就在于如何砍下这一刀! 若以 ...
- CentOS 7 下面使用 sendMail 发送邮件
1. 修改perf的版本不然会报错: ******************************************************************* Using the def ...