個人信息頁面的CSS代碼是個人信息頁面中重要的組成部分,它可以使頁面看起來更加美觀、規范。以下是CSS代碼的示例:
p { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; } #name { font-weight: bold; } #email { text-decoration: none; color: #0066CC; } #age { color: #A9A9A9; } #hobby { list-style-type: none; margin: 0; padding: 0; } .skill { background-color: #F0F8FF; padding: 5px; border-radius: 5px; margin-bottom: 5px; } .skill span { font-weight: bold; } @media (max-width: 768px) { p { font-size: 14px; } }首先,我們給所有段落元素添加一些基本樣式,包括字體、字號和行高。然后,我們使用ID選擇器分別為姓名、電子郵件地址和年齡指定了一些樣式。例如,姓名會使用粗體字,電子郵件地址會去除下劃線并使用藍色字體。年齡則使用灰色字體表示。 接著,我們用id="hobby"定義列表,使用list-style-type、margin和padding屬性來去除默認樣式并添加一些間距。最后,為了突出技能部分,我們使用類選擇器(class selector)來添加技能的樣式,包括背景顏色、圓角和下邊距。其中,技能的名稱會使用粗體字。 最后,我們使用@media查詢來重新調整段落元素的樣式,當屏幕寬度小于768像素時,字體大小將變為14像素。這可以讓移動設備上的個人信息頁面更易讀。 以上就是個人信息頁面CSS代碼的一個示例,希望對你有所幫助。