在前端頁面開發中,使用CSS樣式是非常重要的。尤其在開發大型網站時,需要統一頁面樣式,提高開發效率。本文提供一些簡單的CSS樣式模板,可供網站開發者參考。
/* 標題樣式 */ h1 { font-size: 32px; font-weight: bold; text-align: center; } /* 段落樣式 */ p { font-size: 20px; line-height: 1.5; margin-bottom: 10px; } /* 鏈接樣式 */ a { color: #333; text-decoration: underline; } /* 無序列表樣式 */ ul { list-style: none; } /* 表格樣式 */ table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid #ddd; } th, td { padding: 10px; text-align: left; } th { background-color: #f2f2f2; font-weight: bold; } /* 表單樣式 */ input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } /* 圖像樣式 */ img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
通過以上的CSS樣式模板,開發者可以快速地統一頁面樣式,避免了在樣式上的重復勞動,提高了開發效率,為網站開發的順利進行提供了便利。