/* 重置样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 页面背景和基本样式 */ body { font-family: 'Arial', sans-serif; background-color: #f7f7f7; color: #333; line-height: 1.6; padding: 0 20px; } .container { max-width: 900px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #4CAF50; margin-bottom: 30px; } h2 { margin-bottom: 20px; color: #333; } /* 新增公告表单样式 */ .form-container { background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } input[type="text"], textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; box-sizing: border-box; } input[type="text"]:focus, textarea:focus { outline: none; border-color: #4CAF50; } button[type="submit"] { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } button[type="submit"]:hover { background-color: #45a049; } /* 公告列表样式 */ .announcement-list { list-style-type: none; padding: 0; margin-top: 20px; } .announcement-list li { display: flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 15px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .announcement-list a { font-weight: bold; text-decoration: none; color: #333; } .announcement-list button { background-color: #f44336; color: white; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s ease; } .announcement-list button:hover { background-color: #d32f2f; } .announcement-list button:focus { outline: none; } /* 居中对齐 */ .text-center { text-align: center; }