HTML 个人简介模板：分列布局，带照片
<!DOCTYPE html>
<html>
<head>
<title>个人简介</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
<pre><code> .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.left, .right {
flex-basis: 25%;
}
.center {
flex-basis: 50%;
text-align: center;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</code></pre>
</head>
<body>
<div class='container'>
<div class='left'>
<h2>左侧区域</h2>
<p>这里是左侧区域的内容。</p>
</div>
<div class='center'>
<h2>中间区域</h2>
<img src='your_photo.jpg' alt='个人照片'>
</div>
<div class='right'>
<h2>右侧区域</h2>
<p>这里是右侧区域的内容。</p>
</div>
</div>
</body>
</html>
<p>请注意将'your_photo.jpg'替换为你自己的照片文件名，并确保该照片与HTML文件在同一目录下。</p>
原文地址: http://www.cveoy.top/t/topic/bDh1 著作权归作者所有。请勿转载和采集!