css3滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>评分有半个星星</title>
<style type="text/css">
/*公共部分*/
/**
* reset 浏览器重置属性
* global 公共样式（单一块样式）
* common 常用属性,对应的单个属性（class原则上不要超过3个类）
* public 公共模块（模块样式啊，有层级）
*/ /*reset*/
html{max-width: 640px;margin:0 auto;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, figure, section, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin: 0; padding: 0 }
fieldset, img { border: 0 none }
body{font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;background-color: #fff;color:#333;max-width: 640px;margin: 0 auto;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
table{border-collapse:collapse;border-spacing:0}
ul,ol,dd,dt,dl{list-style-type:none;}
a{color:#333;text-decoration: none;-webkit-touch-callout: none;-webkit-user-select: none;}
a,input,select{-webkit-tap-highlight-color: transparent;-webkit-appearance: none;-moz-appearance: none;-webkit-border-radius: 0;} input,img{border:none;}
i,em{font-style:normal;}
:focus{outline: none}
select{ background: none } /*iphone6*/
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){body{font-size:14.5px;}}
/*iphone6plus*/
@media(min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3){body{font-size:15.5px;}} /*原子类*/
.clear { clear: both; }
.clear:after { display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; content: "."; }
.left { float: left; }
.right { float: right; }
.mb10{margin-bottom: 10px;}
.mt10{margin-top: 10px;}
.auto { overflow: hidden; }
/*公共结束*/ /*导航*/
.head{ height: 40px; line-height: 40px; text-align: center; font-size: 20px; }
.nav{ height: 40px; line-height: 40px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; width: 100%; overflow: hidden; position: relative; }
.n_more{ width: 40px; height: 40px; border-left:1px solid #ddd; background: #ddd; position: absolute;right: 0; top:0; }
.n_more em { margin: 10px auto 0; display: block;
width:0; height:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid #0066cc;
}
.n_menu{white-space: nowrap;/*white-space: nowrap;规定段落中的文本不进行换行*/
overflow-x: scroll;/*overflow-x: scroll;提供滚动机制*/
-webkit-overflow-scrolling: touch;/*-webkit-overflow-scrolling: touch;有快速滚动和回弹的效果*/}
.n_menu::-webkit-scrollbar {display: none}
.n_menu a{ padding: 0 10px; border-right: 1px solid #ddd; } </style>
</head>
<body>
<div class="head">css3滚动条</div>
<div class="nav">
<span class="n_more"><em></em></span>
<div class="n_menu">
<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>
<a href="#">标题11</a>
<a href="#">标题12</a>
</div>
</div>
<p style="color: red; padding: 10px;">注意:要切换成手机模式才可以滚动，PC端不行</p> </body>
</html>
如图所示：
例子2
<div class="m-nav-wrap">
<ul class="m-nav">
<li><a href="">首页</a></li>
<li><a href="">八字起名</a></li>
<li><a href="">八字起名</a></li>
<li><a href="">公司起名</a></li>
<li><a href="">宠物起名</a></li>
<li><a href="">英文起名</a></li>
<li><a href="">游戏起名</a></li>
<li><a href="">百家姓</a></li>
<li><a href="">起名大全</a></li>
<li><a href="">免费算命</a></li>
</ul>
</div>
css样式：
.m-nav-wrap{ height: .8rem; line-height: .8rem; overflow: hidden;}
.m-nav{ white-space: nowrap;overflow-x: scroll;-webkit-overflow-scrolling: touch; }
.m-nav-wrap::-webkit-scrollbar {display: none}
.m-nav li{ display: inline-block;}
.m-nav-wrap a{ padding: 0 10px; display: block;}
例子3：
html：
<div class="index-sx">
<a href="">鼠</a>
<a href="">牛</a>
<a href="">虎</a>
<a href="">兔</a>
<a href="">龙</a>
<a href="">蛇</a>
<a href="">马</a>
<a href="">羊</a>
<a href="">猴</a>
<a href="">鸡</a>
<a href="">狗</a>
<a href="">猪</a>
</div>
css样式：
.index-sx{ overflow: hidden;white-space: nowrap;overflow-x: scroll;-webkit-overflow-scrolling: touch; padding-top: .2rem; padding-left: .1rem; }
.index-sx a{ display: inline-block; background: #ddd; border-radius: .1rem; width: 1rem; height: 1rem; line-height: 1rem; text-align: center; font-size: .48rem; margin: 0 .15rem;}
效果图：
css3滚动条的更多相关文章
- css3 滚动条出现 页面不跳动
.wrap-outer { margin-left: calc(100vw - 100%); } .wrap-outer { padding-left: calc(100vw - 100%); } ...
- CSS3滚动条美化,CSS3滚动条皮肤
CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这 ...
- NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤
转自:http://www.pengyaou.com/codecss3/POKDNMS_112.html CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrol ...
- css3滚动条样式美化
关于滚动条的设计,需要用到css3的微元素,都列在下边吧(以Chrome内核webkit为例). -webkit-scrollbar 滚动条的整体轮廓,width表示纵向滚动条的宽度,heig ...
- CSS3滚动条-webkit-scrollbar
webkit现在支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式. 如果你想跳过介绍,直接看demo的话,请点击demo 滚动条是一个伪元素,可以自定义样式.这 ...
- less/sass 基础base文件
less less-base.less文件展示: //清除标签默认样式; .label(){ ;;;_background-image:url(n1othing.txt)} ;;; font-size ...
- 微信小程序 - 自适应swiper高度（非组件）
微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情 原理: 利用css3 横轴滚动属性overflow:scroll,设置死swipe ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
随机推荐
- ios的xxxAppDelegate.h分析
#import "BIDAppDelegate.h" #import "BIDViewController.h" @implementation BIDAppD ...
- Java开发WebService实例（1）
参考文献:http://blog.sina.com.cn/s/blog_7bd0d6a70101dixc.html 简单的java工程实现 1 首先建立一个Java工程,在里面建一个Web servi ...
- beego 中文教程
https://www.kancloud.cn/hello123/beego/126087
- string.Empty与null与""
(1)NULLnull 关键字是表示不引用任何对象的空引用的文字值.null 是引用类型变量的默认值.那么也只有引用型的变量可以为NULL,如果int i=null,的话,是不可以的,因为Int是值类 ...
- windows下的phpunit安装
Windows Globally installing the PHAR involves the same procedure as manually installing Composer on ...
- 快速搭建Wordpress
1. 下载:ZentaoPMS作为Mysql Apach Php的基础环境: 2. 下载:Wordpress安装包: 3. 将Wordpress解压,放置于ZentaoPMS的Xampp的htdocs ...
- Boost线程详解
一.创建一个线程 创建线程 boost::thread myThread(threadFun); 需要注意的是:参数可以是函数对象或者函数指针.并且这个函数无参数,并返回void类型. 当一个thre ...
- 【转】C语言中DEFINE简介及多行宏定义
要写好C语言,漂亮的宏定义是非常重要的.宏定义可以帮助我们防止出错,提高代码的可移植性和可读性等. 在软件开发过程中,经常有一些常用或者通用的功能或者代码段,这些功能既可以写成函数,也可以封装成为宏定 ...
- MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled. Please check Redis logs for details about the error
今天购物车突然不能添加了,发现redis报错了,重启了一下好了,一会又报错了. 错误信息: MISCONF Redis is configured to save RDB snapshots, but ...
- “hdfs dfs -ls”命令的使用
"hdfs dfs -ls"带一个参数,如果参数以"hdfs://URI"打头表示访问HDFS,否则相当于ls. 其中URI为NameNode的IP或主机名,可 ...