码迷,mamicode.com
首页 > Web开发 > 详细

(12)用css设计电子相册 {下}

时间:2016-06-29 01:08:09      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:

本篇学习资料讲解:

       延续上一篇的学习资料,仍然介绍 使用css对电子相册进行排版 和 侧面强调“盒子模型、标准流、浮动和定位”的重要性。

     上篇学习资料介绍的“阵列模式电子相册”,如果也能够看到详细信息就更好了。如果能够在鼠标指针经过时出现一个信息框,并显示文字内容,鼠标离开以后该信息框自动消失,这样不但页面非常简洁,而且可以方便浏览者快速掌握信息。

1、“鼠标指针经过时动态出现文字信息”电子相册

先看效果图再说:

技术分享

上图中,可以看到当鼠标指针经过第一行的第四张图片时,它的下面出现了一个详细信息框,这个信息框的样式和上篇学习资料介绍的“单列模式电子相册”中的设置是相同的。

 下面继续引用上一篇学习资料中的“简单案例” 里的{html部分的基本框架}进行讲解,简单案例的详细内容请到上一篇学习资料获取,这里不做详细。。。。

 下面开始增加创建一个名为“array2.css”的css文件,这其实是在“单列模式”css修饰部分的基础上进行增加一些:(添加的部分css修饰用粉红色表明)

div.pic{                         /*将每个div设置固定高度和宽度,添加左浮动,用margin使相邻div之间隔开*/
    height:160px; width:160px;        /* 每幅图片块的大小 */
    margin:5px;
    float:left;                        /* 向左浮动 */
}
div.pic img{            /*将div中的img元素,即图像的边框设置为none,这是因为图像在链接中,如果不取消边框就会出现默认的粗边框,影响美观。*/
    border:none;
}
div.ls{
    background:url(framels.jpg) no-repeat center;    /* 水平图片的背景 */
}
div.pt{
    background:url(framept.jpg) no-repeat center;    /* 竖直图片的背景 */
}
div.ls img{                            /* 水平图片 */  /*之所以将图片设置固定的宽度、高度,是为了配合刚添加的背景图,让图片看起来更美观*/
    margin:0px;
    height:90px; width:135px;
}
div.pt img{                                    /* 竖直图片 */
    margin:0px;
    height:135px; width:90px;
}
div.ls a{
    display:block;                    /* 定义为块元素 */
    padding:34px 14px 36px 11px;    /* 将超链接区域扩大到整个背景块 */
}
div.pt a{
    display:block;
    padding:11px 36px 14px 34px;    /* 将超链接区域扩大到整个背景块 */
}
div.ls a:hover{                        /* 鼠标经过时修改背景图片 */
    background:url(framels_hover.jpg) no-repeat center;       /*为宽度大于高度的“水平方向”图片在鼠标指针经过上面时增加一个橘色背景:横向的90*125像素*/
}
div.pt a:hover{
    background:url(framept_hover.jpg) no-repeat center;      /*为宽度大于高度的“水平方向”图片在鼠标指针经过上面时增加一个橘色背景:横向的90*125像素*/
}
div.pic ul{
    display:none;                    
}
div.pic:hover ul{
    display:block;
    position:absolute;
   }
div.pic ul{                            /* 设置相片信息的样式 */
    margin:-5px 0 0 0px;
    padding:0 0 0 0.5em;
    background:#dceeff;
    border:2px solid #a7d5ff;
    font-size:12px;
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
   }
div.pic li{
    line-height:1.2em;
    margin:0;
    padding:0;
}
div.pic li.title{    
    font-weight:bold;
    padding-top:0.4em;
    padding-bottom:0.2em;
    border-bottom:1px solid #a7d5ff;
    color:#004586;
}
div.pic li.catno{
    color:#0068c9;
    margin:0 2px 0 6em;
    padding-left:5px;
    border-left:1px solid #a7d5ff;    
}
div.pic li.price{
    color:#0068c9;
    font-style:italic;
    margin:-1.2em 2px 0 11em;
    padding-left:5px;
    border-left:1px solid #a7d5ff;
}

(1)

div.pic:hover ul{
    display:block;
    position:absolute;
   }

代码的含义是:

   {1}当鼠标指针经过某一个照片所在的div时,将ul列表的display属性有原来的none改为block,也就是从隐藏改为常规模式;

   {2}设置绝对定位,将ul脱离标准流。

 

(2)

div.pic ul{                            /* 设置相片信息的样式 */
    margin:-5px 0 0 0px;
    padding:0 0 0 0.5em;
    background:#dceeff;
    border:2px solid #a7d5ff;
    font-size:12px;
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
   }

代码的含义是:调整ul的位置,让每个ul列表距离照片近一些,剩下的其他简单这里就不做解释了。

效果图:

技术分享

 

2、“双向联动模式”电子相册

      前面所介绍的每张图片的“说明文字内容”都比较少,没几个字,但是现实中对于每一张图片的说明文字内容可能会比较多,所以不得不为电子相册设计一个新的版式,那就是接下来所介绍的“双向联动模式”。先看图再说:

技术分享

上图中很直观地看到,页面中的图像和说明文字完全分离,各自排列,那么它们是如何关联起来的呢?其实“简单案例”里的{html部分的基本框架}”不需要大改动,仍然在一个div中包含了图像和文字内容,这里要做的就是给每个div分配一个惟一的ID。

下面拿一个div出来解释:

<div class="pic ls" id="c0">
        <a href="photo/m01.jpg" class="tn"><img src="photo1/s01.jpg"/></a>
        <ul>
            <li class="title">坑塘村*菊</li>
            <li class="info">这里配合说明文字。不但当鼠标指针位于某一个图像上面的时候,该图像会更换背景,而且当鼠标指针在某段文字上面的时候,相应的图像也会更换背景。</li>
        </ul>
    </div>

代码中变化不大,只是在div标记中增加了id属性的设置,页面中共有8个div的,依次为“c0~c7”。

html部分修改以后,那么开始对css修饰部分进行以上效果图效果设计:

(1)所有图片绝对定位,设置位置:

div.pic a{
   position:absolute;
  }

  #c0 a{top:0;left:0;}
  #c1 a{top:0; left:160px;}
  #c2 a{top:0;left:320px;}
  #c3 a{top:0;left:480px;}
  #c4 a{top:160px;left:0px;}
  #c5 a{top:160px; left:160px;}
  #c6 a{top:160px;left:320px;}
  #c7 a{top:160px;left:480px;}
  

  div.pic img{
     border:none;
  }

{1}要使每个div中的图像都分离出来,显然只有使用绝对定位才能实现,因此把所有的div中的图像都设置为绝对定位;

{2}因图像设置为“绝对定位”,而没有设置top、bottom、left和right中的任意一个时,这个脱离标准流的盒子会保持在原来的位置,将每张图片依次通过top和left属性放置到页面顶部。

{3}将div中的img元素,即图像的边框设置为none,这是因为图像在链接中,如果不取消边框就会出现默认的粗边框,影响美观。

效果图:

技术分享

 

(2)设置<ul>列表的位置,和每个<li>的样式:

 div.pic ul{
     border-top:1px #aaa solid;
     border-bottom:1px #fff solid;
     padding:5px 20px 5px;
     margin:0px;
     font-size:12px;
     list-style:none;
position:relative; top:330px; } div.pic li.info{ text-indent:2em; } div.pic li.title{ font-weight:bold; }

{1}设置ul的边框等属性之外、还将position属性设置为relative,并将top设置为330px,这样就使各个ul都向下移动了330像素。

{2}对文字的首行缩进。

{3}字体进行了“粗体”设置。

效果图:

技术分享

至此,基本布局已经实现了。

(3)下面就需要为图像设置背景、为设置鼠标指针经过时的效果,方法和上一篇学习资料的案列是类似的,如下:

 div.ls a{
      background:url(framels.jpg) no-repeat center;   /*为宽度大于高度的“水平方向”图片增加一个白色背景(看起来类似框架):横向的90*125像素*/
   }
   div.pt a{
      background:url(framept.jpg) no-repeat center;   /*为宽度大于高度的“水平方向”图片增加一个白色背景(看起来类似框架):横向的90*125像素*/
   }

    div.ls img{                                        /* 水平相片 */
        margin:0px;
        height:90px; width:135px;
    }
    div.pt img{                                        /* 竖直相片 */
        margin:0px;
        height:135px; width:90px;
    }
    div.ls a{
      display:block;
      padding:34px 14px 36px 11px;             /*将超链接区域扩大到整个背景块*/
    }
    div.pt a{
      display:block;
      padding:11px 36px 14px 34px;             /*将超链接区域扩大到整个背景块*/
    }
    div.ls:hover a{
       background:url(framels_hover.jpg) no-repeat center;  /*为宽度大于高度的“水平方向”图片在鼠标指针经过上面时增加一个橘色背景:横向的90*125像素*/
    }
    div.pt:hover a{
       background:url(framept_hover.jpg) no-repeat center;  /*为宽度大于高度的“水平方向”图片在鼠标指针经过上面时增加一个橘色背景:横向的90*125像素*/
    }

效果图:

技术分享

(4)设置双向联动的鼠标指针经过时效果,也就是当鼠标指针经过一段文字(或者其相应的照片)时,这段文字也要以特殊的样式显示,如下:

div.pic:hover ul{
      background:#CCC;
      border-top:1px red solid;
      border-bottom:1px red solid;
    }

效果图:

技术分享

这样就完全实现了“双向联动”,图像和相应的文字完全分离,而鼠标指针经过二者中的任何一个,都会产生相同的效果。

 

 

 

 

(12)用css设计电子相册 {下}

标签:

原文地址:http://www.cnblogs.com/KTV123/p/5618961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!