CSS是網(wǎng)頁制作過程中不可或缺的一部分,它可以控制網(wǎng)頁的樣式和布局,使網(wǎng)頁更美觀、易讀、易用。
/* 統(tǒng)一設(shè)置頁面的字體、顏色和背景 */ body { font-family: Arial, sans-serif; color: #333; background-color: #f2f2f2; } /* 設(shè)置頁面中所有鏈接的顏色和樣式 */ a { color: #007bff; text-decoration: none; } /* 設(shè)計網(wǎng)頁中的標(biāo)題樣式 */ h1, h2, h3 { font-weight: bold; margin-bottom: 10px; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 24px; } /* 設(shè)計頁面的布局 */ .container { max-width: 960px; margin: 0 auto; padding: 0 20px; } .header { height: 80px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .nav { display: flex; justify-content: space-between; align-items: center; width: 50%; } .logo { font-size: 24px; font-weight: bold; color: #007bff; } .menu { font-size: 18px; } .content { margin-top: 20px; } /* 設(shè)置網(wǎng)頁中的樣式細(xì)節(jié) */ ul { list-style: none; margin: 0; padding: 0; } li { margin-bottom: 10px; } button { border: none; background-color: #007bff; color: #fff; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 10px; border: none; border-bottom: 1px solid #ccc; }
以上代碼演示了如何使用CSS控制一個網(wǎng)頁的樣式和布局。我們可以通過設(shè)定整個頁面的字體、顏色和背景來實現(xiàn)風(fēng)格一致的效果,同時也可以通過對鏈接、標(biāo)題、容器和表單元素等進(jìn)行樣式設(shè)置來讓頁面看起來更加美觀。
上一篇python畫紅旗的代碼
下一篇css中豎排文字屬性