HTML：1分钟实现简单网站导航栏
生活随笔
收集整理的這篇文章主要介紹了
HTML：1分钟实现简单网站导航栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
hello，大家好，我是wangzirui32，今天我們來學習如何實現簡單網站首頁。
開始學習吧！
網站首頁代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>wangzirui32的首頁</title><!-- CSS層疊樣式表導入 --><link rel="stylesheet" href="css/style.css"/> </head> <body><header><!-- header標簽一般用于網站導航欄 --><div class="logo"><!-- 網站LOGO導入 --><!-- logo根據你的需要選擇路徑 --><img src="img/logo.bmp"/></div><ul><!-- href鏈接自己添加修改 --><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></header> </body> </html>html代碼好了，現在得編寫億下CSS樣式表了。
CSS樣式表代碼
為了你能更好的理解，我添加了億些注釋：
header {background-color: cyan; /* 背景顏色cyan */height: 70px; /* 寬度為80px */display: flex; /* 將元素放置在容器中心 */ }header ul li {float:left; /* li標簽靠左 */color:#fff; /* 顏色設置 */margin:5px 10px; /* 5px是每2個li標簽的距離 10px是li標簽離logo的距離 */list-style: none; /* 取消li標簽的圓點 */ }效果展示
效果展示：（可能有億點丑，但也真不戳）
好了，這就是今天的全部內容，喜歡的可以點個贊和收藏，再見！
總結
以上是生活随笔為你收集整理的HTML：1分钟实现简单网站导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： STM32 擦除flash失败问题
- 下一篇： 电脑技术 计算机专业技能分类,电脑操作员