web前端--制作图像画廊，鼠标经过小图时显示大图
web前端开发，使用HTML文件制作图像画廊，用css文件规定样式，实现当鼠标经过小图时显示大图。
·
目录
HTML文件
<!--edu_7_4_1.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hoverbox Image Gallery</title>
<link rel="stylesheet" href="css/hoverbox.css" />
</head>
<body>
<div id="" class="">
<h1>鼠标经过图片显示大图(Hoverbox Image Galleery)</h1>
<ul class="hoverbox"> <!--hoverbox图像画廊-->
<li><a href="#">
<img src="img/photo01.jpg" alt="description" class="preview" />
<img src="img/photo01.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo02.jpg" alt="description" class="preview" />
<img src="img/photo02.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo03.jpg" alt="description" class="preview" />
<img src="img/photo03.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo04.jpg" alt="description" class="preview" />
<img src="img/photo04.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo05.jpg" alt="description" class="preview" />
<img src="img/photo05.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo06.jpg" alt="description" class="preview" />
<img src="img/photo06.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo07.jpg" alt="description" class="preview" />
<img src="img/photo07.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo08.jpg" alt="description" class="preview" />
<img src="img/photo08.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo09.jpg" alt="description" class="preview" />
<img src="img/photo09.jpg" alt="description" />
</a></li>
<li><a href="#">
<img src="img/photo10.jpg" alt="description" class="preview" />
<img src="img/photo10.jpg" alt="description" />
</a></li>
</ul>
</div>
</body>
</html>
CSS文件
*{ /*全局声明*/
border:0;
margin:0;
padding:0;
}
a{ text-decoration: none;}
div{ /*定义图层的样式*/
width:720px;
height:500px;
margin:0 auto;
padding:30px;
text-align: center; /*定义内容居中显示*/
}
body{ /*定义主体样式*/
position:relative; /*位置属性为相对*/
text-align: center;
}
h1{ /*定义h1的样式*/
background:inherit;/*定义背景属性取值为继承*/
border-bottom: 1px dashed #097; /*设置底边框的粗细、样式、颜色*/
color:#000097;
font:17px Georgia,serif; /*设置字体的字号，字体，字体样式*/
margin:0 0 10px;/*左外边距0，上下外边距0，右外边距10px*/
padding:0 0 35px;/*左内边距0，上下内边距0，右内边距35px*/
text-align:center;
}
/*=Hoverbox Code*/
.hoverbox{cursor:default;list-style:none;}/*去掉列表号前的符号*/
.hoverbox a{cursor:default;}
.hoverbox a .preview{display: none;}/*大图初始加载为不显示*/
.hoverbox a:hover .preview{ /*派生选择器声明*/
display:block; /*一块方式显示*/
position:absolute; /*以绝对方式显示，图可以层叠*/
top:-33px; /*相对当前位置偏移量*/
left:-45px; /*相对当前位置偏移量*/
z-index:1; /*表示在上层（原小图在底层）*/
}
.hoverbox img{ /*定义图像样式*/
background:#fff;
border-color:#aaa #ccc #ddd #bbb; /*设置边框颜色*/
border-style:solid; /*设置边框线的类型*/
border-width:1px; /*设置边框线的宽度*/
color:inherit; /*inherit继承父类的字体、颜色、背景*/
padding:2px; /*表示上下左右边距皆为2px*/
vertical-align:top; /*把元素的顶端与行中最高元素的顶端对齐*/
width:100px; /*设置图片的宽度*/
height:75px; /*设置图片的高度*/
}
.hoverbox li{ /*定义列表项样式*/
background:#eee; /*#eee等同于#eeeeee,以下格式相同*/
border-color:#ddd #bbb #aaa #ccc;
borderbox-style:solid;
border-width:1px;
color:inherit;
float: left; /*定义图像向左浮动*/
display:inline; /*设置为行内显示*/
margin:3px; /*设置四边外边距皆为3px*/
padding:5px;
position:relative; /*定义为相对的方式*/
}
.hoverbox .preview{ /*定义大图样式*/
border-color:#000;/*边框颜色*/
width:200px;
height:150px;
}
ul{padding:40px;margin:0 auto;} /*定义ul样式*/
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)