手册

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class CSS 创建 CSS Backgrounds(背景) CSS text（文本） CSS Fonts (字体) CSS 链接（link） CSS 列表样式（ul） CSS Table(表格) CSS 盒子模型 CSS Border (边框) CSS 轮廓（outlines）属性 CSS Margin(外边距) CSS Padding（填充） CSS 分组和嵌套 CSS 尺寸 (Dimension) CSS Display(显示) CSS Positioning(定位) CSS Float(浮动) CSS Align(对齐) CSS 组合选择符 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 图片廊 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 总结 CSS 实例

CSS 响应式设计

Viewport 网格视图媒体查询图片视频(Video) 框架

CSS 参考手册

首页大前端 CSS CSS 在线手册

CSS 图片廊

阅读85323

更新时间2022-04-11

CSS 下拉菜单

CSS 图像透明/不透明

CSS 图片廊

以下是使用CSS创建图片廊：

图片廊

以下是使用CSS创建图片廊：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>  
<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="https://img.php.cn/upload/article/000/000/015/5c6a745d11004537.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="https://img.php.cn/upload/article/000/000/015/5c6a7481ca27d671.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="https://img.php.cn/upload/article/000/000/015/5c6a7497d79bb331.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="https://img.php.cn/upload/article/000/000/015/5c6a74a5c34d4293.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>

<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="https://img.php.cn/upload/article/000/000/015/5c6a74fcc8de4670.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img src="https://img.php.cn/upload/article/000/000/015/5c6a7514b1f4c951.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img src="https://img.php.cn/upload/article/000/000/015/5c6a75213c8dd294.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img src="https://img.php.cn/upload/article/000/000/015/5c6a752e30af6886.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>

</body>
</html>

运行实例 ?

点击 "运行实例" 按钮查看在线实例

CSS 下拉菜单

CSS 图像透明/不透明

CSS 图片廊

CSS 图片廊

图片廊

实例

更多实例

实例