JS(JavaScript)和CSS(Cascading Style Sheets)是Web開發中最重要的兩個部分,JS主要用于網頁的動態交互和數據處理,CSS用于控制網頁頁面的樣式和風格。把它們結合起來,可以讓網頁更加出彩,為用戶提供更好的體驗。
下面我們來看一段JS和CSS的組合代碼,它可以讓網頁中的按鈕在鼠標懸停時改變顏色:
.button { background-color: #008CBA; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button:hover { background-color: #f44336; color: white; }
該代碼首先定義了一個“button”類,包含了按鈕的基本樣式。接著,使用“transition-duration”屬性指定了顏色變化需要的時間,“cursor”屬性指定了鼠標在按鈕上的樣式。
最后,使用“:hover”偽類定義了鼠標懸停時的顏色變化效果。在這里,我們將背景色和字體顏色都改為了紅色。
將JS和CSS結合起來,可以實現更加復雜的效果,讓網頁更加生動、多彩。
上一篇html 帳號密碼 代碼
下一篇js 加入css