CSS是Web設計中不可或缺的一部分。自己設計一個網站不僅需要HTML代碼,也需要CSS代碼來美化網頁。來看一段我自己設計的CSS代碼吧!
body { font-family: 'Roboto', sans-serif; background-color: #f7f7f7; } .container { width: 90%; margin: 0 auto; } header { background-color: #1abc9c; color: #fff; padding: 20px; } nav { display: flex; justify-content: space-between; align-items: center; } nav a { color: #fff; text-decoration: none; margin-left: 20px; } h1 { font-size: 3rem; margin: 50px 0 30px; } section { display: flex; justify-content: space-between; margin-bottom: 50px; } .card { width: 30%; background-color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 20px; } .card h2 { font-size: 2rem; margin-bottom: 10px; } .card p { line-height: 1.5; } footer { background-color: #34495e; color: #fff; padding: 20px; text-align: center; } @media (max-width: 768px) { .card { width: 45%; } }
在這段代碼中,我使用了選擇器來對不同元素的樣式進行控制。例如,body選擇器修改了整個頁面的字體和背景色,而header選擇器則修改了頁面頂部導航欄的樣式。我還使用了Flex布局來讓導航欄和卡片元素布局更加美觀。此外,我還使用了媒體查詢來控制頁面在不同大小的屏幕上呈現不同的樣式。這些CSS代碼的完成,讓我網站看起來更加漂亮和專業。
通過這個例子,可以看到CSS在設計網站方面的重要性。當然,如果您的CSS不夠熟練或者需要更多幫助,可以在網絡上尋找一些優質教程或者參考源碼,不斷學習提升自己的技能水平。
上一篇css自適應字體
下一篇css自定義邊框形狀斜角