<!DOCTYPE html>
<html>
<head>
<title>W3.CSS(w3cschool.cn)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3.css">
</head>
<body>
<div class="w3-container">
<h2>卡片示例</h2>
<div class="w3-card-4" style="width:70%">
<header class="w3-container w3-light-grey">
<h3>约翰·杜</h3>
</header>
<div class="w3-container">
<p>1个新朋友请求</p>
<hr>
<img src="https://atts.w3cschool.cn/img_avatar3.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<p>Mighty Schools的首席执行官。市场营销和广告学学者。寻求新工作和新机会。</p><br>
</div>
<button class="w3-button w3-block w3-dark-grey">+ 连接</button>
</div>
</div>
</body>
</html>