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

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

小伙伴们大家好,欢迎收看刘金玉编程第八期。本期我们主要做一个导航栏的一个。导航栏,有的人又喜欢叫菜单栏。确实和菜单有点像。导航栏几乎会用在所有的网站中。那么导航栏是怎么开发出来的呢?今天我们就来开发一个最为简单的导航栏。


重要知识点:链接标签<a>

基本举例<a href="index.html">首页</a>这是最基本的标签的使用举例。我们可以形成一个最为简单的链接文字。用在浏览器中,会在同一个窗口标签中进行跳转网页。<a>标签还有其它更为有用的属性,以下我们来简单介绍一下:


  • href属性:

链接的目标,如果要链接外部网站,那么要加http://www.bcczcs.com


  • target属性:

使用_blank,可以打开新窗口链接出去。默认如果没写,意味着在本窗口打开链接。


<a>标签在不同的css包装下,可以形成完全不同的效果。我们可以通过普通的点击效果进行跳转。也可以使用js控件a标签来进行跳转。


总结

1、掌握链接标签<a>  成对出现的,标签的中间写链接的文字

2、掌握href属性

3、掌握target属性


文件结构:


index.html源代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>刘金玉编程首页</title>
  </head>
  <body>
    <div id="wrapper">
      <div class="header">
        <div class="nav">
          <a href="index.html">首页</a>
          <a href="#">编程开发</a>
          <a href="#">人生旅程</a>
          <a href="#">摄影摄像</a>
          <a href="#">网赚技巧</a>
          <a href="#">电脑技巧</a>
          <a href="http://ljy.kim" target="_blank">编程创造城市</a>
        </div>
      </div>
      <div class="main"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>
目录
打赏
0
0
0
0
12
分享
相关文章
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
157 0
|
9月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
85 3
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
70 2
HTML 【实用教程】(2024最新版)
HTML 【实用教程】(2024最新版)
100 0
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
103 0
|
9月前
|
杨校老师课堂之HTML5动画特效的风车案例
杨校老师课堂之HTML5动画特效的风车案例
94 0
杨老师课堂之网页制作HTML的学习入门-含有案例2
杨老师课堂之网页制作HTML的学习入门-含有案例
35 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等