D28:網頁的美化效果

2024 iThome 鐵人賽

DAY 28

自我挑戰組

資料庫與Java開發工具連接系列第 28 篇

16th鐵人賽

加簽戰士應聲倒地

2024-10-12 00:12:31

66 瀏覽

分享至

昨天學習了CSS的技術，今天來展現一下成果!
(因為程式碼有點多，我只放一個.jsp檔)

在這個.jsp檔案裡面，我們使用到了

.container:使用了 div 元素包裹網頁的主要內容，並且通過 CSS 屬性讓其顯示為框框。
padding：給框框內部的內容添加適當的間距，讓文字呈現舒適。
text-align: center：讓框框內的內容水平居中。
border-radius：讓邊角圓潤，看起來更加柔和。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>ABC123</title>
    <style>
        /* 全局樣式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }

        /* 外部容器 */
        .container {
            border: 2px solid #007bff;
            border-radius: 10px;
            padding: 20px;
            max-width: 600px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        a {
            color: #fff;
            text-decoration: none;
            background-color: #007bff;
            padding: 10px 20px;
            border-radius: 5px;
            margin: 5px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        a:hover {
            background-color: #0056b3;
        }

        button {
            background-color: #28a745;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
            font-size: 1rem;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #218838;
        }

        /* 連結和按鈕容器 */
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        /* 適應小屏幕設計 */
        @media (max-width: 600px) {
            h1 {
                font-size: 2rem;
            }
            button, a {
                padding: 8px 15px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1><%= "學生資料表" %></h1>

    <div class="btn-container">
        <a href="DatabaseConnect123">不要放棄</a>
        <a href="forms/EnterData.jsp">輸入資料</a>
    </div>

    <div class="btn-container">
        <button onclick="window.location.href='http://localhost:8080/forms/queryData.jsp';">查看資料表</button>
        <button onclick="window.location.href='http://localhost:8080/forms/DeleteData.jsp';">刪除資料</button>
    </div>
</div>

</body>
</html>

接著來看一下全部的頁面吧~
1.首頁

2.輸入資料

3.查詢資料

4.刪除資料