网页制作div+css工作心得体会

1/7网页制作DIVCSS工作心得体会网页制作DIVCSS工作心得体会一、头部的定义1、CONTENT“IEEMULATEIE7“这句是把IE8浏览器强制使用IE7的兼容模式2、头部的DTD定义要根据需要定义（一般不用管它）简历大全/HTML/JIANLI/二、DIV布局1、居中问题IE通过设置TEXTALIGN属性为CENTER可以实现，MARGIN0AUTO可以实现居中，但前提是DIV不能再FLOAT。WRAPPERWIDTH720PXMARGIN0AUTO2、DIV之间默认是会自动换行的，如果要实现不换行就要应用FLOAT或借助绝对定位。同级的元素尽量同时浮动或者不浮动，这样有利于控制和兼容性。3、绝对定位问题如果一个父DIV的几个子DIV要实现绝对定位，切记父DIV的POSITION属性一定要设置为RELATIVE，几个子DIV的POSITION则设置为ABSOLUTE。为2/7了实现子DIV的精准定位，子DIV的高度和宽度都建议明确规定像素大小。ZINDEX属性值为整数，属性值大的在上层。LEFT、RIGHT、TOP、BOTTOM、四个属性控制子DIV的位置。4、外连文件式CSS放在在网页的HEAD与/HEAD之间加上一句这样的代码LINKREL“STYLESHEET“HREF“在这里填上你的CSS文件地址（相对路径文件名）“TYPE“TEXT/CSS“论文网5、首行缩进“TEXTINDENT”右面的缩进单位选择框中“EM”指的就是字符位（1汉字）。6、盒子模型虚线内部是内容显示的地方，黄色的地方是算在BORDER里面的，同时背景图片也是计算黄色区域的面积的（PADDING与背景图片这样经常搭配实现一些效果的）。三、CSS样式1、CSS权重（优先级）CASE2样式内容CASE2样式内容3/7以上为例权重最高的是STYLE“CLOORRED“，然后是ID“CASE2“最后是CLASS。首先权重最高的是页面STYLE样式。然后是ID优先级要高于CLASS。ID是唯一的。CLASS一个页面可以出现很多个，最后是全局的样式。（这一点很重要）2、CSS样式重定义/CSS样式重定义开始/毕业论文网BODYFONTSIZE12PXFONTFAMILYARIAL,HELVETICA,SANSSERIFPADDING0MARGIN0COLOR666666BACKGROUNDFFFDIV,FORM,UL,DD,DL,OL,DT,LI,PLISTSTYLENONEPADDING0MARGIN0H1,H2,H3,H4,H5,H6FONTSIZE100MARGIN0PADDING0毕业论文IMGBORDERNONENONEDISPLAYNONEATEXTDECORATIONNONECOLOR444CURSORPOINTERAHOVERCOLORFF0000TEXTDECORATIONNONECLEARWIDTH0HEIGHT0MARGIN0PADDING0LINEHEIGHT0PXFONTSIZE0PXCLEARBOTHOVERFLOWHIDDEN4/7/CSS样式重定义结束/因为各个浏览器对一些属性的预定义不一样，所以要用到以上是常用的CSS重定义，这样写出的页面才能兼容多个浏览器。（这个很重要几乎必须要写，可以根据需求修改）3、CSS缩写AMARGIN、PADDING一样的缩写形式的缩写如顺时针MARGIN上右下左简写MARGIN0AUTOMARGIN0AUTO0AUTOMARGIN0AUTO10PXMARGIN0AUTO10PXAUTO所以MARGIN10PX0AUTO这个就等于MARGIN10PX0AUTO0B背景BACKGROUND背景BACKGROUND属性可能会包含背景色、背景图、背景图的位置和背景图重复方式的参数,如BACKGROUNDIMAGEURL“”BACKGROUNDPOSITIONTOPCENTERBACKGROUNDREPEATNOREPEAT其实可以写成BACKGROUNDURLNOREPEATTOPCENTER顺序可以变，属性之间要空格，不然IE6不识别5/7CBORDERS边框如果你想声明一个1像素宽的实线黑色边框，可能会写成BORDERWIDTH1PXBORDERSTYLESOLIDBORDERCOLOR000其实可以写成BORDER1PXSOLID000D文字文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式FONTSTYLEITALICFONTWEIGHTBOLDFONTSIZE1EMLINEHEIGHT150FONTFAMILY宋体,ARIAL,SANSSERIF其实可以优化成一行FONTITALICSMALLCAPSBOLD1EM/150宋体,ARIAL,SANSSERIF4、HACK（兼容CSS针对某个浏览器）BACKGROUNDCOLORYELLOW00是留给IE8的，（IE8通常会被本文开头的那句代码强制使用IE7编码）BACKGROUNDCOLORPINKIE7定了；_BACKGROUNDCOLORORANGE_专门留给神奇的IE6；6/7注IE都能识别标准浏览器如FF不能识别；IE6能识别，（样式编写的时候最好在火狐下调试正确后再去看别的浏览器兼容问题。）、5、POSITION属性在CSS中关于定位的内容是POSITIONRELATIVE|ABSOLUTE|STATIC|FIXEDSTATIC静态没有特别的设定，遵循基本的定位规定，不能通过ZINDEX进行层次分级。简历大全/HTML/JIANLI/RELATIVE相对定位对象不可层叠、不脱离文档流，参考自身静态位置通过TOP,BOTTOM,LEFT,RIGHT定位，并且可以通过ZINDEX进行层次分级。（使用FLOAT正常排版，可以无视他的影响，主要作用是用于定位内部ABSOLUTE的元素）ABSOLUTE绝对定位脱离文档流，通过TOP,BOTTOM,LEFT,RIGHT定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，ABSOLUTE元素将以BODY坐标原点进行定位，可以通过ZINDEX进行层次分级。（就是配合RELATIVE属性进行定位）F