導航欄的簡單實現
阿新 • • 發佈:2021-08-10
效果演示:
程式碼演示:
把最實用的經驗,分享給最需要的讀者,希望每一位來訪的朋友都能有所收穫!<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <style> #list li { list-style-type: none; width: 100px; height: 50px; line-height: 50px; /*background-color: beige;*/ text-align: center; float: left; } #list li:hover{ background-color: red; } #list li a { text-decoration: none; } #menu{ width: 700px; height: 50px; background-color: beige; margin: 0 auto; } </style> </head> <body> <div id="menu"> <ul id="list"> <li> <a href="#">首頁</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> <li> <a href="#">JavaScript</a> </li> <li> <a href="#">關於</a> </li> <li> <a href="#">幫助</a> </li> </ul> </div> </body> </html>