本文共 1929 字，大约阅读时间需要 6 分钟。
2、开始构建网站的内容结构，现在不要管CSS，而是完全从网页的内容出发，对应的HTML代码如下：
1、生成pinsheying.html文件保存在cssstudy下 2、把HTML中用到的图片保存在cssstudy/images下 3、生成mycss.css文件保存在cssstudy/css下，使用链接的方式引入到HTML文件中，即<link href="css/mycss.css" rel="stylesheet" type="text/css" /> 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使照片均向左浮动（强调一点，浮动并没有使块脱离父类所属的流）。效果如下：
#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;}
<li class="last"><img src="images/profile4.jpg" /></li> #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;}
效果如下：
至此这个演示完毕，特别声明：本实例参考《别具光芒》一书。
转载地址：http://tdulx.baihongyu.com/