八面玲珑：巧用CSS为图片添加修饰点缀效果

最新推荐文章于 2022-02-22 15:48:00 发布

dianzongfan5428

最新推荐文章于 2022-02-22 15:48:00 发布

阅读量224

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/yuzhongwusan/archive/2008/10/21/1315660.html

版权

原文来自：CSS Decorative Gallery
翻译整理：西米CC

基本原理【Basic Concept】：

要实现本实例的效果，需要在DIV或A等图片容器中添加一个额外的标签，最终的修饰效果就是通过对span设置背景来实现的。当然如果你不希望在你的代码中插入这个span标签，也可以用JS的方法来实现，在本教程中也将提及：

<!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>Demo | Photo With Text</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 607px;
font: 70%/140% Arial, Helvetica, sans-serif;
}
h1 {
background: #fdcd07;
margin: 20px 0 10px;
padding: 4px;
text-align: center;
color: #801d03;
font: 310%/100% Garamond, Georgia, serif;
letter-spacing: 2px;
text-transform: uppercase;
}
h1 em {
border: dashed 1px #e3792c;
display: block;
padding: 10px 0;
font-style: normal;
}
.credits {
width: 280px;
margin: 0 auto 20px;
text-align: center;
border-bottom: solid 1px #ccc;
padding: 0 0 8px 0;
font: 130%/110% Garamond, Georgia, serif;
}
.credits em {
color: #999;
}
.credits a {
color: #333;
text-decoration: none;
text-transform: uppercase;
}
.credits a:hover {
text-decoration: underline;
}
img {
border: none;
}

/* ---------- gallery styles start here ----------------------- */
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
padding: 10px;
margin: 0;
float: left;
position: relative;
width: 180px;
height: 130px;
}
.gallery li:hover img {
border-color: #000;
}
.gallery img {
background: #fff;
border: solid 1px #888;
padding: 5px;
}
.gallery em {
background: #fff url(images/grey-gradient.gif) repeat-y;
color: #000;
font-style: normal;
padding: 2px 10px;
display: block;
position: absolute;
top: 110px;
left: 9px;
border: 1px solid #999;
border-left-color: #888;
}
.gallery a {
text-decoration: none;
}
.gallery a:hover em {
background: #ffdb01 url(images/orange-gradient.gif) repeat-y;
border-color: #c25b08;
}
.STYLE1 { font-size: 36px;
color: #CC0000;
}
</style>
</head>

<body>
<h1>简单文字介绍 
<a href="http://ximicc.com" class="STYLE1">翻译：西米CC</a></h1>
 by: <a href="http://www.webdesignerwall.com">Web Designer Wall</a>

<ul class="gallery">
<li><a href="http://ximicc.com">Abstract<img src="images/1.jpg" alt="image" border="0" /></a></li>
<li><a href="http://ximicc.com">Life<img src="images/2.jpg" alt="image" border="0" /></a></li>
<li><a href="http://ximicc.com">Virus<img src="images/3.jpg" alt="image" border="0" /></a></li>
<li><a href="http://ximicc.com">Butterfly<img src="images/5.jpg" alt="image" border="0" /></a></li>
<li><a href="http://ximicc.com">Flow<img src="images/9.jpg" alt="image" border="0" /></a></li>
<li><a href="http://ximicc.com">Nature<img src="images/14.jpg" alt="image" border="0" /></a></li>
<li><a href="http://ximicc.com">Cassie<img src="images/6.jpg" alt="image" border="0" /></a></li>
<li><a href="http://ximicc.com">DJ<img src="images/7.jpg" alt="image" border="0" /></a></li>
<li><a href="http://ximicc.com">Car<img src="images/10.jpg" alt="image" border="0" /></a></li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2008/10/21/1315660.html

dianzongfan5428

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
八面玲珑：巧用CSS为图片添加修饰点缀效果

原文来自：CSS Decorative Gallery翻译整理：西米CC基本原理【Basic Concept】：要实现本实例的效果，需要在DIV或A等图片容器中添加一个额外的标签，最终的修饰效果就是通过对span设置背景来实现的。当然如果你不希望在你的代码中插入这个span标签，也可以用JS的方法来实现，在本教程中也将提及：<!DOCTY...
复制链接

扫一扫