CSS图片布局实例分析

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

圆角图片

实例圆角图片:img {   border-radius: 8px;}实例椭圆形图片:img {   border-radius: 50%;}

缩略图

我们使用 border 属性来创建缩略图。

实例img {   border: 1px solid #ddd;   border-radius: 4px;   padding: 5px;}实例a {   display: inline-block;   border: 1px solid #ddd;   border-radius: 4px;   padding: 5px;   transition: 0.3s;}a:hover {   box-shadow: 0 0 2px 1px rgba   (0, 140, 186, 0.5);}

响应式图片相册

实例.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%;   }}

图片 Modal(模态)

本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。

首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。

然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：

实例// 获取模态窗口var modal = document.getElementById('myModal');// 获取图片模态框，alt 属性作为图片弹出中文本描述var img = document.getElementById('myImg');var modalImg = document.getElementById("img01");var captionText = document.getElementById("caption");img.onclick = function(){   modal.style.display = "block";   modalImg.class="lazy" data-src = this.class="lazy" data-src;   modalImg.alt = this.alt;   captionText.innerHTML = this.alt;}// Get the  element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks on  (x), close the modalspan.onclick = function() {   modal.style.display = "none";}