張鑫旭是一名著名的前端工程師,他在網上分享了許多關于CSS的技術文章,其中就包括了CSS通用樣式庫。這個樣式庫可以幫助前端開發者快速地構建網頁頁面。
該樣式庫涵蓋了許多常見的樣式需求,例如按鈕樣式、表格樣式、表單樣式等等。開發者只需要引入樣式庫,并在相應的HTML元素上添加對應的classname,即可呈現該樣式。
/* 按鈕樣式 */ .btn { display: inline-block; margin: 0; padding: 6px 14px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #fff; background-color: #428bca; border-color: #357ebd; } /* 表格樣式 */ .table { width: 100%; max-width: 100%; margin-bottom: 20px; background-color: transparent; border-spacing: 0; border-collapse: collapse; } /*表格表頭樣式*/ .table th, .table td { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; } /*表格表頭樣式*/ .table th { text-align: left; } /*表格鼠標懸浮樣式*/ .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #f5f5f5; }
使用CSS通用樣式庫可以極大地提高前端開發效率,同時也能保證網站的一致性和美觀性。相信這個樣式庫會受到更多前端開發者的歡迎和使用。
上一篇mysql 超時 關閉
下一篇css隱藏右側滾動條