手把手一步步教你div+css布局网页一(以我的主页为例).docVIP

今天起，我将从头到尾使用div+css制作我的首页。希望通过这个实例总结自己的div+css布局经验，同时帮助想学习的人。一.定义通用的样式? 1.设置字体与字号，一般设置字体为arial,字号为12px.??? 可能显示文本的有body,td,input,textarea,select??? 所以定义如下样式：??? body,td,input,textarea,select{font-size:12px;font-family:arial;}? 2.定义body的外边距margin:0;内边距padding:0;背景色background:#fff;??? 对齐方式text-align:center;默认是左对齐。??? 样式如下：??? body{margin:0;padding:0;background:#fff;text-align:center;}? 3.常用需要定义的元素??? ul,li一般是要去掉标记的list-style:none;??? img一般是要设置线宽为0的border:0;??? 常出现的元素一般是要定义内外边距为0的，即margin:0;padding:0;??? 样式如下：??? ul,li,img,form,h1,h2,h3{margin:0;padding:0;border:0;list-style:none;}? 4.分隔线是常用元素单独定义一下。??? hr{height:0;border:0;border-top:solid 1px #ddd;}? 5.链接有必要单独定义一下。??? a{color:#000;text-decoration:none;}?a:hover{color:#c30;text-decoration:underline;}? 6.table需要单独定义??? /*一般要显示细表格，细线颜色即表格背景色。??? 表格宽度一般要占满100%*/??? .tbl{width:100%;background:#ddd;}??? /*行的背景色为表格的显示颜色*/??? .tbl tr{background:#fff;}??? /*表头一般定义加粗，背景颜色也与td不同，一般重一些。*/??? .tbl tr.th{font-weight:bold;background:#f6f6f6;}??? /*一般要文本居中*/??? .tbl tr td{text-align:center;}? 7.经常用到的样式定义成一个类，方便调用。??? /*浮动，对齐方式*/??? .lt{float:left;}??? .rt{float:right;}??? .clr{clear:both;}??? .ct{text-align:center;}??? .tlt{text-align:left;}??? .trt{text-align:right;}??? /*显示与隐藏*/??? .hd{display:none;}??? .blk{display:block;}??? /*加粗与手形*/??? .bld{font-weight:bold;}??? .hand{cursor:pointer;}? 8.通用盒子??? 溢出隐藏定义overflow:hidden;??? 定义宽度，根据效果图的宽度width:950px;??? 由于body定义了居中，这里要定义文本左对齐，text-align:left;??? 定义外边距继承父级margin:auto;??? 样式如下：??? .bodyer{overflow:hidden;margin:auto;width:950px;text-align:left;} 通用样式如下，以后复制过去使用即可。 ?/*全局通用样式定义*/?body,td,input,textarea,select{font-size:12px;font-family:arial;}?body{margin:0;padding:0;background:#fff;text-align:center;}?ul,li,img,form,h1,h2,h3{margin:0;padding:0;border:0;list-style:none;}?hr{height:0;border:0;border-top:solid 1px #ddd;}?/*浮动，对齐方式*/?.lt{float:left;}?.rt{float:right;}?.clr{clear:both;}?.ct{text-align:center;}?.tlt{text-align: