HTML5QQ是一個著名的在線社交平臺,通過它,我們可以方便地交流信息和與朋友互動。注冊這個平臺需要填寫一些基本信息,而這些信息實(shí)際上都可以通過CSS樣式來美化,使得整個頁面更加美觀、時尚而又不失簡潔。
/*注釋:下面是CSS代碼*/ body { background-color: #F5F5F5; /*頁面背景顏色設(shè)置為淺灰色*/ } h1 { text-align: center; /*標(biāo)題居中*/ color: #636363; /*標(biāo)題字體顏色*/ margin-top: 50px; /*標(biāo)題頂部空出50像素的位置*/ } form { width: 500px; /*表單寬度為500像素*/ margin: 0 auto; /*水平居中*/ background-color: #FFFFFF; /*表單背景顏色設(shè)置為白色*/ padding: 40px; /*內(nèi)邊距為40像素*/ border-radius: 15px; /*表單圓角設(shè)置為15像素*/ box-shadow: 3px 3px 3px #B0B0B0; /*表單加陰影,顏色為灰色*/ } label { display: block; /*每個表單項(xiàng)獨(dú)占一行*/ margin-top: 20px; /*每個表單項(xiàng)之間有20像素的空隙*/ font-weight: bold; /*字體加粗*/ } input[type="text"], input[type="password"] { width: 100%; /*輸入框和文本框占據(jù)整個表單寬度*/ padding: 10px; /*內(nèi)邊距10像素*/ border: none; /*沒有邊框*/ border-radius: 5px; /*圓角5像素*/ background-color: #F5F5F5; /*背景顏色淺灰*/ } input[type="submit"] { width: 100%; /*提交按鈕占據(jù)整個表單寬度*/ background-color: #008CBA; /*按鈕背景顏色設(shè)置為藍(lán)色*/ color: #FFFFFF; /*按鈕字體顏色設(shè)置為白色*/ padding: 15px; /*內(nèi)邊距為15像素*/ border: none; /*沒有邊框*/ border-radius: 5px; /*圓角5像素*/ margin-top: 20px; /*按鈕頂部空出20像素的位置*/ font-size: 16px; /*字體大小16像素*/ cursor: pointer; /*鼠標(biāo)移上去有指針效果*/ } input[type="submit"]:hover { background-color: #4CAF50; /*鼠標(biāo)移上去按鈕背景顏色為深綠*/ }
以上是我們使用CSS為HTML5QQ的注冊頁面編寫的樣式代碼,這些樣式可以讓我們的注冊頁面更具美感,吸引更多的用戶來使用這個社交平臺。