文字放在图片的下面 web前端网页布局

效果图：

源代码：

<!DOCTYPE html>
<html>
<head>
<style>div.box{width:800px;height:300px;border:deeppink 3px dashed;border-radius:30px;background-color:mediumturquoise;margin-top:100px;margin-left:250px;}
div.gallery {margin: 5px;border: 1px solid #ccc;float: left;width: 180px;
}div.gallery:hover {border: 1px solid #777;
}div.gallery img {width: 100%;height: auto;
}div.desc {padding: 15px;text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="gallery"><a target="_blank" href="https://www.baidu.com/link?url=KJbcuxTk_lJZm33HdOwKrg2Jg2MJg6gXdWE2Quwe6-7Tl9vbTd3_6tyf08hDtsVidzAuwxLWjUkR9bfileIkeembFBgDPcWBUR_YO3oPfa1vA6PimWV3REnck5S6-AM61_KH9LBdt1gSj8_RmnLd5-fHo-VRXEiyhnTg5ppIYQPpmItSRwLk98DneP48csmszmrG0bQBSnA-qK2In0H6-eQeCxaBwPiH4yuuXfRPmRLEzkmnDHI8geD_NNiW_u1R&click_t=1622433596013&s_info=1263_660&wd=&eqid=eb81931a000008620000000360b45f37"><img src="data:images/flower-1.jpg" alt="Cinque Terre" width="600" height="400"></a><div class="desc">花花草草</div></div><div class="gallery"><a target="_blank" href="https://www.baidu.com/link?url=KJbcuxTk_lJZm33HdOwKrg2Jg2MJg6gXdWE2Quwe6-7Tl9vbTd3_6tyf08hDtsVidzAuwxLWjUkR9bfileIkeembFBgDPcWBUR_YO3oPfa1vA6PimWV3REnck5S6-AM61_KH9LBdt1gSj8_RmnLd5-fHo-VRXEiyhnTg5ppIYQPpmItSRwLk98DneP48csmszmrG0bQBSnA-qK2In0H6-eQeCxaBwPiH4yuuXfRPmRLEzkmnDHI8geD_NNiW_u1R&click_t=1622433596013&s_info=1263_660&wd=&eqid=eb81931a000008620000000360b45f37"><img src="data:images/flower-2.jpg" alt="Forest" width="600" height="400"></a><div class="desc">花花草草</div></div><div class="gallery"><a target="_blank" href="https://www.baidu.com/link?url=hDLr_7jI5Jj6SD0tCCGgnpkSKu_u5ejxKr4tUPNXPLfM_qE0sx-hy-5Gpw-kPBIMjL7qO2buC8j2JThs1YsUjtQ98Lqay4Gida5ZZgCECpG04-oUQ0YPm352UOCMyWknWA1pK5vAc51gW4kPD5UrKf5kzvJkk3OTo2lNmUvmDSHKqNB1nqoQZhuongo8RWebXaUtA0EXWDJoqZWed71LgnI5QeU41tGJ-KiStdbCEsCh5ftWYQjBXWOSmLZTgCMs&click_t=1622433409093&s_info=1263_660&wd=&eqid=b5d0f41000003f7c0000000360b45e7d"><img src="data:images/flower-3.jpg" alt="Northern Lights" width="600" height="400"></a><div class="desc">红色郁金香</div></div><div class="gallery"><a target="_blank" href="https://www.baidu.com/link?url=Bm_ASbzcX8dbNgIUnBOxZ2nbfQVXKnBWbt0DCA-1jP75cvblUJTuRolKxw6cKZ4CjfG-vPG6_SbdGEDaao2E0wo3PIvF1gN_zc4nKh_xqYXN_IosYNTzTJlQTzJJsMIpMFgo4WN5pkU8TmqvhJtzxMWyvte4NEGPB6aP3AAXTbdX0ooHAhIwuih4KRjTJzBeTuU7QsNlSqXNICjHxdhSLuDtj4dQb-EGa-KdlSchz3CUsuHtTd4ZCJTqiWnUmRoD&click_t=1622433545002&s_info=1263_660&wd=&eqid=f084bbd900003e1b0000000360b45f03"><img src="data:images/flower-4.jpg" alt="Mountains" width="600" height="400"></a><div class="desc">黄色郁金香</div></div>
</div>
</body>
</html>

再附上一张原图

文字放在图片的下面 web前端网页布局相关推荐

WEB前端网页设计简介
目录 web前端简介什么是HTML? HTML标签 HTML基本结构在head中设置网页标题和字符集编码 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HT ...
web前端网页加载性能优化大全
web前端性能优化 - - 如何提高网页加载速度文章目录 web前端性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求浏览器 ...
用DIV+CSS技术设计的个人电影网站（web前端网页制作课作业）电影网页介绍8页带报告3900字
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素 | HTML期末大学生 ...
用DIV+CSS技术设计的个人电影网站（web前端网页制作课作业）
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
基于HTML+CSS+JS制作商城（web前端网页制作课作业）--7古典乐器网 8页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 ...
用DIV+CSS技术设计的个人电影网站-web前端网页制作课作业---电影介绍 5页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素| ...
web前端网页开发离不开的三要素：HTML、CSS、JavaScript
前端开发是目前高薪岗位之一,是从最开始的页面开发不断发展优化而产生的一个特定的岗位.现在web前端开发一定会用到的三门技术:HTML.CSS.JavaScript.无论是多么炫酷的页面都是这三门技术的 ...
php web裁剪图片上传,WEB前端实现裁剪上传图片功能
最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片拖拽读取的功能主要是要兼听html5的 ...
基于Html+JS+CSS的环保生态Web前端网页设计课程设计报告+源码
资源下载地址:https://download.csdn.net/download/sheziqiong/85731023 资源下载地址:https://download.csdn.net/downl ...

文字放在图片的下面 web前端网页布局

文字放在图片的下面 web前端网页布局相关推荐

最新文章

热门文章