浮动练习(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>
相关推荐
前端橙一陈9 分钟前
彻底理解 Bootstrap 的响应式断点机制:从 CSS 到 SCSS 的实现原理
css·bootstrap·scss
你的电影很有趣21 分钟前
lesson77:Vue组件开发指南:从基础使用到高级通信
javascript·vue.js·1024程序员节
Mr.Jessy41 分钟前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
神膘护体小月半1 小时前
css 的 clip-path 属性,绘制气泡
css
code_YuJun1 小时前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我1 小时前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
代码改变世界100861 小时前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节
Elieal1 小时前
AJAX 知识
前端·ajax·okhttp
sulikey2 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
烟袅2 小时前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript