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,前言 今天摸鱼的时候,发现一个很有意 ...
随机推荐
- os模块使用
Python获取当前文件名的两种方法 1,使用python文件默认的‘ file ’属性 2,使用 sys.argv[0] print sys.argv # 输入参数列表print sys.argv[ ...
- Redis常用数据结构
Redis常用数据结构包括字符串(strings),列表(lists),哈希(hashes),集合(sets),有序集合(sorted sets). redis的key最大不能超过512M,可通过re ...
- 服务端监控工具:Nmon使用方法
在性能测试过程中,对服务端的各项资源使用情况进行监控是很重要的一环.这篇博客,介绍下服务端监控工具:nmon的使用方法... 一.认识nmon 1.简介 nmon是一种在AIX与各种Linux操作系统 ...
- SQL Server中NULL的一个测试
我们都知道SQL Server中NULL是一个很特殊的存在,因为NULL不会等于任何值,且NULL也不会不等于任何值.对于NULL我们只能使用IS或IS NOT关键字来进行比较. 我们先来看看下面一个 ...
- auth模块用户认证
一.auth模块什么 auth模块时django自带的用户认证模块 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功 ...
- day01(计算机组成,进制,内存分布,操作系统)
本周内容: 第一天: 计算机原理 操作系统 第二天: 编程语言 python入门:环境 - 编辑器 变量 基本数据类型 学习方法: 鸡汤 - 干货 wwwh : what | why | where ...
- C语言 课堂随记
1.codeblocks中的pow函数会有误差. 自定义pow函数: int pow(int x,int y) { ; ; i<=y; i++) t=t*x; return t; } 2.C库函 ...
- iview库表table组件内嵌套Select组件
表格内render函数渲染Select组件 { title: '属性值', key: 'values', render:(h,params)=>{ return h('Select',{ ...
- 《Effective C++》模板与泛型编程:条款32-条款40
条款41:了解隐式接口和编译期多态 class支持显示接口和运行期多态 class的显示接口由函数的名签式构成(函数名称.参数类型.返回类型) class的多态通过virtual函数发生在运行期 te ...
- CLOUD清理临时表空间
--查找空间名.物理空间路径 SELECT name, physical_nameFROM sys.master_filesWHERE database_id = DB_ID('tempdb'); 可 ...