CSS是一種使網頁變得更加美觀和具有吸引力的語言。其中,黑白主題是一種簡單而又經典的設計,適用于任何類型的網站。下面是一個簡單的CSS代碼,使您的網頁呈現出漂亮的黑白主題。
body { background-color: black; color: white; } h1 { color: white; } a { color: white; text-decoration: none; } a:hover { text-decoration: underline; } img { filter: grayscale(100%); } button { background-color: white; color: black; border: solid 1px black; } button:hover { background-color: black; color: white; } input[type=text], input[type=password], textarea { background-color: white; color: black; border: solid 1px black; } input[type=submit] { background-color: black; color: white; border: none; } input[type=submit]:hover { background-color: white; color: black; border: solid 1px black; }
在這個CSS代碼中,我們設定了body元素的背景色為黑色,文本顏色為白色。H1標簽的顏色也是白色。超鏈接的顏色也是白色,在鼠標懸停時出現下劃線的效果。圖片使用filter屬性變為灰度,按鈕具有黑色的邊框,hover效果使得按鈕背景色變為白色,字體變成黑色。
文本輸入框和文本域也具有黑色的邊框,并出現白色背景。提交按鈕的背景色是黑色,前景色是白色。在提交按鈕上的hover事件會使得背景色變為白色,前景色變為黑色。
使用這些代碼,您可以輕松地為任何一個網站創造出簡單而具有吸引力的黑白主題。這個主題一直是備受歡迎的,因為它的簡單和經典組合可以讓您的網站成為一個視覺上非常吸引人的網站。
上一篇css置于背景的之上