1 / 7
文档名称:

这一大块是之前我们命名的box4,我们把这一大块先看成上.doc

格式:doc   大小:594KB   页数:7页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

这一大块是之前我们命名的box4,我们把这一大块先看成上.doc

上传人:zhoubingchina1 2019/11/17 文件大小:594 KB

下载得到文件列表

这一大块是之前我们命名的box4,我们把这一大块先看成上.doc

文档介绍

文档介绍::..这一大块是之前我们命名的box4,我们把这一大块先看成上下两个小块,,他们都比总宽窄了点,从这个图片下载下来我们得知,宽度是958px,总宽是980px,为了使box41和box42能够居中显示,因此这里就把box4的左右内边距padding设置为11像素。<divclass="box4"><divclass="box41"></div><divclass="box42"></div></div>.box4{width:958px;height:auto;margin-top:5px;float:left;padding:011px;}.box41{width:958px;height:46px;float:left;background-image:url();}.box42{width:942px;height:auto;float:left;border-left:7pxsolid#08834D;border-right:9pxsolid#08834D;border-bottom:7pxsolid#08834D;}我们这里把box42的左右下边框定义一下,左右边框的宽度为什么不一样,我也不知道。。。应该做成一样的,不过我们现在是在仿站,就不考虑那么多了。注意:总宽度是左边框+宽度+右边框这个之前提到过,这里在说一遍,说明它的重要性。下面我们来做box42里面的元素。可以看出,是由重复的4块div。每一块我们这里定义为zjbox。从上面我们知道box42的可活动总宽度是942px。上图我们看到,中间有5个小缝隙,我们这里设定每个缝隙的宽度是10像素,那么,zjbox的宽度就应该是(942-10*5)/4=223像素。.zjbox{width:223px;height:auto;float:left;margin-left:10px;display:inline;}设置左外边距是10像素。也就是刚说的缝隙宽度。下面我们来单独做zjbox简单分为上下两部分,上面有边框,下面是一张图片,。<divclass="zjbox1"><ahref="#"><imgsrc="images/"width="106"height="146"/></a><divclass="zjbox12"><ahref="#">陈志安教授</a></div><divclass="zjbox13">陈志安主任,中国肝病防治协会会员,医学硕士,从事肝病临床工作近三十..[<ahref="#">详细</a>]</div></div>我这里把zjbox1在分成三小块,头像图片是一块,右边上面专家名字是一块,下面简介是一块。头像图片可以直接定义img,其余两块命名为了zjbox12和zjbox13..zjbox1{width:217px;height:auto;float:left;border:;padding:2px;}这里zjbox1的总宽度是223px,但是它有内边距上下左右各是是2像素,所以活动区域width就