您的位置：首页 > Web前端 > CSS

div+css制作简易相册代码

2013-08-21 11:21 302 查看

<!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>
效果图片

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航