18910140161

Html

首页 >> 前端开发 >> Html

Html学习之十三（导航栏的制作）

顺晟科技

2022-09-15 21:12:59

36

<!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&amp;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>

结果：

 

上一篇：使用jQuery验证JSON数据-验 下一篇：制作HTML布局水平导航条2
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！