浮动练习(2三折叠)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style>
.container{
  width: 100%;
  height: 800px;
  /*background-color: aqua;*/
    margin: 0 auto;
}
.d{
    width: 47%;
    height: 459px;
    /*background-color: rosybrown;*/
    border: 2px solid gainsboro;
    border-radius: 10px;
    float: left;
    margin: 23px 37px;
    margin-right: 10px;
    text-align: center;
}
.d img{
    width: 90%;
    margin: 22px 37px;
    margin-bottom: 0px;
}
.d span{
    display: block;
    font-size: 30px;
    padding-top: 20px;
}
.d:hover{
    border: 2px solid red;
}

  </style>
</head>
<body>
<div class="container">
    <div class="d">
        <img src="imgs/a.jpg">
          <span>三折叠</span>
    </div>
    <div class="d">  <img src="imgs/a.jpg">
        <span>三折叠</span> </div>
    <div class="d"> <img src="imgs/a.jpg">
        <span>三折叠</span>  </div>
    <div class="d">  <img src="imgs/a.jpg">
        <span>三折叠</span> </div>
</div>
####图片需要自己下载,改名为a.jpq
</body>
</html>
相关推荐
GDAL27 分钟前
HTML入门教程18:HTML类
前端·html
.又是新的一天.31 分钟前
第一章 HTML
前端·html
@无铭44 分钟前
第七章 利用CSS和多媒体美化页面
前端·css
retun_true1 小时前
记录生活之JSON.parse坑 -- 【JavaScript】
前端·javascript
黑子Kuroko1 小时前
【解决方案】微信小程序如何使用 ProtoBuf 进行 WebSocket 通信
前端·websocket·微信小程序·语音识别·protobuf·语音对话·arraybuff
正小安1 小时前
JavaScript对象的深拷贝和浅拷贝 - 2024最新版前端秋招面试短期突击面试题【100道】
前端·javascript·面试
小小李程序员1 小时前
CSS网格布局
前端·css
掘金酱2 小时前
【🎁 请领取打卡礼】掘金 AI 刷题功能再次升级,AI 编程助手带你领取打卡能量包!
前端·后端·求职
小旺仔爱代码2 小时前
AJAX和JSON
前端·ajax·json
清灵xmf2 小时前
JavaScript 中如何识别异步函数?
开发语言·javascript·async·异步函数