一、前期准备:
1、最终效果图:
2、开始构建网站的内容结构,现在不要管CSS,而是完全从网页的内容出发,对应的HTML代码如下:

3、下面把代码所对应的界面关系使用图像做个描述:

二、文件说明:
1、生成pinsheying.html文件保存在cssstudy下
2、把HTML中用到的图片保存在cssstudy/images下
3、生成mycss.css文件保存在cssstudy/css下,使用链接的方式引入到HTML文件中,即<link href="css/mycss.css" rel="stylesheet" type="text/css" />
三、开始制作:
1、背景的制作:
body
{
background-image:url(../images/bg.jpg);
background-repeat:repeat-x;
margin:0px;
padding:0px;
}
margin和padding设置为0像素的原因,是由于不同的浏览器与其body的边距稍有差异,为了屏蔽由浏览器所造成的空白边,所以设置为0px。效果如下:

2、设置照片展示区域:
为div设置选择器id="container",为照片ul设置选择器id="profiles"
div#container
{
margin:60px autho 0;
}
ul#profiles
{
margin:0;
padding:40px 0 0;
list-style-type:none;
}
ul#profiles li
{
float:left;
padding:4px;
}
这里均使用了交集选择器,container对应的div之所以把margin-top设置为60px,是为了防止背景上的电影胶边图像遮住作品图像;profiles对应的ul把list-style-type设置为none,是为了去除掉HTML默认的圆点;再通过float:left使照片均向左浮动(强调一点,浮动并没有使块脱离父类所属的流)。效果如下:

3、用图像替换名称和宣传语:
#container h1
{
position:absolute;
top:240px;
left:500px;
}
#container h2
{
position:absolute;
top:280px;
left:500px;
}
效果图:

有时候我们经常为宣传语或名称设置为比较好看的字体,比如“魏碑”体,但由于有可能访问网页的计算机机上并无此字体,访问者看到的是浏览器默认字体,从而在浏览器中显示的效果不清晰,此时一般是用图像来代替文本。
#container h1
{
position:absolute;
top:240px;
left:500px;
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
width:242px;
height:146px;
}
通过增加背景图像及设置图像的大小,使其在(500,240)这个坐标位置,但此时图像上还有名称和宣传语,如下:

我们需要把名称和宣传语隐藏掉,可以通过如下CSS达成目的:
(1)对<h1>增加一个<span>标记
<h1><span>品摄影梦工厂<span></h1>
(2)设置<h1>中的<span>内容和<h2>内容隐藏
#container h2, #container h1 span
{
position:absolute;
top:280px;
left:500px;
display:none;
}
设置后的效果如下:

4、设置最后一个图片位置:
(1)最后一张图片增加类选择器last
<li class="last"><img src=\'#\'" /profile4.jpg" /></li>
(2)为最后一张图片设置相对定位
#profiles li.last
{
position:relative;
left:240px;
}
效果如下:

5、设置网页内容:
(1)把网页内容都包括到一个div块中,并为div设置ID选择器intro

(2)设置这个div的位置
#intro
{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
line-height:17px;
width:240px;
position:absolute;
left:748px;
top:80px;
}
效果如下:

至此这个演示完毕,特别声明:本实例参考《别具光芒》一书。