body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0padding:0}
body { font-size:12pxcolor:#666font-family:Verdana, Microsoft YaHei, Simsunbackground:#fffline-height:24px}
fieldset, img { border:0}
ol, ul { list-style:none}
h1, h2, h3, h4, h5, h6{ font-size:100%}
em { font-style:normal}
input, button, select, textarea { outline:none}
textarea { resize:none} //禁用了文本的拖拉,尤其在谷歌下
p{ text-align:justifytext-justify:distribute} //为了使文本段落左右两边对齐
最耗资源的,最简单的
* { padding: 0margin: 0border: 0}
选择性初始化举例(综合)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0
margin: 0
}
3. 参考新浪、雅虎
/* 新浪全局样式 */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{
margin:0padding:0border:0
}
body{
background:#fffcolor:#333font-size:12pxmargin-top:5pxfont-family:"SimSun","宋体","Arial Narrow"
}
ul,ol{
list-style-type:none
}
select,input,img,select{
vertical-align:middle
}
a{text-decoration:none}
a:link{color:#009}
a:visited{color:#800080}
a:hover,a:active,a:focus{color:#c00text-decoration:underline}
/* 雅虎全局样式 */
html {
background: none repeat scroll 0 0 #FFFFFF
color: #000000
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0
padding: 0
}
table {
border-collapse: collapse
border-spacing: 0
}
fieldset, img {
border: 0 none
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal
font-weight: normal
}
li {
list-style: none outside none
}
caption, th {
text-align: left
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%
font-weight: normal
}
q:before, q:after {
content: ""
}
abbr, acronym {
border: 0 none
font-variant: normal
}
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
input, textarea, select {
font-family: inherit
font-size: inherit
font-weight: inherit
}
input, textarea, select {
}
legend {
color: #000000
}
body {
font: 13px/1.231 arial,helvetica,clean,sans-serif
}
select, input, button, textarea {
font: 99% arial,helvetica,clean,sans-serif
}
table {
font-size: inherit
}
pre, code, kbd, samp, tt {
font-family: monospace
line-height: 100%
}
a {
text-decoration: none
}
a:hover, a:focus {
text-decoration: underline
}
strong {
font-weight: bold
}
input[type="submit"] {
cursor: pointer
}
button {
cursor: pointer
}
一、滚动插件,常用于移动端
二、初始化
(1)html结构:
<div class="wrapper">
只能让第一个子元素滚动
<div>
可放入多个子元素
</div>
</div>
(2)css: 外层盒子是定高的
<1>直接给定一个高度
<2>在移动端,如果需要滚动,且需要高度全屏
position: absolute (定位父元素是body)
top:0
bottom:0
(3) 引入iscroll.js
var myscroll = new IScroll(".wrapper")
三、自定义配置
var myscroll = new IScroll(".wrapper",{
scrollX: true, //能够水平滚动
scrollY: false , //在水平滚动时,禁止垂直滚动
snap: "li" // snap: true
click: true,
//如果希望监听滚动事件,则不能引入iscroll.js,
而需要引入iscroll-probe.js, 同时结合 probeType属性
probeType: 3 // 也可以是1,2
})
四、iscroll实例支持的事件
myscroll.on("scroll",function(){})
myscroll.on("scrollStart",function(){})
myscroll.on("scrollEnd",function(){})
myscroll.on("refresh",function(){})
五、iscoll实例的常用属性
1. this.currentPage.pageX
2. this.currentPage.pageY
3. this.currentPage.x
4. this.currentPage.y
5. this.x
6. this.y
六、实例的方法
1.myscroll.refresh() //非常重要的方法,在数据更新后,一定要调用一次该方法
2. myscroll.scrollTo()
3. myscroll.scrollBy()
3. myscroll.goToPage()