真是好老的样式设计。。。
其实这张图里值得说道的也就背景色的线性渐变和阴影偏移,写一个简单的页面给你参考一下
<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
position: relative;
width: 400px;
height: 200px;
background: linear-gradient(to right top, #00b8e0, #ffffff 70%);
box-shadow: -10px 10px 10px black;
border-radius: 10px 10px;
overflow: hidden;
border: 1px solid #000000;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #000000;
text-align: center;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</div>
</body>
</html>
实际效果差不多是这样的:
这是2000年代的设计风格,用frontpage就能做出来。
估计做这个的时候,你还没出生。这老师一个ppt就干一辈子了。