HTML留言板是一個簡單的Web應用程序,用戶可以在網頁上留言、評論或反饋。在HTML頁面上創建這樣一個應用程序,就需要使用一些HTML代碼和樣式。下面是一些常用的HTML留言板樣式代碼:
1.基本樣式
/* 清除默認樣式 */ *{ margin:0; padding:0; box-sizing:border-box; } /* 外層容器 */ .container{ width: 500px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } /* 留言框 */ .message-box{ margin-top: 20px; } .message-box textarea{ width: 100%; padding: 10px; font-size: 16px; color: #333; border: 1px solid #ccc; border-radius: 5px; resize: none; outline: none; } /* 按鈕 */ button{ display: block; width: 100%; padding: 10px; font-size: 14px; color: #fff; background-color: #009688; border: none; border-radius: 5px; outline: none; cursor: pointer; } /* 列表 */ ul{ margin-top: 20px; list-style: none; } li{ padding: 10px; margin-bottom: 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; }
2.添加動態效果
/* 給留言框和按鈕添加動畫效果 */ .message-box textarea, button{ transition: all 0.3s ease-in-out; } /* 鼠標懸停狀態 */ .button:hover{ background-color: #00796b; } /* 留言框獲得焦點 */ .message-box textarea:focus{ border-color: #009688; box-shadow: 0px 0px 5px #009688; } /* 列表項懸停狀態 */ li:hover{ background-color: #f5f5f5; }
3.實現響應式布局
/* 在小屏幕上自適應 */ @media (max-width: 768px){ .container{ width: 100%; padding: 10px; } .message-box textarea{ font-size: 14px; } li{ font-size: 14px; } }以上是一個基本的HTML留言板樣式代碼。可以根據實際需求進行修改和擴展。