大家好,下午好。简单介绍一下背景,我正在制作作品集,我更喜欢后端而不是前端,所以我不太擅长 CSS 和 HTML。
我知道我们不应该应用图像,但展示图像是展示我想要的预期输出的最佳方式。
您在表格周围看到的黑色部分是我的 .frame 元素,我希望该元素占据所有绿色区域。我尝试将宽度和高度设置为 100%,但它仍然没有占据所需的空间
body {
background-color: rgba(66, 65, 65, 0.192);
font-family: Arial, sans-serif;
margin: 0;
}
h1, p {
color: rgba(0, 0, 0, 0.8);
text-align: center;
margin: 20px 0; /* Avoid large margins */
}
p{
font-size: 30px;
}
.profile-photo {
display: block;
margin: 20px auto; /* Center image */
width: 250px;
height: 200px;
border-radius: 20%;
object-fit: cover;
position: relative;
z-index: 2; /* Ensure it's above the square */
}
.square {
width: 100%;
height: 175px;
background-color: rgba(203, 137, 4, 0.619);
position: relative;
margin-top: -150px;
z-index: -1;
}
.frame {
border : black 2px solid; /*added to visualize the size of .frame*/
flex-grow: 1;
width: 90%;
max-width: 100%;
margin: 0 auto;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
table {
width: 100%;
border-collapse: collapse;
border-radius: 20%;
}
th, td {
border: 1px solid #273b38; /* This is the border of the table */
padding: 8px;
text-align: left;
}
th {
background-color: #55f3f04d; /* first colum */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="index.css"> <!-- Linking CSS file -->
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Hi, I'm Gustavo, a cybersecurity and developmententhusiast learning C and C++!</p>
<img src="School_ID/TEST_IMAGE.jpg" alt="Profile Photo" class="profile-photo">
<div class="square"></div>
<div class="frame">
<table>
<thead>
<tr>
<th>Project Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project 1</td>
<td>A brief description of Project 1.</td>
</tr>
<tr>
<td>Project 2</td>
<td>A brief description of Project 2.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>