DIV+Css总结

1.以下是下划线的效果stylep.one{text-decoration:underline;}/*下划线效果*/p.two{text-decoration:overline;}/*顶划线*/p.three{text-decoration:line-through;}/*中间划线*/p.four{text-decoration:blink;}/*闪烁，只在firefox中可以。*/p.five{text-decoration:underlineoverlineline-through;}/*三种同时,有几种就用空格隔开*//style2.英文字母大小写的方式style!--p{font-size:17px;}p.one{text-transform:capitalize;}/*单词首字大写*/p.two{text-transform:uppercase;}/*全部大写*/p.three{text-transform:lowercase;}/*全部小写*/--font-family:Arial,Helvetica,sans-serif;/*字体*/letter-spacing:-2px;/*字母间距*//style3.vertical-align的用法！vertical-align只作用于在同一行内的元素vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline|sub|super|top|text-top|middle|bottom|text-bottom|baseline：与元素的基线对齐。middle：与元素中部对齐。sub：字下沉。super：字上升。text-top：文本顶部对齐。text-bottom：文本底部对齐。top：和本行位置最高元素对齐。bottom：和本行位置最低元素对齐。4.段落的对齐方式style!--p{font-size:12px;}p.left{text-align:left;}/*左对齐*/p.right{text-align:right;}/*右对齐*/p.center{text-align:center;}/*居中对齐*/p.justify{text-align:justify;}/*两端对齐*/--/style5.表格中文本的对齐方式（1）style!--td.top{vertical-align:top;}/*顶端对齐*/td.bottom{vertical-align:bottom;}/*底端对齐*/td.middle{vertical-align:middle;}/*中间对齐*/--/style（2）style!--/*使文字浮于或低于本行文字*/span.zs{vertical-align:10px;}span.fs{vertical-align:-10px;}--/style如下图1：图16．行、字体之间的间距设置line-height:8pt;/*行间距，绝对数值，行间距小于字体大小*/style!--p.one{font-size:10pt;letter-spacing:-2pt;/*字间距，绝对数值，负数*/}p.second{font-size:18px;}p.third{font-size:11px;}p.second,p.third{letter-spacing:.5em;/*字间距，相对数值*/}--/style效果如图2：图27.首字下沉的效果pspan{font-size:60px;/*首字大小*/float:left;/*首字下沉*/padding-right:5px;/*与右边的间隔*/font-weight:bold;/*粗体字*/font-family:黑体;/*黑体字*/color:yellow;/*字体颜色*/}效果如图3：图38.设置图片边框的式样border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset取值：none:默认值。无边框。不受任何指定的border-width值影响hidden:隐藏边框。IE不支持dotted:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线dashed:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线solid:实线边框double:双线边框。两条单线与其间隔的和等于指定的border-width值groove:根据border-color的值画3D凹槽ridge:根据border-color的值画3D凸槽inset:根据border-color的值画3D凹边outset:根据border-color的值画3D凸边举例说明：style!--img.test1{border-style:dotted;/*点画线*/在boreder与style之间加上：left,top,right,bottomborder-color:#FF9900;/*边框颜色*/就可以对各个边框进行设置border-width:5px;/*边框粗细*/}img.test2{border-style:dashed;/*虚线*/border-color:blue;/*边框颜色*/border-width:2px;/*边框粗细*/}--/style效果如图4图49.控制导航条中的字体距离左边的位置.leftbanner{width:22%;height:330px;vertical-align:top;background-color:#6d1700;/*左侧导航条的背景色*/color:#FFFFFF;text-align:left;padding-left:40px;font-size:14px;}具体的效果见下图：图510.当banner的图片不能充满标题可以用背景色看起来像一张图片.具体的操作和效果如下：.topbanner{background-color:#fbc9ba;}图611.关于背景图片的设置background-image:url(03.jpg);/*页面背景图片*/当默认的情况下图片不能充满背景时，则将图片在X、Y轴方向重复图7当然也可以设置让其在一个方向重复style!--body{padding:0px;margin:0px;background-image:url(bg1.jpg);/*背景图片*/background-repeat:repeat-y;/*垂直方向重复*/background-color:#0066FF;/*背景颜色*/}--/style图8让背景图片重复还可以达到意想不到的效果，可以使BANNER看起来达到background-color的效果。tdclass=topbannerimgsrc=banner2.jpgborder=0/td.topbanner{background-image:url(bg2.jpg);/*背景图片*/background-repeat:repeat-x;/*水平方向重复*/例如利用图片bg2作为背景图片图bg2制作出来的效果如下：图9这就是图片加上背景图片的效果12.背景图片的定位body{padding:0px;margin:0px;background-image:url(bg4.jpg);/*背景图片*/background-repeat:no-repeat;/*不重复*/background-position:bottomright;/*背景位置，右下*//*background-position:30%70%;/*背景位置，百分比*//*background-position:300px25px;/*背景位置，具体数值*/background-color:#eeeee8;}实现的效果如下：图10；主要通过图片的background-position来设置13.固定图片不让他随着浏览器滚动条改变而改变background-attachment:fixed;/*固定背景图片*/当然还可以将背景的图片固定，然后在XY轴方面固定他们的位置在这里就不举例说明了body{background-image:url(bg7.jpg);/*页面大背景*/background-repeat:no-repeat;padding:0px;margin:0px;background-attachment:fixed;}div{background-image:url(bg8.gif);/*左侧小图标背景*/background-repeat:repeat-y;/*竖直方向重复*/background-position:5px0px;/*固定位置*/padding-left:110px;padding-top:10px;padding-right:10px;padding-bottom:15px;}14.对表格的设置主要的实现的过程,首先实现整个表格的式样，然后对每一列行的边框等其他的属性进行设置style!--.datalist{border:1pxsolid#429fff;/*表格边框*/font-family:Arial;border-collapse:collapse;/*边框重叠*/}.datalistcaption{padding-top:3px;padding-bottom:2px;font:bold1.1em;background-color:#f0f7ff;border:1pxsolid#429fff;/*表格标题边框*/}.datalistth{border:1pxsolid#429fff;/*行、列名称边框*/background-color:#d2e8ff;font-weight:bold;padding-top:4px;padding-bottom:4px;padding-left:10px;padding-right:10px;text-align:center;}.datalisttd{border:1pxsolid#429fff;/*单元格边框*/text-align:right;padding:4px;}.datalisttr.altrow{background-color:#c7e5ff;/*隔行变色*/}.datalisttr:hover,.datalisttr.altrow{background-color:#c4e4ff;/*动态变色*/当鼠标放置时改变颜色--/style下面是table的代码：tableclass=datalistsummary=listofmembersinEEStudaycaptionMemberList/captiontrthscope=colName/ththscope=colClass/ththscope=colBirthday/ththscope=colConstellation/ththscope=colMobile/th/trtr!--奇数行--tdisaac/tdtdW13/tdtdJun24th/tdtdCancer/tdtd1118159/td/trtrclass=altrow!--偶数行--tdgirlwing/tdtdW210/tdtdSep16th/tdtdVirgo/tdtd1307994/td/trtr!--奇数行--tdtastestory/tdtdW15/tdtdNov29th/tdtdSagittarius/tdtd1095245