CSS是一種普遍使用于網頁設計和排版的語言,它可以幫助我們更好的控制網頁的各種元素的樣式,其中包括表單。下面我將介紹一些關于如何用CSS制作表單的技巧。
form{ width: 500px; //設置表單寬度 margin: 0 auto; //使表單在頁面水平居中 background-color: #F7F2E0; //設置表單背景顏色 padding: 20px; //設置表單內部空白 border-radius: 10px; //設置表單圓角 } .input { display: block; //將表單元素變成塊級元素 width: 100%; //設置表單元素寬度占滿整個表單 padding: 10px; //設置表單元素內邊距 margin-bottom: 10px; //設置表單元素之間的外邊距 border-radius: 5px; //設置表單元素圓角 border: none; //去掉表單元素邊框 background-color: #EBE7DD; //設置表單元素背景顏色 } .input:focus { border: none; //去掉表單元素獲取焦點時的外邊框 box-shadow: 0 0 3px 0 rgba(26,75,144,0.5); //設置表單元素獲取焦點時的邊框陰影效果 } .button { display: block; //將按鈕元素變成塊級元素 width: 100%; //設置按鈕元素寬度 padding: 10px; //設置按鈕元素內邊距 border: none; //去掉按鈕元素邊框 background-color: #1A4B90; //設置按鈕元素背景色 color: #fff; //設置按鈕文字顏色為白色 font-size: 16px; //設置按鈕文字大小 cursor: pointer; //設置鼠標懸浮樣式為手型 } .button:hover { background-color: #132D5F; //設置按鈕元素鼠標懸浮時的背景顏色 }
上面代碼展示了如何用CSS制作一個簡單的表單,其中包括三個元素:輸入框、密碼框和提交按鈕,表單元素可以根據自己的需求自定義樣式。可以通過設置顏色、邊框、陰影等方式,讓表單更加美觀和易于操作。
所以說,掌握CSS在制作表單上的應用技巧,不僅可以使表單更具有美觀性,還可以讓用戶更加便捷地操作表單。因此,CSS對于在網頁設計與排版上,的作用是不可替代的。
上一篇mysql數據庫打開
下一篇css如何剪成圓形