首页
学习
活动
专区
圈层
工具
发布

零基础html5网页开发教程第008期 导航栏开发案例

导航栏,有的人又喜欢叫菜单栏。确实和菜单有点像。导航栏几乎会用在所有的网站中。那么导航栏是怎么开发出来的呢?今天我们就来开发一个最为简单的导航栏。...标签还有其它更为有用的属性,以下我们来简单介绍一下: href属性: 链接的目标,如果要链接外部网站,那么要加http://www.bcczcs.com target属性: 使用_blank,可以打开新窗口链接出去...默认如果没写,意味着在本窗口打开链接。 标签在不同的css包装下,可以形成完全不同的效果。我们可以通过普通的点击效果进行跳转。也可以使用js控件a标签来进行跳转。...总结 1、掌握链接标签 成对出现的,标签的中间写链接的文字 2、掌握href属性 3、掌握target属性 文件结构: ? index.html源代码 href="#">网赚技巧 href="#">电脑技巧 href="http://ljy.kim" target="_blank">

1.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端黑魔法之远程控制地址栏

    由于今天看到一篇文章《危险的 target="_blank" 与 “opener”》,里面提到了一个老知识点,就是target="_blank"的时候,新打开的页面可以通过window.opener来控制源页面的...(当然,如果是真实攻击的话,最好是做一个真实目标的反代服务器,这个在我另一篇文章《openresty+lua在反向代理服务中的玩法》中也有详细的介绍) 这里,超链接的target属性指定目标URL在哪个页面下打开...比如,我们是一个“网址导航”类型的恶意网站,用户在我们网站上打开了百度、淘宝等标签页面,我们将可以根据用户打开的超链接来生成钓鱼页面,伪造这些网站的登录页面,精准地进行钓鱼。我这里就不进行演示了。...0x03 扩展尝试 除了超链接以外,用window.open也可以达到一样的效果: html> href="...但我觉得这个攻击持久型更佳,因为即使用户在新标签中输入自己的域名,或者又通过超链接点击到其他网站里,这个页面的地址栏永远是受到源页面的控制的。理论上在源页面不关闭的情况下,可以永久控制新页面的地址栏。

    69120

    前端黑魔法之远程控制地址栏

    由于今天看到一篇文章《危险的 target=”_blank” 与 “opener”》,里面提到了一个老知识点,就是target=”_blank”的时候,新打开的页面可以通过window.opener来控制源页面的...(当然,如果是真实攻击的话,最好是做一个真实目标的反代服务器,这个在我另一篇文章《openresty+lua在反向代理服务中的玩法》中也有详细的介绍) 这里,超链接的target属性指定目标URL在哪个页面下打开...比如,我们是一个“网址导航”类型的恶意网站,用户在我们网站上打开了百度、淘宝等标签页面,我们将可以根据用户打开的超链接来生成钓鱼页面,伪造这些网站的登录页面,精准地进行钓鱼。我这里就不进行演示了。...0x03 扩展尝试 除了超链接以外,用window.open也可以达到一样的效果: html> href="...但我觉得这个攻击持久型更佳,因为即使用户在新标签中输入自己的域名,或者又通过超链接点击到其他网站里,这个页面的地址栏永远是受到源页面的控制的。理论上在源页面不关闭的情况下,可以永久控制新页面的地址栏。

    88640

    Z-blogPHP常见问题答疑(最新整理202105)

    然后在正文处的最后,把代码添加进去,点击提交,打开首页查看就可以看到了,具体连接自己修改就行了,注意备份导航栏原来的内容免得出错导致网站错误等情况。...首先,打开网站后台,找到左侧菜单模块管理,然后点击上面导航栏,进入导航栏。 ?...附上使用“链接模块管理”插件使用教程: 首先确定您开启了此插件,然后找到模块管理,点击导航栏,如图: ? 打开导航栏在“图标(class属性值)”添加“奥森图标的代码”,如图: ?...OK,至此添加导航图标教程结束,很简单,包括设置二级菜单也是如此,只要开启上图(紫框)中的“二级”即可完成二级菜单设置。.../p> target="_blank" href="tencent://message/?

    61820

    hexo博客添加导航功能

    如果你需要新建一个页面,前提是你需要有一个博客,我用的是matery主题,参考了洪卫的博客搭建教程,和闪烁之狐的搭建教程,如果没有博客也可以参考我写的教程搭建一个自己的博客,话不多说,下面开始操作 新建导航页面...hexo new page 'navigate' 这时候我们发现sources/navigate/多了一个目录和index.md文件,这个时候就不用管了,下面开始编写导航相关代码 添加导航栏页面 进入...href="https://htmldog.com/" class="link-3" target="_blank">HTML狗...href="https://www.qvdv.com/tools/qvdv-guid.html" class="link-3" target="_blank">在线工具...: 导航;到这里基本上是没问题了,如果你发现导航栏还是英文,定位到\themes\matery\layout\_partial\mobile-nav.ejs添加以下代码,还有navigation.ejs

    2.2K30

    Chrome下的打开新窗口

    一般点击打开新窗口,有几种方式: 1、超链接a  有href属性、target为_blank 2、iframe,其target为_blank 3、window.open 4、form表单提交,同样target也必须设为_blank 现在遇到一个需求: 做了一个后台运维管理系统,在点击datagrid头部一个按钮,需要打开一个新窗口...因为extjs运行效率比较低,所以选择使用chrome访问系统,而在操作些按钮的时候发现很多很奇特的现象,这些现象只出现在chrome中: 1、打开一个窗口后,些窗口不关闭,将无法打开多个窗口,即使原有窗口关闭...,就是弹出的窗口是没有工具栏和地址栏的,且不在新选项卡中打开 后来搜索到一篇文章,有所启发,就有了如下的代码: var nwin = window.open(); nwin.location = ‘xxxx...’;//需要打开的地址 如果使用ajax请求地址后面的参数的话,需要将ajax改为同步,不然弹出的窗口会在新窗口中打开,而且没有工具栏和地址栏的

    4.2K30

    前端小白也能快速学会的博客园博客美化全攻略

    源码使用步骤: 打开 博客后台管理 → “设置” 在博客皮肤选项卡中将博客皮肤设置为: LessIsMore 将src文件夹下的页面定制.css 复制到 页面定制CSS代码 代码框内 将同一文件夹下的...- 曹杰峰的博客 ps: iOS移动端用默认浏览器打开看不到效果很正常,这个是flash做的,苹果的产品基本上都不直接支持flash了,iOS上安装一个Chrome浏览器倒是可以正常打开的~ 在公共栏添加...效果图: 在公告栏添加"友情链接" cnblogs博客后台提供了"链接"功能,这个就是用来添加友情链接的。...效果图: "博客签名"功能 虽然cnblogs博客后台提供了"博客签名"功能,测试发现该该方法实现的博客签名在IE中打开时不显示,只好改为用跨浏览器的JQuery来实现了。...important } 修改导航栏(修改部分链接的文字 + 增加下拉菜单) css部分: /* 定制自己导航栏的样式 */ #shwtop ul { margin: 0; padding

    3K40

    利用 target=_blank 进行前端钓鱼

    为什么大部分国外网站内链接不用 target="_blank"新窗口打开? Google 都是当前窗口打开;Baidu/Bing 都是新窗口打开。 用户将无法控制它在本页打开还是新窗口打开。...涉及内容: href="https://ligang.blog.csdn.net" target="_blank">李刚的学习专栏 window.open(strUrl, strWindowName...新打开的窗口,可直接使用 window.opener 来访问来源页面的 window 对象 浏览器提供了完整的跨域保护,在域名相同时,parent 对象和 opener 对象实际上就直接是上一级的 window...如果,你的网站上有一个链接,使用了 target="_blank",那么一旦用户点击这个链接并进入一个新的标签,新标签中的页面如果存在恶意代码,就可以将你的网站直接导航到一个虚假网站。...href="https://blog.csdn.net/ligang2585116" target="_blank" rel="noreferrer noopener">李刚的学习专栏 1

    1.3K20

    博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

    在上一篇博客中已经介绍了 自动生成目录、返回顶部、爱心特效、添加github图标、扩大和缩小、设置签名、添加分享和推荐反对功能,这一篇介绍怎么自定义导航栏。  ...效果如下: 1.1.自定义导航栏  我的博客皮肤用的是AnotherEon001,假如你的博客用的是其它皮肤,样式需要自己修改,要想达到一样的效果,建议也用同款皮肤 (1)把默认的导航栏给隐藏掉 既然我们想要自定义导航栏...,默认的导航栏就不能显示 #header{display:none;} (2)页首html代码 里面一个ul包含很多div(一个div代表一个分类),div里面是下拉框(a标签,里面是你的博客文章地址).../p/8313575.html" target="_Blank">1.HTML href="http://www.cnblogs.com...旁边的内联对象会被呈递在同一行内,允许空格。

    2.5K00

    6. html链接标签

    “仅供学习,转载请注明出处” html链接标签 标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。...“标签的常用属性有:” href属性 定义跳转的地址 title属性 定义鼠标悬停时弹出的提示文字框 target属性 定义链接窗口打开的位置 target="_self" 缺省值,新页面替换原来的页面...,在原来位置打开 target="_blank" 新页面会在新开的一个浏览器窗口打开 示例:如果暂时不知道跳转的url地址,那么可以使用# 号作为占位 打开一个新标签来访问呢?...示例:使用target="_blank"打开新标签来访问url地址 浏览器展示如下: 示例:将图片设置为超链接 前面都是用文字来作为超链接,这里改用图片,代码如下: <!

    4.3K30

    html链接标签

    仅供学习,转载请注明出处 html链接标签 标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。...标签的常用属性有: href属性 定义跳转的地址 title属性 定义鼠标悬停时弹出的提示文字框 target属性 定义链接窗口打开的位置 target="_self" 缺省值,新页面替换原来的页面...,在原来位置打开 target="_blank" 新页面会在新开的一个浏览器窗口打开 示例:如果暂时不知道跳转的url地址,那么可以使用# 号作为占位 打开一个新标签来访问呢? 示例:使用target="_blank"打开新标签来访问url地址 ? 浏览器展示如下: ?...示例:将图片设置为超链接 前面都是用文字来作为超链接,这里改用图片,代码如下: <!

    7.7K30
    领券