DIV图片排列

在这里,我们需要把切好的图片按原来的顺序排列起来。

首先需要把图片用PS软件切片工具切片,并新建一个文件夹把切好的图片都放到里面,命名为image。把文件image拖到站点的本地文件夹内。新建HTML,附加CSS样式,接下来我们就可以进行图片的排序了。

实现目标:

将图片正确排列,彼此之间没有空隙。

代码如下:

<body>
<div>
<div class="left">
<div class="left1"></div>
</div>
<div class="left2">
<div class="rigth"><img src="images/666_03.jpg" border="0">
<img src="images/666_04.jpg" border="0">
</div>
</div>
<div class="bottom">
<span><img src="images/666_05.jpg" border="0">
<img src="images/666_06.jpg" border="0" /></span>
</div>
</div>
</body>

错误描述：

在这个过程中,我们会遇到很多问题,比如图片不能置顶,不能浮动在右上角,没有排列在一行内,两个图片叠加到一起等,这些都需要我们去解决。

图片不在一行内

这时候我们可以用<div>和<span>标记。

<span>标记和<div>标记一样作为容器标记而被广泛应用在HTML语言中。在<span>和</span>中间同样可以容纳各种HTML元素,从而形成独立的对象。如果把“<div>”替换成“<span>”,样式表中把“div”替换成“span”,执行后就会发现效果完全一样。可以说<div>和<span>这两个标记起到的作用都是独立出各个区块,在这个意义上说二者没有不同。

<div>与<span>的区别在于,<div>是一个块级元素,它包围的元素会自动换行。而<span>仅仅是一个行内元素,在它的前后不会换行。<span>没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就可以使用<span>元素。

<span>标记同一行，当我们需要在一行内操作的时候就可以用<span>元素。

注意：<span>标记可以包含于<div>标记中，成为它的子元素，而反过来则不成立。

图片叠加

当两个图片叠加到一起时，我们需要新建一个<div>块元素将其分隔开来。

浮动

我们都知道需要浮动时设float属性即可，但有时候设了浮动以后并没有效果，这时候也可以用margin来代替，比如要将一个图片移动到右侧，但设了float属性还是没变化，我们可以算出此时图片到左侧的距离，假设距离396px，则：

margin-left:396px;

将将图片移到右上角的代码为：

<div style="background:url(1.jpg) no-repeat right top;width:600px;height:720px;border:1px #FFF solid;"></div>

原理描述

在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）4个部分组成。类似的，我们可以把整个图片看成一个独立的个体，根据小图片的长宽新建div层，添加正确的属性值即可。

心得体会

两个DIV在一起时,如果后面的浮动方式为靠左的话,而前面的浮动方式是靠右的话,只要左侧空间足够,后面的就会跑到左边去。
右侧固定:左侧设置为position: absolute;右侧右对齐;宽度最好都用比例。
左侧绝对定位,后面的浮动是不会考虑它们的.可以考虑用magin来控制。
同时设置左右margin可以导致div的宽度的调整,同时设置absolute的左右却不能。
如果设置了left就会屏蔽right,如果设置了top就会屏蔽bottom。

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载