css页面的初始化作用是什么?

html-css08

css页面的初始化作用是什么?,第1张

CSS初始化的代码一般要控制常见的页面元素比如body div table等的大小,位置和背景色等夜页面初始加载的样式:

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()