CSS 基础（022_图片画廊）
来源：互联网 发布：组织架构优化原则 编辑：程序博客网 时间：2024/06/16 15:07
原始网址：http://www.w3schools.com/css/css_image_gallery.asp
翻译：
CSS 图片画廊（CSS Image Gallery）
CSS 可用于创建图片画廊：
<!DOCTYPE html><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>CSS Image Gallery</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>.w3-col{float:left;width:100%;padding:0 8px;}@media only screen and (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}@media only screen and (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3,.w3-quarter{width:24.99999%}.w3-col.l4,.w3-third{width:33.33333%}.w3-col.l5{width:41.66666%}.w3-col.l6,.w3-half{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8,.w3-twothird{width:66.66666%}.w3-col.l9,.w3-threequarter{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}</style><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> <div style="margin-left: 220px; padding-top: 20px;"> <div class="w3-col l10 m12"> <div class="w3-clear"> <p class="intro">CSS can be used to create an image gallery.</p> <div class="responsive"> <div class="img"> <a target="_blank" href="http://www.w3schools.com/css/img_fjords.jpg"> <img src="http://www.w3schools.com/css/img_fjords.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="http://www.w3schools.com/css/img_forest.jpg"> <img src="http://www.w3schools.com/css/img_forest.jpg" 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="http://www.w3schools.com/css/img_lights.jpg"> <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" 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="http://www.w3schools.com/css/img_mountains.jpg"> <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> </div> </div> </div> </div></body></html>图片画廊（Image Gallery）
使用 CSS 创建下列图片画廊：
<!DOCTYPE html><html><head><style>div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 180px;}div.img:hover { border: 1px solid #777;}div.img img { width: 100%; height: auto;}div.desc { padding: 15px; text-align: center;}</style></head><body> <div class="img"> <a target="_blank" href="http://www.w3schools.com/css/img_fjords.jpg"> <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="http://www.w3schools.com/css/img_forest.jpg"> <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="http://www.w3schools.com/css/img_lights.jpg"> <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="http://www.w3schools.com/css/img_mountains.jpg"> <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div></body></html>更多示例
<!-- 响应式图片画廊 --><!-- 如何使用 CSS3 的媒体查询（media queries）创建响应式图片画廊 --><!DOCTYPE html><html><head><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>Responsive Image Gallery</h2> <h4>Resize the browser window to see the effect.</h4> <div class="responsive"> <div class="img"> <a target="_blank" href="http://www.w3schools.com/css/img_fjords.jpg"> <img src="http://www.w3schools.com/css/img_fjords.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="http://www.w3schools.com/css/img_forest.jpg"> <img src="http://www.w3schools.com/css/img_forest.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="http://www.w3schools.com/css/img_lights.jpg"> <img src="http://www.w3schools.com/css/img_lights.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="http://www.w3schools.com/css/img_mountains.jpg"> <img src="http://www.w3schools.com/css/img_mountains.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;"> <p> This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%). </p> <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> </div></body></html> 0 0
- CSS 基础（022_图片画廊）
- CSS 基础（023_图片小精灵）
- 图片画廊
- 图片画廊
- 图片画廊
- 用CSS做滑动效果的图片画廊
- CSS 基础（001_语法）
- CSS 基础（002_边框）
- CSS 基础（003_盒子模型）
- CSS 基础（004_外边距）
- CSS 基础（005_轮廓）
- CSS 基础（006_图标）
- CSS 基础（007_表格）
- CSS 基础（008_显示）
- CSS 基础（010_定位）
- CSS 基础（012_浮动）
- CSS 基础（016_伪类）
- CSS 基础（017_伪元素）
- 第九周项目三（矩阵转置）
- Leetcode-142. Linked List Cycle II
- CocosStudio（八）AtlasLabel数字标签、BitmapLabel自定义字体、Label文本框
- 偏函数functools.partial
- Android软键盘弹出时把布局顶上去的解决方法
- CSS 基础（022_图片画廊）
- edittext 显示问题
- ABAP选择表解析
- 开发Android Apps，我所努力学习到的三十多条宝贵经验
- mybatis查询sql中in条件使用(foreach)
- 【CodeForces 208E】Blood Cousins
- 【iOS开发】Xcode8 vvdocument插件失效解决方法
- 自定义View，有这一篇就够了
- 第九周项目三（2）稀疏矩阵相加
