在現代網頁設計中,CSS起到了至關重要的作用,它可以讓一個網頁看上去既統一又獨特,吸引人眼球。下面我們就來看看一些好看的CSS網頁。
/*這是CSS代碼*/ body { background-color: #f1f1f1; } .header { background-color: #333; color: #fff; text-align: center; padding: 20px; } .nav { background-color: #4CAF50; overflow: hidden; } .nav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .nav a:hover { background-color: #ddd; color: black; } .featured { background-color: #ff9800; color: white; text-align: center; padding: 50px; margin-top: 30px; } .footer { background-color: #333; color: white; text-align: center; padding: 10px; }
這是一個常見的網頁布局,頭部和底部都有不同色彩的條帶,中間是導航和主要內容部分。整個網頁看起來非常和諧,并且使用了不同顏色的背景和文本,使得網頁的結構非常清晰。同時,鏈接的hover效果也是一大特點。
除了網頁布局外,CSS還可以用來實現各種效果。例如下面這個網頁采用了動態滾動的效果,讓用戶在瀏覽的同時也感受到動感。
這個網頁看起來非常簡潔,只有文字和幾張圖片,但是隨著鼠標的移動,背景色和文字就動了起來,使得整個頁面充滿了活力。同時,文字也采用了不同的顏色和字體大小,增加了用戶的閱讀樂趣。
總之,CSS可以讓一個普通的網頁變得非常漂亮和有趣。在設計網頁時,我們應該充分發揮CSS的特點,讓網頁呈現出獨特的風格和氛圍。