精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
在这里,我们需要把切好的图片按原来的顺序排列起来。
首先需要把图片用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层，添加正确的属性值即可。