Html學習之十三（導航欄的制作）
阿新 • • 發佈：2019-03-31
inf src tex color hide rect 新聞 left als
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>導航效果</title> <style type="text/css"> .tab-item{ list-style: none; font-family: "宋體"; font-size: 18px;text-decoration: none; cursor: pointer; float: left; border: 1px darkgray solid; overflow: hidden; background-image: none; margin: 0px 5px; } .k{ height: 50px; width: 700px; border: greenyellow 1px solid; } </style> </head> <body> <div class="k"> <ul> <a class="tab-item" hidefocus="false" href="http://hao.360.cn/redirect?sid=df2287313a6e62ec&url=.%2F"target="_top" data-href="./">首頁推薦</a> <a class="tab-item" hidefocus="false" href="http://www.btime.com/?from=gjl" target="_blank" data-page="http://www.btime.com/" data-jump="http://www.btime.com/?from=gjl" data-nordr="yes">新聞頭條</a> <a class="tab-item" hidefocus="false" href="http://hao.360.cn/brother.html#!tv" target="_top" data-page="http://cdn.inf.360kan.com/daohang/dianshi.html" data-jump="http://www.360kan.com/dianshi/index.html" data-nordr="yes">電 視 劇</a> <a class="tab-item" hidefocus="false" href="http://hao.360.cn/brother.html#!movie" target="_top" data-page="http://cdn.inf.360kan.com/daohang/dianying.html" data-jump="http://www.360kan.com/dianying/index.html" data-nordr="yes">最新電影</a> <a class="tab-item" hidefocus="false" href="http://hao.360.cn/brother.html#!game" target="_top" data-page="http://xiaoyouxi.360.cn/topbar.html" data-jump="http://xiaoyouxi.360.cn" data-nordr="yes">小 遊 戲</a> <a class="tab-item" hidefocus="false" href="http://hao.360.cn/brother.html#!novel" target="_top" data-page="http://www.jingyu.com/index/indexIframe" data-jump="http://xiaoshuo.360.cn/" data-nordr="yes">小說大全</a> <a class="tab-item" hidefocus="false" href="http://hao.360.cn/brother.html#!travel" target="_top" data-page="http://go.360.cn/holiday/subject" data-jump="http://go.360.cn/" data-nordr="yes">旅遊度假</a> </ul> </div> </body> </html>
結果：
Html學習之十三（導航欄的制作）