<!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>

结果：

Html学习之十三（导航栏的制作）的更多相关文章

  1. 通栏导航栏的制作，综合使用CSS属性，代码不超过30行

    这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...

  2. MUI学习02-顶部导航栏

    建议:先看一下MUI注意事项 连接:http://ask.dcloud.net.cn/article/122 固定栏靠前 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元 ...

  3. MUI学习01-顶部导航栏

    建议:先看一下MUI注意事项 连接:http://ask.dcloud.net.cn/article/122 固定栏靠前 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元 ...

  4. axure的基本使用方法（侧边导航栏的制作）

    1.创建一个动态面板control 2.在home中创建动态面板homepage和movepage并且完成布局 3.给home添加移动事件 4.给按钮添加点击事件 5.大功告成

  5. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  6. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  8. Flutter - 创建底部导航栏

    之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...

  9. android布局学习-使用FrameLayout和LinearLayout制作QQ空间底部导航栏

    [声明:本博客通过学习“J灬叶小超 ”博客而写,链接:http://www.cnblogs.com/yc-755909659/p/4288260.html] --------------------- ...

随机推荐

  1. jstree级联禁用后代节点的选择框

    用jstree+jquery,做的树形展示. 这个话题,在Stack Overflow上有问答,要获取要禁用的节点,然后用获取子节点方法遍历后代节点,设置禁用选择框. 之后发现,jstree的获取子节 ...

  2. go语言设计模式之Concurrency workers pool

    worker.go package main import ( "fmt" "strings" ) type WorkerLauncher interface ...

  3. 201871010107-公海瑜《面向对象程序设计（java）》第一周学习总结

    201871010107-公海瑜<面向对象程序设计(java)>第一周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/   ...

  4. selenium如何向ueditor富文本中自动输入文本

    1.网上给出的方法在百度的富文本控件ueditor中不起作用切换框架失败 2.利用ueditor的api文档,通过js不使用框架切换即可实现轻松写入 eg:ue.setContent('hello')

  5. 题解：A

    A (a.pas/c/cpp) [题目描述] 对于给定的一个正整数n, 判断n是否能分成若干个正整数之和 (可以重复) , 其中每个正整数都能表示成两个质数乘积. [输入描述] 第一行一个正整数 q, ...

  6. flask中的endpoint、自定义转化器、与djnago中session区别、利用装饰器实现登录认证

    flask路由中的endpoint 与自定义转化器 ''' endpoint主要用于 反向解析, 例如:login函数中配的路由是/login,其中endpoint='lg' 则在其他函数,可以用 u ...

  7. 【AtCoder】AtCoder Grand Contest 040 解题报告

    点此进入比赛 \(A\):><(点此看题面) 大致题意: 给你一个长度为\(n-1\).由\(<\)和\(>\)组成的的字符串,第\(i\)位的字符表示第\(i\)个数和第\( ...

  8. Educational Codeforces Round 76 (Rated for Div. 2) A. Two Rival Students 水题

    A. Two Rival Students There are

  9. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  10. 洛谷 P1351 （枚举）

    ### 洛谷P1351 题目链接 ### 题目大意: 给你 n 个节点, n-1 条边的无向联通图.若定义(u,v)表示 u 与 v 点的最短距离,如果 (u,v)值为 2 ,则这两个点的点权之积(即 ...