在學習CSS時,進行實踐非常重要。因此,我們需要完成一個CSS實訓項目。在項目中,我們需要創建一個響應式的網頁。這個網頁可以在不同尺寸的設備上顯示得很好。以下是我在實踐中所做的一些事情。
/*創建HTML結構*/My Website
/*設置CSS樣式*/ body { font-family: 'Open Sans', sans-serif; color: #333; } /*響應式設計*/ @media (max-width: 768px) { header { display: flex; flex-direction: column; justify-content: center; align-items: center; } nav { margin-top: 20px; } } /*添加樣式*/ header { background-color: #4e4e4e; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 20px; } nav ul { list-style: none; display: flex; } nav ul li { margin-right: 20px; } nav ul li:last-child { margin-right: 0; } nav ul li a { color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; } section { padding: 80px; text-align: center; } h1, h2 { font-weight: 600; margin: 0; } h1 { font-size: 36px; } h2 { font-size: 24px; } p { margin-top: 40px; line-height: 1.5; } Welcome
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere lacinia arcu non mollis. Morbi euismod tortor ipsum, vitae vestibulum eros accumsan non. Suspendisse quis elit a velit suscipit malesuada. Donec semper ante vel orci laoreet tincidunt. Sed eu enim ac nisi pharetra efficitur.
通過以上代碼,我完成了一個簡單的響應式網頁。我學到了如何使用flexbox、media query和常用的CSS屬性,比如font-size、color和margin。這個實訓項目讓我更好地理解了CSS并幫助我在實踐中運用所學知識。
下一篇css實驗報告1