糖果店網(wǎng)頁設(shè)計(jì)CSS簡單
body { font-family: Arial, sans-serif; } header { background-color: #f2b448; padding: 20px; } h1 { color: white; margin: 0; } nav { display: flex; justify-content: space-between; background-color: #d9b8a9; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav li { margin-right: 20px; } nav li:last-of-type { margin-right: 0; } nav a { text-decoration: none; color: white; } .menu { background-color: #fff; padding: 20px; } .menu h2 { margin-bottom: 20px; } .menu img { width: 100%; max-width: 500px; display: block; margin-bottom: 20px; } .menu p { margin-bottom: 20px; } .menu button { background-color: #f2b448; border: none; color: white; padding: 10px; cursor: pointer; } .footer { background-color: #f2b448; color: white; padding: 20px; text-align: center; }
這是一個(gè)簡單的糖果店網(wǎng)頁設(shè)計(jì)的CSS樣式代碼。需要注意的是,這只是一個(gè)基礎(chǔ)的樣式,具體實(shí)現(xiàn)可以根據(jù)自己的需求進(jìn)行修改。在這個(gè)例子中,我們使用了flex布局來實(shí)現(xiàn)導(dǎo)航欄的排列,同時(shí)也使用了一些常用的樣式,如background-color、color、margin等。通過這些基礎(chǔ)的CSS樣式,我們可以實(shí)現(xiàn)一個(gè)簡單而美觀的糖果店網(wǎng)頁。
上一篇css語言框架
下一篇純css scroll