From 072f1ceb0363bf1749ec426c6886d72b964b710a Mon Sep 17 00:00:00 2001
From: 65160260 <65160260@go.buu.ac.th>
Date: Wed, 26 Mar 2025 03:15:25 +0000
Subject: [PATCH] Edit style.css
---
style.css | 84 +++++++++++++++----------------------------------------
1 file changed, 22 insertions(+), 62 deletions(-)
diff --git a/style.css b/style.css
index e0599a3..0d6c99c 100644
--- a/style.css
+++ b/style.css
@@ -14,7 +14,7 @@ body {
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
- text-align: center; /* ทำให้เนื้อหาใน container อยู่ตรงกลาง */
+ text-align: center;
}
/* หัวข้อ */
@@ -25,8 +25,9 @@ h2 {
/* ตารางสินค้า */
.table-container {
- width: 80%; /* จำกัดความกว้างของตาราง */
- margin: auto; /* จัดให้อยู่ตรงกลาง */
+ width: 80%;
+ margin: auto;
+ overflow-x: auto; /* ป้องกันการล้นของตาราง */
}
table {
@@ -40,7 +41,7 @@ table, th, td {
}
th, td {
- padding: 10px;
+ padding: 12px;
text-align: center;
}
@@ -49,37 +50,18 @@ th {
color: white;
}
-/* ฟอร์ม */
-form {
- text-align: center;
- margin: 20px 0;
-}
-
-input, button {
- padding: 10px;
- margin: 5px;
- border: 1px solid #ccc;
- border-radius: 5px;
-}
-
-button {
- background-color: #28a745;
+/* ปุ่มเพิ่ม-ลดจำนวนสินค้า */
+.qty-btn {
+ padding: 5px 10px;
+ background-color: #007BFF;
color: white;
+ border: none;
cursor: pointer;
+ border-radius: 5px;
}
-button:hover {
- background-color: #218838;
-}
-
-/* ลิงก์ */
-a {
- text-decoration: none;
- color: #007BFF;
-}
-
-a:hover {
- text-decoration: underline;
+.qty-btn:hover {
+ background-color: #0056b3;
}
/* ปุ่มลบ */
@@ -92,44 +74,22 @@ a:hover {
color: darkred;
}
-/* ตะกร้าสินค้า */
-.cart-container {
- max-width: 600px;
- margin: auto;
-}
-
-.cart-container table {
- width: 100%;
-}
-
-.cart-container th, .cart-container td {
- padding: 10px;
-}
-
-/* ปุ่มเพิ่ม-ลดจำนวนสินค้า */
-.qty-btn {
- padding: 5px 10px;
- background-color: #007BFF;
- color: white;
- border: none;
- cursor: pointer;
- border-radius: 5px;
-}
-
-.qty-btn:hover {
- background-color: #0056b3;
+/* ปุ่มชำระเงิน */
+.checkout-container {
+ text-align: center;
+ margin-top: 20px;
}
-/* ปุ่มชำระเงิน */
.checkout-btn {
- display: block;
- width: 100%;
- text-align: center;
+ display: inline-block;
+ width: auto;
background-color: #ffc107;
- padding: 10px;
+ padding: 12px 20px;
border-radius: 5px;
font-size: 18px;
color: black;
+ font-weight: bold;
+ text-decoration: none;
}
.checkout-btn:hover {
--
GitLab