44 lines
1.7 KiB
HTML
44 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
|
|
<title>响应式卡片悬停效果</title>
|
|
<link rel="stylesheet" href="../css/45.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="img-box">
|
|
<img src="../images/op/1.jpg" alt="">
|
|
</div>
|
|
<div class="text-box">
|
|
<h2>卡片一</h2>
|
|
<p>我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="img-box">
|
|
<img src="../images/op/2.jpg" alt="">
|
|
</div>
|
|
<div class="text-box">
|
|
<h2>卡片二</h2>
|
|
<p>我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="img-box">
|
|
<img src="../images/op/3.jpg" alt="">
|
|
</div>
|
|
<div class="text-box">
|
|
<h2>卡片三</h2>
|
|
<p>我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |