CSSdivcss布局.docVIP

3 .布局 （图一） （图二） （图三） 要实现如图的这种布局，可以用三个并列关系的div加上样式就可以实现 代码结构： Html代码 div?id=first/div?? ?? div?id=second/div?? ?? div?id=third/div?? div id=first/div div id=second/div div id=third/div 这种代码结构非常灵活，可以仅仅通过样式达到多种布局效果 ? 图一(demo3.1.zip)的css： Html代码 style?type=text/css?? ????body{margin:10px;padding:0;} ?? ????div{background:#ccc;}??? ?? ????#first{float:left;width:100px;?height:150px}??? ?? ????#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}?? ?? ????#third{margin-left:110px;_margin-left:107px;?height:310px} ?? /style?? /*_margin-left:107px;为了ie6多出的3像素而写的hack*/??? style type=text/css body{margin:10px;padding:0;} div{background:#ccc;} #first{float:left;width:100px; height:150px} #second{clear:left;float:left;margin-top:10px;width:100px;height:150px} #third{margin-left:110px;_margin-left:107px; height:310px} /style /*_margin-left:107px;为了ie6多出的3像素而写的hack*/ 图二(demo3.2.zip)的css Html代码 style?type=text/css?? ????body{margin:10px;padding:0;} ?? ????div{background:#ccc;}??? ?? ????#first{float:left;width:100px;?height:300px}??? ?? ????#second{float:right;width:100px;height:300px}?? ?? ????#third{margin:0?110px;_margin:0?107px;?height:300px} ?? /style?? /*_margin:0?107px;?为了ie6多出的3像素而写的hack*/??? style type=text/css body{margin:10px;padding:0;} div{background:#ccc;} #first{float:left;width:100px; height:300px} #second{float:right;width:100px;height:300px} #third{margin:0 110px;_margin:0 107px; height:300px} /style /*_margin:0 107px; 为了ie6多出的3像素而写的hack*/ 图三(demo3.3.zip)的css和js，鼠标hover时当前模块放大比例 Html代码 style?type=text/css?? ????body{margin:0;padding:0;} ?? ????div{background:#ccc;position:absolute;} ?? ????#first{width:100px;?height:150px;top:10px;left:10px;}??? ?? ????#second{width:100px;height:150px;top:170px;left:10px;}?? ?? ????#third{height:310px;top:10px;left:120px;width:200px;}? ?? /style?? script?type=text/javascript?language=text/javascript?? ????function?zoom(id,x,y){?//?设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）??