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. ...

随机推荐

解决linux下root运行Elasticsearch异常
如果以root身份运行将会出现以下问题 root@yxjay:/opt/elasticsearch-2.3.5/bin# ./elasticsearchException in thread &quo ...
MySQL数据库篇之存储引擎
主要内容: 一.数据引擎二.MySQL支持的存储引擎三.使用存储引擎 1️⃣ 什么是存储引擎? MySQL中建立的库----> 文件夹,库中建立的表----->文件. 现实生活中我们用 ...
Linux实战教学笔记43：squid代理与缓存实践（二）
第6章 squid代理模式案例 6.1 squid传统正向代理生产使用案例 6.1.1 squid传统正向代理两种方案 (1)普通代理服务器作为代理服务器,这是SQUID的最基本功能:通过在squi ...
MYSQL 创建常见问题
1.创建函数时,报错: 出错信息:ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL D ...
c++ 迭代器模式（iterator）
提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示.当你需要访问一个聚集对象,而且不管这些对象是什么都需要遍历的时候,就应该考虑用迭代器模式.同时需要对聚集有多种方式遍历时,可以 ...
Spring中通配符(转)
一.加载路径中的通配符:?(匹配单个字符),*(匹配除/外任意字符).**/(匹配任意多个目录) classpath:app-Beans.xml 说明:无通配符,必须完全匹配 classpath: ...
Linux cloc
一.简介 cloc是一个基于perl的.十分好用的代码统计工具,它所支持的语言还算十分丰富.不过,还是有很多用的较少的语言是不支持的. 二.安装配置 1)官网安装教程 http://cloc.so ...
EZOJ #226
传送门分析我们可以建一个k层图,把dp转移的三维对应到每个点上,每个第k层点连向0层点我们让第0层点为实点其余为虚点,只要碰到虚点就dfs到他连得所有实点再将实点入队即可代码 #include ...
Python的内建比较函数cmp比较原理剖析-乾颐堂
cmp( x, y):比较2个对象,前者小于后者返回-1,相等则返回0,大于后者返回1. Python的cmp比较函数比较原理 Python的cmp函数可以比较同类型之间,或者不同数据类型之间.然后根 ...
Mac os安装DVWA环境教程
Mac os安装DVWA环境教程 1.尽管Mac自带Apache和php 事实上Mac和WIN都用XAMPP一键化安装比较方便 2.解压DVWA-master 改名为dvwa移动到XAMPP的目录 3 ...

css3滚动条

css3滚动条的更多相关文章

随机推荐

热门专题