<!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学习之十三（导航栏的制作）
原文地址：https://www.cnblogs.com/lsm-boke/p/10629800.html