HTML瀑布流布局——世界名胜古迹（含图片）

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>瀑布流布局</title><style>body{background-color: #AAFFEE;margin: 10px;}#page{width: 888px;margin: 0 auto;}.col{column-count: 3;column-gap: 13px;column-fill: auto;}.pic img{width: 260px;}.pic{background-color: white;padding: 20px;margin-bottom: 20px;box-shadow: 5px 5px 5px 1px grey;}</style>
</head>
<body><body><div id="page"><div class="col"><div class="pic"><img src="..\图片\瀑布流布局\1.png"><p>北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，被誉为世界五大宫之首。</p></div><div class="pic"><img src="..\图片\瀑布流布局\2.png"><p>巴黎圣母院大教堂是一座位于法国巴黎市中心、西堤岛上的教堂建筑，也是天主教巴黎总教区的主教座堂。</p></div><div class="pic"><img src="..\图片\瀑布流布局\3.png"><p>意大利古罗马竞技场罗马斗兽场是古罗马帝国专供奴隶主、贵族和自由民观看斗兽或奴隶角斗的地方。</p></div><div class="pic"><img src="..\图片\瀑布流布局\4.png"><p>比萨斜塔是意大利比萨城大教堂的独立式钟楼，位于意大利托斯卡纳省比萨城北面的奇迹广场上。</p></div><div class="pic"><img src="..\图片\瀑布流布局\5.png"><p>古代金字塔是用石块堆叠而成的。金字塔越高，使用的材料越少。金字塔的质心接近基座，可以有效抵挡自然灾害。世界上许多不同的文明古国有建造金字塔？。在数千年的时间里，金字塔是世界上最大的建筑物。</p></div><div class="pic"><img src="..\图片\瀑布流布局\6.png"><p>日本城堡从公元前后到近代有着将近2000多年的历史，其主要建筑目的是防御敌人，因此结构坚固，实战性强。</p></div><div class="pic"><img src="..\图片\瀑布流布局\7.png"><p>巴黎凯旋门位于法国巴黎的戴高乐广场中央，香榭丽舍大街的西端，是拿破仑为纪念1805年打败俄奥联军的胜利，于1806年下令修建而成的。拿破仑被推翻后，凯旋门工程中途辍止。1830年波旁王朝被推翻后又重新复工，到1836年终于全部竣工。</p></div><div class="pic"><img src="..\图片\瀑布流布局\8.png"><p>颐和园是中国清朝时期的皇家园林，前身为清漪园，与圆明园毗邻。它是以昆明湖、万寿山为基址，以杭州西湖为蓝本，汲取江南园林的设计手法而建成的一座大型山水园林，也是保存最完整的一座皇家行宫御苑，被誉为“皇家园林博物馆”。</p></div><div class="pic"><img src="..\图片\瀑布流布局\9.png"><p>希腊神庙也称为希腊神殿，在古希腊宗教中的希腊圣所内，是为安座众神神像的神圣建筑结构。</p></div><div class="pic"><img src="..\图片\瀑布流布局\10.png"><p>长城是古代中国为抵御不同时期塞北游牧部落联盟的侵袭，修筑规模浩大的隔离墙或军事工程的统称。长城东西绵延上万千米，因此又称作万里长城。</p></div><div class="pic"><img src="..\图片\瀑布流布局\11.png"><p>泰姬陵位于印度北方邦阿格拉的一座用白色大理石建造的陵墓，是印度知名度最高的古迹之一。它是莫卧儿王朝第5代皇帝沙贾汗为了纪念已故皇后姬蔓·芭奴而兴建的陵墓。</p></div><div class="pic"><img src="..\图片\瀑布流布局\12.png"><p>悉尼歌剧院位于澳大利亚悉尼，是20世纪最具特色的建筑之一，也是世界著名的表演艺术中心、悉尼市的标志性建筑。</p></div><div class="pic"><img src="..\图片\瀑布流布局\13.png"><p>埃菲尔铁塔设计新颖独特是世界建筑史上的技术杰作，因而成为法国和巴黎的一个重要景点和突出标志。</p></div><div class="pic"><img src="..\图片\瀑布流布局\14.png"><p>红场位于俄罗斯首都莫斯科中央行政区特维尔区的公众广场，为世界文化遗产之一。周围有几处世界著名建筑，包括列宁墓、圣瓦西里大教堂和克里姆林宫。</p></div><div class="pic"><img src="..\图片\瀑布流布局\15.png"><p>布达拉宫位于中国西藏自治区首府拉萨市区西北的玛布日山上，是一座宫堡式建筑群，最初是吐蕃王朝赞普松赞干布为迎娶尺尊公主和文成公主而兴建的。</p></div></div></div></body>
</body>
</html>

图片相对路径自行调整，效果如下：

内容图片：

HTML瀑布流布局——世界名胜古迹（含图片）相关推荐

基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览源码下载实 ...
75行代码完美实现图片完整展示 flex 横向瀑布流布局
布局特点代码简单,完整代码仅仅75行图片完整展示,不会被裁切,等比缩放,而非拉伸以图片异步加载结束时间的顺序渲染图片,防止页面过大闪动最后一行图片过少时,图片正常显示,不会缩放占满整行 tip ...
vue图片瀑布流布局Grid
Grid 最近遇到一个很头痛的问题,根据设计稿需要实现瀑布流布局,找到了一个Multi-columns布局,和flexbox,但这和设计稿的排序方式有出入,这两个的排序方式是先排序第一列,在排序第二列 ...
html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析
一.什么是瀑布流布局瀑布流布局在当下前端网页设计中越来越流行,主要表现形式为上下高度参差不齐的多行布局,往往图片各异大小不等却能够自动适应排成一排按行进行展示,滚动条下拉还不会不断地自动适应加载数据 ...
动态瀑布流布局的图片墙
要实现动态瀑布流布局的图片墙:要做到两点: 一.实现瀑布流的图片墙, 二.使用函数节流监听window的resize事件首先:实现瀑布流的图片墙,网上有各种各样式的实现,但是纯css的实现,总是有些 ...
Flutter 瀑布流布局（根据图片高度展示）
Flutter瀑布流布局,根据后端返回的阿里云上的图片宽高信息来计算决定布局的数据信息效果: 代码: // 模拟数据var listData = [{'img':'https://img11.360 ...
Django --图片瀑布流布局+动态的渲染
文章目录 1. 瀑布流布局原理 2. 具体实现过程 2.1 图片数据库创建 2.2 视图函数 2.3 模板中 1. 瀑布流布局原理在前端页面布局中,图片放置时存在图片宽度.长度大小不一的情况,在不调 ...
html打开图片流,图片网格瀑布流布局和打开图片动画特效
这是一款基于Masonry瀑布流插件的图片网格瀑布流布局和打开图片动画特效.这个瀑布流特效包括打开网格图片时的动画效果,网格的消失动画效果和返回的图片预览效果. 该图片网格瀑布流特效在打开网格图片时, ...
CSS总结——瀑布流布局
瀑布流布局瀑布流布局是一种新型的布局方式,可以将大小不一的图片完整的显示在页面上,并且在杂乱的布局中保持着一定的美感,今天学习了一下如何使用瀑布流布局,总结了有以下三种方式.(瀑布流还可以使用gri ...

HTML瀑布流布局——世界名胜古迹（含图片）

HTML瀑布流布局——世界名胜古迹（含图片）相关推荐

最新文章

热门文章