div+css制作简易相册代码

最新推荐文章于 2024-04-28 15:06:30 发布

牛奶_c

最新推荐文章于 2024-04-28 15:06:30 发布

阅读量2.5k

点赞数

分类专栏： web前端开发

web前端开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易CSS相册</title>
      <style>
       *
    {
     margin:0;
     padding:0;
    }
    body
    {
     background-color:#333333;
     padding-top:10px;
    }
    #photo
    {
     position:relative;
     width:748px;
     height:550px;
     margin:0 auto;
     border:1px solid #fff;
    }
    h1
    {
     position:absolute;
     right:10px;
     bottom:10px;
     width:100px;
     height:20px;
     font:normal 12px/1.5em "宋体";
     text-align:center;
     color:#fff;
    }
    #photo ul
    {
     list-style:none;
    }
    li
    {
     width:54px;
     height:54px;
     overflow:hidden;
     float:left;
     margin:10px;
     display:inline;/*在IE6下浮动元素对父块元素设置左边距,会出现边距加倍的错误，可以设置父元素也浮动，或者设置本元素display:inline;解决在IE6下双倍间距的bug问题 */
    }
    ul
    {
     width:148px;
     height:444px;
     float:right;/*这里选择浮动布局，也可以使用定位布局 */
     border:1px solid #fff;
     border-width:0 0 1px 1px;
    }
    /* 使用定位布局将UL移动到右边,见下的注释： */
    /*
    ul
    {
     width:148px;
     height:444px;
     position:absolute;
     top:0;
     right:0;
     border:1px solid #fff;
     border-width:0 0 1px 1px;
    }
    */
    #photo li a
    {
     display:block;/*内联元素只有先转换为块元素之后才能设置宽度和高度属性*/
     width:50px;/*width+border-left+border-right=54px */
     height:50px;/*height+border-top+border-bottom=54px */
     border:2px solid #cccccc;
     overflow:hidden;/*添加overflow:hidden;主要功能是避免相片的宽度和高度过大而撑开a标签设置的宽度和高度属性值：50px */
    }
    img
    {
     border:none;/*在IE6下图片的边缘有蓝色的边框线，IE8和FF浏览器没有蓝色边框线，这里的蓝色边框线说明图片是有超链接功能的，超链接默认给图片添加了边框，不过这里有蓝色边框线很丑，我们将其删除 */
     display:block;/*视乎没有作用*/
     margin:-150px 0 0 -80px;/*相册在默认情况下以略缩图的形式在右边展现给浏览者，不压缩图片的原有宽度和高度属性，而是取相片中任意某个部分作为略缩图形式。不压缩图片的原有宽度和高度属性，取相片中任意某个部分作为略缩图形式的方法：1.利用position移动照片在a中的位置，这个时候需要将img和a同时设置成定位;2.利用负边距（margin的属性值为负值）的方式改变图片的位置*/
    }
    /*利用position取相片中任意某个部分作为略缩图形式如下:*/
    /*
    a
    {
     position:relative;
    }
    img
    {
     position:absolute;
     left:-80px;
     top:-150px;
    }
    */

    /*下面实现当鼠标悬停于某一张图片上时，相册列表中的略缩图恢复原为原始的相片的宽度和高度，并且展现在相册的某个区域*/

    /*首先解决IE6的:hover BUG问题*/
    li a:hover
    {
     border:2px solid #000;/*没有这个属性也可以,这个属性只是为了改变鼠标触发的时候a标签的边框颜色，提升页面的显示效果，并非是解决ie6 BUG问题 */
     background-color:#333333;
    }/*IE6浏览器的解析效果十分怪异，如果我们在CSS样式中没有定义锚点a的:hover伪类属性，那么li a:hover img就会失效，不仅如此，如果在锚点a的:hover伪类属性中延用了a标签的部分或者全部属性，即使属性值有任何改变，li a:hover img中的效果一样会失效（例如这里li a:hover中只有border:2px solid #000;时，它延用了a标签的部分属性，而且改变了边框的颜色值，会发现在IE6下一样无效）。为了解决这个问题，我们必须且只能在li a:hover中增加锚点a中没有的属性，这里增加的是：background-color:#333333; 这样的修改不仅不会对页面有任何不好的影响，反而或许还会有好处*/

    /*解决IE6的:hover BUG问题到此结束*/

li a:hover img,.normal
    {
     position:absolute;
     left:10px;
     top:10px;
     width:576px;
     height:500px;
     margin:0;/*清除前面img中的margin:-120px 0px 0px -100px;*/
     border:2px solid #ffffff;
    }
    .normal/*li a:hover img固定定位以后.normal才进行定位，它们在同一个层次内，由后定位的.normal图片遮挡住先定位的li a:hover img的图片，所以需要用z-index:-1;使li a:hover img中的图片优先级高于.normal*/
    {
     z-index:-1;
    }
      </style>
</head>

<body>
      <div id="photo">
          <h1>简易CSS相册</h1>
          <ul>
              <li><a href="#"><img src="images/1.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/2.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/3.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/4.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/5.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/6.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/7.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/8.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/9.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/10.jpg" alt="美图" /></a></li>
              <li><a href="#"><img src="images/11.jpg" alt="美图" /></a></li>
          </ul>
          <img src="images/7.jpg" class="normal" />
      </div>
</body>
</html>

效果图片

牛奶_c

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
div+css制作简易相册代码

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档 *{ /*设置各个元素的内外边距均为0，方便后面各个元素的调整*/ padding:0; margin:0; }
复制链接

扫一扫