CSS 图片廊

最新推荐文章于 2024-07-04 07:10:19 发布
原创 最新推荐文章于 2024-07-04 07:10:19 发布 · 343 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS #图片廊

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

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<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="responsive">
			<div class="img">
				<a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
					<img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文字描述" width="300" height="200">
				</a>
				<div class="desc">这里添加图片文本描述</div>
			</div>
		</div>
		
		<div class="responsive">
			<div class="img">
				<a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
					<img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文字描述" width="300" height="200">
				</a>
				<div class="desc">这里添加图片文本描述</div>
			</div>
		</div>
		
		<div class="responsive">
			<div class="img">
				<a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
					<img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文字描述" width="300" height="200">
				</a>
				<div class="desc">这里添加图片文本描述</div>
			</div>
		</div>
		
		<div class="responsive">
			<div class="img">
				<a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
					<img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文字描述" width="300" height="200">
				</a>
				<div class="desc">这里添加图片文本描述</div>
			</div>
		</div>
	</body>
</html>

 

 

响应式图片廊

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<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;
			}
			
			* {
				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="http://www.runoob.com/wp-content/uploads/2016/04/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="img_forest.jpg">
			  <img src="http://www.runoob.com/wp-content/uploads/2016/04/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="img_lights.jpg">
			  <img src="http://www.runoob.com/wp-content/uploads/2016/04/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="img_mountains.jpg">
			  <img src="http://www.runoob.com/wp-content/uploads/2016/04/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;">
		  
		 <h4>重置浏览器大小查看效果</h4>
	</body>
</html>

参考：

https://www.yuque.com/docs/share/464a24bf-48d7-4e60-a39b-7cd28112dbd7

CSS 下拉菜单、提示工具、图片廊、计数器
corlin6688的博客
11-08 352
唐诗
html中怎样滚动图片,CSS如何实现滚动的图片栏（代码实例）
weixin_39637723的博客
06-04 5582
本文给大家介绍CSS如何实现滚动的图片栏(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下主要原理是通过动画向左移动。首先给出两组一样的图片(同一行上)，让整体图片向左移动一组图片的长度，这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是...
Jquery图片走廊
01-25
Jquery图片走廊效果相当不错，非常流畅
【css】css图片廊
z767327552的专栏
12-27 406
思路：利用左浮动进行排列，设置hover效果，动画自设。浮动清除使用伪元素after css: .responsive { float: left; padding: 0 6px; width: 24%; margin: 10px auto;
css-图片廊
qq_50563868的博客
04-17 227
图片廊 代码如下： <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" co
css--图片廊
weixin_34400525的博客
07-19 190
一、图片廊 1、以下是使用 CSS 创建图片廊： 标签如下 <!doctype html> <html> <head> <meta charset="utf-8"/> <title>图片廊</title> <style> body{ mar...
CSS简单创建图片廊
weixin_51929568的博客
02-25 530
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .photo { margin: 5px; float: left; width: 200px; border: 1px solid gray;
CSS 图片廊：打造精美网页展示
xyq2024的博客
07-04 375
通过以上步骤，我们可以使用CSS创建一个既美观又实用的图片廊。当然，这只是一个基础示例，您可以根据自己的需求添加更多高级功能和样式，如图片懒加载、lightbox效果等，来进一步提升用户体验。记住，CSS提供了几乎无限的设计可能性，关键在于您的创意和实现。
用html和css实现一个图片廊的几张图片的不同过渡效果。
最新发布
11-29
在HTML和CSS中，你可以创建一个图片轮播或图片廊，并为其添加各种过渡效果。下面是一个简单的例子，我们将展示如何使用CSS的`transition`属性和一些基本的HTML结构。 首先，在HTML部分，创建一个包含几张图片的容器...
CSS_图片廊&透明度
dolola的博客
01-27 264
practice 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:100px
CSS基础-17-图片处理（图片廊、响应式图片廊、透明图片）
架构+开发+运维
04-28 977
文章目录1. 图片廊2. CSS3的媒体查询来创建响应式图片廊 1. 图片廊 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style> /* 打img标签的div的效果 */ div.img { margin: 5px; border: 1px solid #ccc; float
web前端－CSS 图片廊 －026
helloMr_wo的博客
10-11 503
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.baidu.com</title> <style> div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-a
CSS图片廊实例详解
bcbobo21cn的专栏
05-26 2859
效果： div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; bor
CSS图片廊
weixin_34281477的博客
07-19 176
CSS图片廊 根据元素的浮动，将图片所在div放在一行，设置悬浮样式hover 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>图片廊</title>![图片描述][...
[CSS]CSS 图片廊
FL1768317420的博客
06-11 175
【代码】[CSS]CSS 图片廊。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值