一个带背景和字体的页面-墨星博客 - 提升技术能力的必备资源教程网

一个带背景和字体的页面

2309字 12分钟 2024-11-21 Logo 111 0 该作者已发布1篇文章

文章最后更新时间：2024-11-21 21:44:29

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
<style>
  body {
    background-color: #ebecf0;
    background-image: url('背景.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: "ziti", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  .subject-table {
    width: 95%;
    max-width: 600px;
    background-color: rgba(255, 255, 255, 0.8); 
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    border-radius: 15px;
    overflow: hidden;
    backdrop-filter: blur(10px);
  }

  .subject-table thead {
    background-color: rgba(0, 123, 255, 0.9); 
    color: white;
  }

  .subject-table th, .subject-table td {
    text-align: left;
    padding: 15px;
  }

  .subject-table th {
    font-weight: bold;
  }

  .subject-table td {
    border-top: 1px solid #ddd;
  }

  .subject-table tr:last-child td {
    border-bottom: 1px solid #ddd;
  }

  .subject-table tr td:first-child {
    border-radius: 10px 0 0 10px;
  }

  .subject-table tr td:last-child {
    border-radius: 0 10px 10px 0;
  }

  @font-face {
    font-family: "ziti";
    src: url("字体链接");
  }
</style>
</head>
<body>

<h2 style="text-align: center; margin-bottom: 20px;"></h2>

<table class="subject-table">
  <thead>
    <tr>
      <th>主题</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>...</td>
    </tr>
    <tr>
      <td>2</td>
      <td>...</td>
    </tr>
    <tr>
      <td>3</td>
      <td>...</td>
    </tr>
    <tr>
      <td>4</td>
      <td>...</td>
    </tr>
    <tr>
      <td>5</td>
      <td>...</td>
    </tr>
    <tr>
      <td>6</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

</body>
</html>

背景.png替换为自己背景的路径，字体也一样

查看更多心仪的内容按Ctrl+D收藏我们

部分内容来自于网络如有不妥联系站长删除

墨星博客欢迎前来投稿文章

本站代码模板仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！

THE END