CSS 图片廊
图片廊
T以下是使用CSS创建图片廊：
实例
<html>
<head>
<style>
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
T以下是使用CSS创建图片廊：
实例
<html>
<head>
<style>
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
- 作者：华体会体育2串1
来源：华体会体育2串1
- 发布时间：2025-03-29 阅读：7
- 扫一扫 分享悦读
- CSS 图像透明/不透明
- 注意：CSS Opacity属性是W3C的CSS3建议的一部分。
- 03-29 关注：0
- CSS 图片廊
- CSS 图片廊
- 03-29 关注：1
- CSS 下拉菜单
- 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。
- 03-29 关注：0
- CSS 导航栏
- 熟练使用导航栏，对于任何网站都非常重要。
- 03-29 关注：0
- CSS 伪元素
- CSS伪元素是用来添加一些选择器的特殊效果。
- 03-29 关注：0
- CSS 组合选择符
- CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。
- 03-29 关注：1
- CSS Float（浮动）
- CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
- 03-29 关注：0
- CSS 水平对齐(Horizontal Align)
- 关于 CSS 中元素的水平对齐(Horizontal Align)，你可以使用多种属性来进行设置。
- 03-29 关注：1