【CSS】摄影师个人网站布局

一、前期准备：

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;
}

效果如下：

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