Light CSS 是一種輕量級的 CSS 框架,旨在提供一種簡單而高效的方式來設計和開發各種網站和應用程序。
與其他框架相比,Light CSS 著重于簡單性和易用性。只需少量的代碼,就可以創建具有響應式設計和漂亮外觀的網站。此外,Light CSS 還包括豐富的排版、顏色、按鈕、表格和表單樣式。
/* Light CSS 樣式文件 */ /* 排版 */ body { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1.2; margin-top: 1.5em; margin-bottom: 0.5em; } p { margin-top: 1em; margin-bottom: 1em; } /* 顏色 */ .primary { color: #007bff; } .success { color: #28a745; } .warning { color: #ffc107; } .danger { color: #dc3545; } /* 按鈕 */ .btn { display: inline-block; font-weight: bold; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; background-color: #fff; border: 1px solid transparent; border-radius: 0.25rem; padding: 0.5rem 1rem; font-size: 1rem; line-height: 1.5; } .btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; } /* 表格 */ .table { width: 100%; margin-bottom: 1rem; background-color: transparent; border-collapse: collapse; } .table th, .table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; } .table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; } .table tbody + tbody { border-top: 2px solid #dee2e6; } /* 表單 */ .form-group { margin-bottom: 1rem; } .form-control { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
總之,Light CSS 是一種非常便捷和靈活的 CSS 框架,讓你可以快速創建出現代化的網站和應用程序。
下一篇html5編程表格代碼