CSS手冊排版模板常用于編寫文檔、教程、手冊等,使頁面有清晰的層次和易讀性。以下是一個示例模板:
以上模板適用于大多數文檔排版,也可以根據需要進行調整。在HTML文檔中,只需要將CSS代碼塊復制粘貼到<head&rthead;標簽中即可生效。使用該模板可以快速美化文檔,提高閱讀體驗。
/* 主容器 */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; } /* 標題樣式 */ h1 { font-size: 36px; font-weight: bold; color: #333; margin-bottom: 20px; } /* 子標題樣式 */ h2 { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 10px; } /* 段落樣式 */ p { font-size: 16px; line-height: 1.5; color: #555; margin-bottom: 10px; } /* 列表樣式 */ ul, ol { font-size: 16px; color: #555; margin-left: 20px; margin-bottom: 10px; } /* 鏈接樣式 */ a { color: #007bff; text-decoration: none; } /* 代碼樣式 */ pre { font-size: 14px; line-height: 1.5; color: #333; background-color: #f7f7f7; padding: 10px; margin-bottom: 10px; overflow-x: auto; border-radius: 3px; } /* 表格樣式 */ table { border-collapse: collapse; width: 100%; margin-bottom: 20px; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } th { font-weight: bold; background-color: #f7f7f7; } /* 圖片樣式 */ img { max-width: 100%; height: auto; margin-bottom: 10px; }
以上模板適用于大多數文檔排版,也可以根據需要進行調整。在HTML文檔中,只需要將CSS代碼塊復制粘貼到<head&rthead;標簽中即可生效。使用該模板可以快速美化文檔,提高閱讀體驗。