CSS是現代網頁設計必不可少的一部分,它可以幫助我們快速的美化和布局我們的網站。
body { font-family: Arial, sans-serif; background-color: #f0f0f0; } header { background-color: #ffffff; border-bottom: 1px solid #cccccc; height: 80px; } nav { display: block; padding: 10px 0; text-align: center; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 20px; } nav ul li:last-child { margin-right: 0; } a { color: #333333; text-decoration: none; } a:hover { color: #666666; } main { padding: 20px; } section { background-color: #ffffff; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 2px #cccccc; } h1 { font-size: 28px; margin-bottom: 20px; } p { font-size: 18px; line-height: 1.5; margin-bottom: 10px; } @media only screen and (max-width: 768px) { header { height: auto; } nav ul li { display: block; margin-right: 0; } nav { padding: 0; } main { padding: 10px; } }
以上是一個簡單的網站布局樣式,僅供參考??偟膩碚f,使用CSS可以大大提高網站的外觀和用戶體驗。希望您也能在CSS中找到自己的樂趣。
上一篇css怎么找兄弟元素