我去，这图截得，来看看原图：

最起码给我截个中间的吧，所以你得加一句来调整背景的位置：background-position:center;(center即是将背景放置正中间)这样才算差不多了吧，当然你们随便下一张图片当背景都OK啦，仲基欧巴也不错哟~

2. 定位置

其实明显看到被咨询那一排挡住了一些，因为不在一层，原理翻阅第二篇。(让你们学完就忘，╭(╯^╰)╮哼!)

所以得让其浮起来，并使用margin把与周围的距离隔离出来。

那么怎么去算位置呢，如果你是UI的话，应该很清楚你平时给开发的标注是用来干什么的吧?随便量量就造啦：

也就是加上float向右和顶部距离12px;就可以确定此div的位置了。

pic_content的样式基本就这些了：

.pic_content{ width:380px; height:568px; background:url(imges/01.jpg"text-align:center">

即成如下效果：

是不是有点像啦?

里面的文字，唔……有的两三个字是可以不用定大小哦，因为文字嘛，作为设计师知道的，多少大小的文字，占的像素就为多少，例如14px的字体，占像素就为14*14px，当然，特别特殊的就不能保障了。但是这里的有些文字是在有限的宽度内显示，有换行，便说明装文字的盒子是有宽高的，其次，在第二步定位置时，不仅要考虑上下的margin，还要考虑左右的距离。(-_-||| 事情变得好复杂耶)

先写第一行吧，它与黑盒子的样式又不一样，那……就意味着我们又要重添一个盒子啦。其实第一步定大小无非就是为了不遮挡其他、不被其他遮挡、不错位……然而字体就一行，且远远小于黑盒子的宽，所以可以不用管第一步哦。

这里要用到一个新标签了：<p></p>;这是一个主要用来装文本的盒子，想了解其属性的自己可以查阅W3C.

其样式为：

.black p {color:white; font-size:20px; font-weight:500; float:left; margin-left:24px; margin-top:16px; font-family:"微软雅黑"}

各个属性我就不用一一介绍了吧，不过值得一提的地方是，前面已经介绍，不加“.”的标签名代表指当前html文件中所有标签都引用该样式，其实是蛮危险的一种做法，但是这里的p前面还有一个“.black” ，则特指black包含的所有p标签，也就是对其之外的p标签无影响。

最终效果如下图：

底下还有两种文本，算是留给你们的作业吧，下期公布答案。其实你要是只是看看，那真的是对不起你看文章花的这点时间，下个DW去实践一下吧。

算起来，这期主要讲了样式几个写法，及静态页的基本排版步骤，都是经验之谈，并非神马标准……

来说点题外话吧!

所有的标签里面，<div></div>的使用率是相当高的;最后当我学了javas cript后，几乎就只用div了。为嘛呢?无论是专门用作按钮的button标签还是下拉专用的 select 标签……有些它们自带的默认样式是灰常丑的，需要采用一些比较麻烦的步骤才能去除或替换成设计稿里那种比较漂亮的效果。div可以模拟大部分的页面控件，可以是矩形、圆角矩形、圆形、甚至三角形、梯形，这么神通广大，还不是样式支持……你说呢?