利用CSS浮動製作一個簡易導航欄
阿新 • • 發佈：2019-02-12
初學CSS,利用CSS浮動和無序列表製作一個簡易導航欄：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div { width: 1080px; height: 200px; border: 10px solid skyblue; } div .nav { text-align: center; list-style: none; padding-left: 20px; } div .nav li { background-color: coral; float: left; width: 160px; height: 40px; margin: 5px; } div .nav li a { display: block; width: 160px; height: 40px; font: 16px/40px "微軟雅黑"; color: springgreen; text-align: center; } </style> </head> <body> <div> <ul class="nav"> <li><a href="#">網頁</a></li> <li><a href="#">貼吧</a></li> <li><a href="#">視訊</a></li> <li><a href="#">音樂</a></li> <li><a href="#">圖片</a></li> <li><a href="#">新聞</a></li> </ul> </div> </body> </html>
