综合案例—《芜湖佳友宠物美容摄影工作室》
饲养宠物已成为都市人的时尚。越来越多的宠物猫宠物狗悠然走进居民小区，俨然成为人们家庭中的一员。
本节我们将带大家制作一个宠物网站，如图12-3-1是本例的最终效果。
图12-3-1
案例重点练习知识点：背景的应用、绝对定位、焦点图等。
本案例看起来是不是有点面熟？对！我们在讲背景练习——“同时定义背景图与背景色”的时候用过这个页面的背景图；我们在第六章讲新闻列表的时候，做过本页面的爱宠知识部分；在讲图片列表的时候，做过本页面的图片列表部分；本页面的焦点图部分也我们在第十一章jQuery特效练习过内容，只不过在这里多了一个“最新作品”的拐角标签。
先分析下整个页面的结构，如图12-3-2：
图12-3-2
整体布局
本案例整体用到的大的区块如下所示：
<div id="header"></div>
<div id="nav"></div>
<div class="main clear"></div>
<div class="main clear "></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
从上到下依次是头部header、导航nav、两个用来放内部子区块的main、三个图片列表区块imgList、友情链接friend、底部footer。
然后在此基础上细分，两个main里的第一个main区块里放.news、scroll、sidebar，第二个main里放banner和products，进一步细分的结构如下：
<div id="header"><h1>芜湖佳友宠物店</h1></div>
<div id="nav">
<ul></ul>
</div>
<div class="main clearfix">
<div></div>
<div></div>
<div></div>
</div>
<div class="main clearfix">
<div></div>
<div></div>
</div>
<div>
<div class=”hd”><a href="#">更多</a><h2>最新宠物摄影</h2></div>
<ul></ul>
</div>
<div>
<div class=”hd”><a href="#">更多</a><h2>最新宠物摄影</h2></div>
<ul></ul>
</div>
<div>
<div class=”hd”><a href="#">更多</a><h2>最新宠物摄影</h2></div>
<ul></ul>
</div>
<div></div>
<div></div>
有些区块添加了.clearfix类，如<div class="main clearfix">
当我们的元素浮动后对布局产生了影响，这时我们就可以根据需要添加clearfix类，来闭合浮动。前提是我们在样式里要有以下样式作为支持：
.clearfix:after{
content:"";
clear:both;
display:block;
}
.clearfix{ *zoom:1;}
很多时候都是我们在制作的时候发现了问题才会加clearfix，并不是一开始就会加好，根据需要边做边调整。
全局样式
下面我们就开始样式的编写。首先，分析全局，我们发现有很多地方是一样的，因此我们可以在样式的开头将通用的样式先写出来，全局样式如下：
*{ margin:0; padding:0;}
li{ list-style:none; /*去除全部li默认黑点*/}
a{ text-decoration:none; /*定义所有的a链接默认无下划线*/}
.clearfix:after{
content:"";
clear:both;
display:block;
}
.clearfix{ *zoom:1;}
img{ border:0; /*定义所有的图片默认无边框*/ }
【代码分析】从全局看，整个页面的所有的li都不需要前面的黑点，不论是新闻列表还是图片列表都不需要。因此，我们直接定义li{ list-style：none；}将全部的li前默认的黑点去除。页面中有很多地方需要通过伪元素来闭合浮动，因此在样式的开头我们也声明了.clearfix:after类以及兼容ie6的.clearfix{ *zoom:1;}页面上用到了很多图片，将他们的所有图片的默认边框清除，因此这里声明了img{ border:0;}来作用于所有图片。
整体背景及头部定义
在本书第三章，我们做过一个同时定义背景图与背景色的练习，用的就是本例的图片。这里由于我们讲网站的主题“芜湖佳友宠物美容摄影工作室”几个字以及地址电话等以图的形式做到了背景里，因此我们还要在头部区域header里添加让搜索引擎抓取的h1标签。具体样式如下：
body{
background:#d6f4a8 url(../images/body_bg.jpg) no-repeat top;
font-size:12px;
}
#header{
width:1000px;
height:90px;
margin:0 auto;
border:#000 solid 1px;
}
图12-3-3
h1标签里的主题文字显示到了header里，如图12-3-3。这里我们可以利用text-indent来将其移出画面即可。
#header h1{text-indent:-9999px;}
导航部分
导航的练习我们在第六章已经做过，具体的制作方法在此不在赘述具体样式如下：
#nav{
width:1000px;
height:35px;
background:url(../images/menu_bg.png);
margin:0 auto;
}
#nav li{
float:left;
background:url(../images/nav_line.gif) no-repeat right;
}
#nav a{
line-height:35px;
padding:0 14px;
color:#000;
font-family:微软雅黑;
font-size:14px;
}
#nav a:hover{
text-decoration:underline;
color:#F00;
}
#nav .none{ background:none;}
样式中需要注意的一点就是我们利用了最后一个li的class名来将其右侧边框定义为无#nav .none{ background:none;}。导航部分效果如图12-3-4：
图12-3-4
主体main
在结构中我们将爱宠知识、焦点图以及右侧两个广告放到了第一个main里。而下面的摄影团购广告和新品上架部分我们放到了第二个main里，两个main都有相同的特性，为了看的方便起见我们给它设置了一个边框属性：
.main{
width:980px;
background:#FFF;
margin:0 auto;
padding:10px 10px 0 10px;
border:#000 solid 1px; /*为main设置黑色边框，以便于清楚地看到两个主体区块*/
}
整体main显示如图12-3-5：
图12-3-5
首main三栏布局
将整体main区块样式写好之后，下面就针对每个main里的栏目进行布局，首先从第一个main开始布局。第一个main里分爱宠知识、焦点图已经[A1] 侧栏广告区块。
我们利用浮动布局将其设置成并排的三栏，子栏目浮动，父栏目自然要添加clearfix类来闭合浮动，在结构中我们已经添加了clearfix类。
下面先对三栏进行布局，这里我们对三栏进行宽高及边框设置，并利用浮动让他们三栏在一横排显示，具体样式如下：
.news{
width:230px;
height:269px;
border:#000 solid 1px;
float:left;
}
.rollMain{
width:483px;
height:269px;
border:#000 solid 1px;
float:left;
margin-left:10px;
}
.sidebar{
width:220px;
height:269px;
border:#000 solid 1px;
float:right;
}
通过以上样式将其设置成左中右三栏，样式中我们为了排版方便临时给三栏都设置了高度，因为这时里面还都没有内容，当我们往里面填充内容后应该将高度全部删掉，以内容来撑起区块的高度，否则固定的高度不会有弹性。此时效果如下图12-3-6：
图12-3-6
爱宠知识
爱宠知识部分我们在第六章已经做过此练习，在此不必赘述，前面列表相关知识学的扎实的同学，这里应该没任何问题。
爱宠知识部分设置完成，效果如下图12-3-7：
图12-3-7
焦点图
焦点图部分，我们在结构里已经设置好了rollMain区块，下面我们在里面填充其HTML内容：
<div>
<span></span>
<div>
<ul>
<li><a href="#"><img src="images/01.jpg" /></a></li>
<li><a href="#"><img src="images/02.jpg" /></a></li>
<li><a href="#"><img src="images/03.jpg" /></a></li>
<li><a href="#"><img src="images/04.jpg" /></a></li>
</ul>
<ul>
<li>标题一</li><li>标题二</li><li>标题三</li><li>标题四</li>
</ul>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
</div>
</div>
【结构分析】我们在焦点图区块rollMain里首先设置了一个空的span标签，它的作用是用来设置焦点图右上角的“最新作品”标签。整个焦点图内容部分，我们放到了区块roll里面。
焦点图的制作我们在上一章已经讲过，在此不在赘述，我们将之前第11章练习过并保存的jdt.css以及js文件引入进来即可。这里主要是讲解案例中的布局应用练习。
首先引入焦点图所需文件：
<link rel="stylesheet" type="text/css" href="css/jdt.css" media="all" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jdt.js"></script>
图12-3-8
这时，如图12-3-8我们可以看到之前我们为焦点图的主体rollMain设置的高度不足以容纳下整个焦点图部分，我们为rollMain设置的黑色边框没有整个包裹住里面的roll焦点图部分，现在将开始设置的焦点图的主体rollMain的高度给删除，让里面的内容将其撑起。
.rollMain{
width:483px;
height:269px; /*删除高度*/
border:#000 solid 1px;
float:left;
margin-left:10px;
}
将高度删除之后，其高度自然由其内部的roll部分给撑了起来，如图12-3-9：
图12-3-9
rollMain的高度删除之后，rollMain将其全部包裹住，rollMain便有了弹性，会随着子容器的内容而被相应的撑高。
下面我们继续对rollMain进行进一步的样式的设置：
.rollMain{
width:483px;
float:left;
margin-left:10px;
background:#E8E8E8; /*给rollMain设置灰色背景*/
padding:4px; /*给rollMain设置一个4像素的内间距*/
border:#999 solid 1px; /*重新设置边框为灰色*/
position:relative; /*设置rollMain为相对定位，以便于其内部span进行绝对定位*/
}
这时焦点图部分便有了灰色背景，及深灰色边框。同时，我们为其设置了相对定位relative，为其内部的“最新作品”的小标签进行绝对定位做好准备，此时效果如图12-3-10所示：
图12-3-10
下面进行右上角的“最新作品”标签的制作，我们为rollMain里的span设置宽、高等样式：
.rollMain span{
width:78px;
height:78px;
display:block;
border:#000 solid 1px;
}
在上面的样式中，我们给span设置了宽高已经[A2] 转区块设置黑色边框后，这时我们课[A3] 在页面中看到span的显示，这时，由于我们还没有对其进行绝对定位，它还处于文档流中占据着相应的位置，目前效果如图12-3-11：
图12-3-11
下面继续设置span标签部分：
.rollMain span{
width:78px;
height:78px;
display:block;
border:#000 solid 1px;
background:url(../images/bq.png); /*为span设置背景图*/
position:absolute; /*并设置其绝对定位*/
z-index:1; /*设置span的位深度为1，让其置于最上层，其他为 设置深度均默认为0*/
}
我们为span定义了绝对定位、背景以及相应的位深度后，这时的标签效果，如下图12-3-12所示：
图12-3-12
然后我们还要继续通过方向设置，使其定位到右上角，继续添加属性：
.rollMain span{
width:78px;
height:78px;
display:block;
border:#000 solid 1px;
background:url(../images/bq.png);
position:absolute;
z-index:1;
right:-5px; /*设置离右侧距离为-5像素*/
top:-5px; /*设置离上部距离为-5像素*/
}
由于该标签需要超出容器的范围，让其正好卡到容器的边框上，我们为其设置了负值，使其进一步向右和向上移动5像素。效果如图12-3-13
图12-3-13
右侧栏广告区块
右侧广告栏的内容只有两张图片，html如下：
<div>
<a href="#"><img src="images/photoBanner.jpg" style="margin-bottom:8px;" /></a>
<a href="#"><img src="images/zaishou.jpg" /></a>
</div>
侧栏里的内容只有两张加了链接的图片，填充内容后，我们自然要在侧栏样式里将高度删除。
.sidebar{
width:220px;
height:269px;
border:#000 solid 1px;
float:right;
}
这时，侧栏的效果如图12-3-14所示：
图12-3-14
目前侧栏的位置还需要进行进一步设置，为了达到进一步的美观，我们还需要让侧栏区域继续向上向右靠一点，但是如何才能超出父容器padding：10px的限制呢？下面继续设置：
.sidebar{
width:220px;
float:right;
margin-right:-5px; /*设置侧栏离右侧-5*/
margin-top:-9px; /*设置侧栏离上部-9*/ }
图12-3-15
利用margin的负值我们实现了我们想要的效果如图12-3-15，挣脱了其父容器padding：10px的限制，效果实现后，这时可以将边框删除或者注释掉即可。
到目前为止，首个main主体区块里的三个子栏目全部设置完成。
左侧广告及新品上架
第二个主体栏里的左侧广告部分以及“新品上架”区块，是一个简单的左右布局，其布局方法在此不在赘述。“新品上架”中的图片列表部分利用了同样的拐角标签如图12-3-16，其制作方法和焦点图上的拐角标签大同小异，具体第二主体栏HTML代码如下：
<div class="main clearfix">
<div>
<a href="#"><img src="images/banner.jpg" /></a>
</div>
<div>
<div><a href="#">>>更多</a><h2>新品<span>上架</span></h2></div>
<ul>
<li><span></span><a href="#"><img src="images/xp1.jpg" />香波</a></li>
<li><span></span><a href="#"><img src="images/xp2.jpg" />香波</a></li>
<li><span></span><a href="#"><img src="images/xp3.jpg" />blue Bay</a></li>
<li><span></span><a href="#"><img src="images/xp4.jpg" />贝特艾斯</a></li>
<li><span></span><a href="#"><img src="images/xp5.jpg" />波波</a></li>
</ul>
</div>
</div>
整个本区块样式如下：
.banner{ float:left; width:253px; }
.product{ width:720px; float:right; }
.product .hd{ padding-left:8px; border-left:#c74c4d solid 5px; margin-bottom:7px; }
.product .hd a{ float:right; }
.product h2{ color:#83b200; font-size:22px; height:17px; line-height:17px; }
.product h2 span{ color:#000;}
.product ul{ border:#98d02c solid 3px;}
.product ul li{ width:116px; float:left; margin:12px 13px 0 13px; position:relative; text-align:center;
line-height:25px; _display:inline; word-wrap:break-word; }
.product img{ border:#CCC solid 1px; padding:3px; width:108px; height:108px; }
.product li span{ display:block; width:42px; height:39px; background:url(../images/new.png);
position:absolute; top:0; left:0;}
这里也都是我们之前练习过内容，设置完成后，效果如图12-2-16
图12-3-16
图片列表部分
后面三栏图片列表部分，其效果基本相同，只有每一个栏位的标题部分的背景不同。由于本栏目我们在第11章已经做过此练习。下面我们将其html代码及样式列出，为了节省版面我们省略了部分代码，具体HTML如下：
<div>
<div class="hd green"><a href="#">>>更多摄影作品</a><h2>最新宠物摄影</h2></div>
<ul>
<li><a href="#"><img src="images/sy1.jpg" />左岸生活“我宠我show”</a></li>
……
</ul>
</div>
<div>
<div class="hd yellow"><a href="#">>>更多美容靓照</a><h2>最新美容靓照</h2></div>
<ul>
<li><a href="#"><img src="images/z1.jpg" />泰迪呆呆</a></li>
……
</ul>
</div>
<div class="imgList clearfix">
<div class="hd blue"><a href="#">>>更多在售狗狗</a><h2>在售狗狗</h2></div>
<ul>
<li><a href="#"><img src="images/zs1.jpg" />黑色小泰迪</a></li>
……
</ul>
</div>
在结构中我们为了样式设置方便，我们给三个标题部分又分别定义了另外一个类名，以便于为不同的头部背景图留下接口：
<div class="hd green"><a href="#">>>更多摄影作品</a><h2>最新宠物摄影</h2></div>
<div class="hd yellow"><a href="#">>>更多摄影作品</a><h2>最新宠物摄影</h2></div>
<div class="hd blue"><a href="#">>>更多在售狗狗</a><h2>在售狗狗</h2></div>
此部分和我们之前第六章练习过的图片列表基本相同，样式在此省略。先不要看源码，自己动手写写看。
友情链接及底部版权
最后友情链接和底部版权部分HTML代码如下：
<div class="main friend">
<ul>
<li>友情链接：</li>
<li><a href="#">戴汶倬的博客</a></li>
<li><a href="#">联盟画室</a></li>
<li><a href="#">芜湖新闻网</a></li>
<li><a href="#">芜湖健康网</a></li>
<li><a href="#">芜湖汽车网</a></li>
<li><a href="#">芜湖泰迪乐园</a></li>
<li><a href="#">芜湖网页设计培训</a></li>
<li><a href="#"></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/poweredby.png" /></a></li>
<li><a href="#"><img src="images/wuhujiayoulogo.gif" /></a></li>
</ul>
</div>
<div id="footer">
<p>Copyright © 2005-2011 wuhujiayou All Rights Reserved 芜湖佳友宠物美容摄影工作室版权所有</p>
<p>芜湖市新时代商业街79号 皖ICP备11019759号 联系电话：0553-2275081</p>
</div>
在友情链接部分用到了两个列表，一个文字列表一个图片列表。底部版权部分用到了两个段落p。
样式代码如下：
.friend ul{ padding-bottom:10px;}
.friend li{ float:left; }
.friend li a{ margin-right:10px; color:#006600;}
#footer p{
text-align:center;
line-height:30px;
}
设置完成后，效果如图12-3-17所示：
图12-3-17
页面全部设置完成之后，将一开始我们设置的用来看到其范围的边框注释掉或者删除掉即可。
