HTML+DIV+CSS开发经验与技巧(一).doc

HTML+DIV+CSS开发经验与技巧（一）网页中除了数据显示用table外，基本上都用div来布局，div是最灵活的。一般首页的结构是这样的，用div简单布局第一种：. allContainerWidth:1024px;Margin:auto;.div1Width:300px;Height:30px;#div1Background:red;#div2Background:green;#div3Background:blue;/注释：Width:1024px;是你看到的整个主div，也就是祖先div，也可以说成是根div的宽度。Margin：auto；的作用是让根这个div在父级里面处于剧中的位置，这个div的父级是body，因为被body包含，所有的div都是body的子集，body是html的子集。如果只想把div剧中，还可以写成margin-left：auto；margin-right：auto；效果也是剧中。但是margin设置的剧中时候必须在头部申明版本否则是无效的。Class的意思是类，就是把class为div1的div块归为一类，这样方便统一管理，统一修改，class是非必须的属性，可以有可以没有，但是在实际开发中，通常为了便于后期开发和维护，通常会给经常用到的某些元素加上class。上例中把class为div1的div块的宽度设置为300px；高度设置为30px；Id的意思是给这个元素分配一个id，id跟身份证号码一样，在一个网站中，id在一个页面中是唯一的，理论上在同一个网站的不同页面可以使用同一个id，但是，在实际开发中，不建议这样做，这样做的后果很严重。所以，建议一个网站里面id都应该具有唯一性。在上例中，id为div1的div块背景颜色为红色，id为div2的div块北京为绿色。一个元素可以同时具有class和id属性，而且class和id的值可以相同，不会产生冲突。注意：虽然我们说class和id都可以标示一个元素，而且在CSS里面可以用点或者井号来找到这个元素，但是，我们不妨观察一下现在大多数网站，一个网站里面有很多页面都是相似的，所以我们通常在编写代码的时候要考虑到公用性，有些模块可以公用的尽量公用，尽量减少代码的编写量。既然要公用，我们在css设置属性的时候为了达到一次设置全站公用的目的，通常会给公用的模块里面的元素加上class属性，进行统一的设置。Id一般用到某些必须使用id的地方，比如，某个p标签里面显示的是客户的昵称，这个地方是动态改变的，也就是说每个用户登录上去看到的p标签内容都是不一样的，这个时候自然想到昵称是从服务器端传送到前端的，所以我们给这个p标签设置一个id属性，这样后台或者js代码里面就能很轻松的找到这个元素，并把值准确的传进来。关于class和id的命名规则Class或者id不建议使用符号或者数字作为第一个开始；因为有些浏览器在出现符号开始的时候会出现无法识别的额情况：比如；1div，_div这都是不可以的，在CSS里面ie6可以识别出前面加上*或者_的属性，例如*top30px;但是，在火狐下识别不出来，所以最好不要使用这几种命名，但是这些浏览器的不兼容的特征有时候我们可以利用起来，我们叫做CSS hack，这个以后慢慢熟悉。/这种是把所有的内容包含在一个DIV中除了body，这样的好处是，可以一次定义一行的宽度，不需要多次的定义，container的意思是容器，我们在给class或id起名的时候也要做到见名知义；举例蓝色理想论坛的主体部分第二种：这种形式一般是在整个网页中出现有些div块的宽度是跟其他div不一样的时候；比如一号店的头部部分，导航条的宽度就是100%；这样就只能单独设置；可以采用上述方法，当然，不一定非得去那样做，只是这是一种方法。