第十八章灵活的电子相册

---

 

---

1.搭建框架

• 美女1号
• 大胸，清纯
• ￥99999.00

• 美女2号
• 大胸、成熟
• $99999.55

• 美女3号
• 大胸、诱惑
• $99999.99

注意：

1）pic用于代表带有图片类的div
2）ls代表水平图片，即宽度大于高度，pt代表竖直图片

3）tn用于表示超链接类

2.阵列模式

在CSS中添加如下代码

注意点：

1）由于图片的宽高各位155和130，所以阴影背景图片需要比它们大一点，这里设置的是140和165

2）图片设置了之后需要用padding来调整位置

3）a需要添加display:block属性，不然它不会囊括整张图片

4）隐藏文字用display:none

3.单列模式

div.pic ul{

float:left;

width:200px;

margin:0px;

padding:0px;

background:#dceeff;

border:2px solid #a7d5ff;

font-size:12px;

list-style:none;

position:relative;

top:50px;

}

div.pic li{

line-height:2em;

margin:0;

padding:0;

}

div.pic li.title{

text-align:center;

font-size:16px;

border-bottom:1px solid #a7d5ff;

color:#60C;

}

div.pic li.feature{

text-align:center;

color:#F90;

font-size:14px;

}

div.pic li.price{

padding:0px 0px 0px 11em;

font-style:italic;

color:#999;

}

注意点：

1）将div.pic中的float:left改到div.pic
a.tn中，去掉display:block。接着加宽div，删除div.pic
ul中的display:none，让列表显示出来。

2）利用relative相对位置将ul列表移动至距离top
50px的位置，并让它向左浮动，这时它就竖直居中

3）最后根据自己喜欢设置样式。

最终效果可得：

4.改进阵列模式

改回阵列模式的显示方式

再添加一句

div.pic:hover ul{

display:block;

position:absolute;

}

删除div.pic ul中的相对位置relative

这时既可以看到鼠标悬停时出现的消息框

不过为了设置位置，我们可以在div.pic ul中添加

margin:-10px 0px 0px 0px;

使它离相片更近一点

注意不要使用什么top，bottom，left，right，因为不好设置

最终效果为

5.双向联动模式

@charset “utf-8”;

/* CSS Document */

body{

font-family:Arial;

font-size:20px;

font-weight:bold;

margin:5px auto;

padding:10px;

background-color:#E3DAD1;

}

div.ls a{

background:url(‘Girls/shadow_001.jpg’) no-repeat center;

display:block;

}

div.pt a{

background:url(‘Girls/shadow_002.jpg’) no-repeat center;

display:block;

}

div.ls img{

width:155px; height:130px;

margin:0;

padding:22px 12px;

}

div.pt img{

margin:0px;

padding:10px 24px;

width:130px; height:155px;

}

div.pic a.tn{

float:left;

position:absolute;

}

div.ls:hover a{

background:url(‘Girls/shadow_hover_001.jpg’) no-repeat center;

}

div.pt:hover a{

background:url(‘Girls/shadow_hover_002.jpg’) no-repeat center;

}

div.pic:hover ul{

background-color:#C60;

}

div.pic ul{

margin:0;

padding:5px 20px 5px;

border-top:2px solid #a7d5ff;

border-bottom:2px solid #a7d5ff;

font-size:12px;

list-style:none;

position:relative;

top:200px;

}

div.pic li.content{

text-indent:2em;

}

#p0 a{top:0; left:0;}

#p1 a{top:0; left:160px;}

#p2 a{top:0; left:320px;}

#p3 a{top:0; left:480px;}

#p4 a{top:0; left:640px;}

#p5 a{top:0; left:800px;}

#p6 a{top:0; left:960px;}

重新修改代码

注意点：

1）先让图片向左浮动，为了脱离标准流，即不为文字环绕，可以设置position:absolute，接着从#p0到#p6给图片定位

2）:hover前面是可悬停的位置，后面是效果的标记的效果的表现处。根据这个原理即可实现双向联动

效果如下：

5.1 改变方向

#p0 a{top:0; left:0;}

#p1 a{top:0; left:160px;}

#p2 a{top:160px; left:0px;}

#p3 a{top:160px; left:160px;}

#p4 a{top:320px; left:0px;}

#p5 a{top:320px; left:160px;}

#p6 a{top:480px; left:0px;}

设置位置让它们向左排列

margin-left:350px;

让文字向右移动，如果直接使用left属性的话会造成内容隐藏。所以直接用margin-left可以让内容自动缩放

效果如下：