css 樣式小竅門
阿新 • • 發佈：2017-05-07
blue head 消失 技術 log pad ul li -h img
css 樣式小竅門
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>頁面分布</title> <style> body { margin: 0; /*讓整個頁面的邊距消失*/ } .pg-head { height: 40px; background-color: dodgerblue; line-height: 30px; /*調整這個標簽裏面中的文字水平的位置*/ } .w{ width: 760px; margin: 0 auto; /*居中*/ } ul{ margin: 0; list-style-type: none; } ul li { float: left; padding:0 20px 0 20px; cursor: pointer; margin-top: 4px; font-size: 5px; } ul li:hover{ /*偽類,當鼠標移動當該標簽上時自動應用此效果*/ background-color: darkblue; } </style> </head> <body> <div class="pg-head"> <div class="w"> <ul> <li>菜單一</li> <li>菜單二</li> <li>菜單三</li> </ul> </div> </div> <div class="pg-body"></div> <div class="pg-footer"></div> </body> </html>
css 樣式小竅門