差異處
這裏顯示兩個版本的差異處。
| 兩邊的前次修訂版 前次修改 下次修改 | 前次修改 | ||
| start [2025/06/22 17:04] – jason | start [2025/06/23 09:07] (目前版本) – jason | ||
|---|---|---|---|
| 行 3: | 行 3: | ||
| < | < | ||
| < | < | ||
| - | /* 整體外框 */ | + | /* 外層容器 |
| # | # | ||
| display: flex; | display: flex; | ||
| 行 10: | 行 10: | ||
| align-items: | align-items: | ||
| min-height: 75vh; | min-height: 75vh; | ||
| - | padding: 0 1em; | + | padding: 0 1em 15em; |
| text-align: center; | text-align: center; | ||
| box-sizing: border-box; | box-sizing: border-box; | ||
| 行 22: | 行 22: | ||
| } | } | ||
| - | /* 描述 */ | + | /* 描述文字 |
| # | # | ||
| font-size: 1.1em; | font-size: 1.1em; | ||
| color: #666; | color: #666; | ||
| - | margin-bottom: 2em; | + | margin-top: 2em; |
| + | max-width: 480px; | ||
| } | } | ||
| 行 34: | 行 35: | ||
| flex-wrap: wrap; | flex-wrap: wrap; | ||
| justify-content: | justify-content: | ||
| - | gap: 10px; | + | gap: 0.5em; |
| width: 100%; | width: 100%; | ||
| - | max-width: | + | max-width: |
| } | } | ||
| /* 搜索框 */ | /* 搜索框 */ | ||
| # | # | ||
| - | flex: 1 1 300px; | + | flex: 1 1 auto; |
| - | height: | + | height: |
| font-size: 16px; | font-size: 16px; | ||
| padding: 5px 15px; | padding: 5px 15px; | ||
| - | border-radius: | + | border-radius: |
| border: 1px solid #ccc; | border: 1px solid #ccc; | ||
| - | box-shadow: inset 0 1px 3px rgba(0, | + | box-shadow: inset 0 1px 2px rgba(0, |
| outline: none; | outline: none; | ||
| box-sizing: border-box; | box-sizing: border-box; | ||
| + | min-width: 0; | ||
| } | } | ||
| - | /* 搜索按鈕 */ | + | /* 按鈕 */ |
| # | # | ||
| - | height: | + | height: |
| - | padding: 0 25px; | + | padding: 0 20px; |
| - | font-size: | + | font-size: |
| - | border-radius: | + | border-radius: |
| border: none; | border: none; | ||
| - | background-color: | ||
| - | color: white; | ||
| cursor: pointer; | cursor: pointer; | ||
| white-space: | white-space: | ||
| } | } | ||
| - | # | ||
| - | background-color: | ||
| - | } | ||
| - | /* 行動裝置小螢幕優化 | + | |
| + | /* 響應式調整 | ||
| @media (max-width: 480px) { | @media (max-width: 480px) { | ||
| # | # | ||
| - | font-size: 1.8em; | + | font-size: 1.6em; |
| } | } | ||
| # | # | ||
| - | font-size: | + | font-size: |
| + | margin-bottom: | ||
| + | } | ||
| + | |||
| + | # | ||
| + | flex-direction: | ||
| + | align-items: | ||
| + | gap: 0.5em; | ||
| } | } | ||
| 行 82: | 行 87: | ||
| # | # | ||
| width: 100%; | width: 100%; | ||
| - | border-radius: | + | border-radius: |
| - | } | + | |
| - | + | ||
| - | # | + | |
| - | flex-direction: | + | |
| - | gap: 0.5em; | + | |
| } | } | ||
| } | } | ||
| 行 94: | 行 94: | ||
| <div id=" | <div id=" | ||
| < | < | ||
| - | | + | <form action="/ |
| - | | + | |
| <input type=" | <input type=" | ||
| - | <input type=" | + | <input type=" |
| - | <input type=" | + | < |
| </ | </ | ||
| + | <p class=" | ||
| + | <p class=" | ||
| </ | </ | ||
| </ | </ | ||