仿做百度阅读器有感（初级菜鸟写，高手绕道）

最近，跟的项目有充足的空闲时间让我干点自己想干的事，本来想做一个淘宝的页面，鉴于考虑到影响问题，我就转向做百度阅读器了。

 

通过做百度阅读器，感触是有的

第一：页面居中

    我 浏览百度阅读器后，直接用工具测量了页面居左边的距离，直接设置margin:0 200px： 觉得这样页面就会居中了，后来才知道页面居中margin设置的是：0 auto; 我之前那样设置，当浏览器的窗口是最大化的时候感觉它是居中的，当浏览器的窗口缩小时，问题就出现了，页面的左边始终都会留有200px的空间。

第二：浮动

    之 前对浮动的概念一直停留在：浮动是使元素靠左或靠右，目前在ul和div里面用的比较多，对清楚浮动也没有一个概念，只知道要清楚浮动，不知道为什么要这 样做以及原理是什么，记得，有次在做古籍善本书目的时候，上面是一个列表，下面是footer，我给列表添加了一个float后，footer就跑到上面 去了，问俊哥后加了一个clear，footer就下来了，当时觉得很神奇，但是不知道为什么这样做。昨天孙哥帮我解答问题的时候讲到了浮动，添加 clear后，它前面出现的浮动都会相对于它成为平面内的元素挡着它不让它往前跑，还明白了一个元素A里面包含一个没有设定float的元素B，B变大会 带动A变大，当给B添加一个float后，A就不会随着B变大而变大，因为B相当于漂起来了，和A没有接触就影响不了A的大小。

第三：注意使用padding

    给 框框设置了宽度和高度后，使用padding会影响到框框的大小，比如设定一个框：width:50px; height:50px; 给里面的内容设置padding:50px 50px; 这个框就会变成width:150px; height:150px; 遇到这种情况，可以在内容上再加一个div，使用margin,或者是通过计算后再使用padding 。

第四：行高

    做 “官方首页”那一块的时候，使用的是padding 和margin达到是文字居中的效果，其实只用设定：line-height:39px; taxe-align:conter;就行了，39px是红色方块的高度，做“官方网站 功能特点 升级日志 使用帮助”这一块的时候，给他们设定宽度最方便。

第五：单词错误

    有几次加载了背景后，图片总是不出来，查看元素时找不到设置的背景，再去看css时，发现里面的repeat写错了，写成了repaet，所以背景图片就一直显示不出来，没有给背景图片设置高度也不会显示背景图片。

第六：代码重用

    有的属性在不同的class里面重复使用，可以把公共的代码提出来，放到一个class里面，这样可以少写一些代码，整个代码看起来也简洁些。

第七：LOGO图片

    text-indent:-~~px; 使用负值可以使页面不显示logo这个单词，但是在查看元素的时候能够让别人知道这是一个LOGO，设置logo一般使用的是a，a不是一个块极元素，设定了高度和宽度也没有作用，要用到display:block;

第八：加载图片

    要加载一个大图A中的一部分画面B时，如background:url(images/img-common.png) scroll 0 -116px no-repeat;   0 -116px 分别指B距离A的左边距和上边距。

第九：自适应

    想要自适应的宽度使用span，自适应的高度使用min-height:  _height: (对IE6)后面跟最小高度值

下面是几个常用的样式

text-decoration:none; 

margin:0 auto;

text-indent:-500px;

display:block;

overflow:hidden;

border-radius:6px;

text-align:center;

line-height:39px;

font-weight:bold;