浮动练习(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>
相关推荐
树上有只程序猿19 分钟前
终于有人把数据库讲明白了
前端
猩兵哥哥24 分钟前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸25 分钟前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin27 分钟前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊32 分钟前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆41 分钟前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术1 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆1 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙1 小时前
GIT 配置别名&脚本自动化执行
前端·git