一個(gè)帶背景和字體的頁(yè)面-吾唯一

<!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>內(nèi)容</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替換為自己背景的路徑，字體也一樣

文章版權(quán)聲明

本網(wǎng)站名稱(chēng)：吾唯一

本站永久網(wǎng)址：http://m.jiufofan.cn

本站代碼模板僅供學(xué)習(xí)交流使用請(qǐng)勿商業(yè)運(yùn)營(yíng)，嚴(yán)禁從事違法，侵權(quán)等任何非法活動(dòng)，否則后果自負(fù)！

溫馨提示： 本文最后更新于2024-11-21 21:44:29，某些文章具有時(shí)效性，若有錯(cuò)誤或已失效，請(qǐng)?jiān)谙路?a href="#comment">留言或聯(lián)系吾唯一

? 版權(quán)聲明

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載。

THE END