2

网页导航栏制作:如何为网页添加导航栏,网页导航栏制作(前端入门教程网页导航栏制作教程)

关于【网页导航栏制作:如何为网页添加导航栏】,网页导航栏制作,今天涌涌小编给您分享一下,如果对您有所帮助别忘了关注本站哦。

  • 内容导航:
  • 1、前端入门教程网页导航栏制作教程(技术:HTML+CSS)
  • 2、网页导航栏制作:如何为网页添加导航栏

1、前端入门教程网页导航栏制作教程(技术:HTML+CSS)

导航条效果图:

网页导航栏制作:如何为网页添加导航栏,网页导航栏制作(前端入门教程网页导航栏制作教程)

我们先来看一下,首先这个整体我们可以看成一个大盒子,盒子的背景颜色为白色。

网页导航栏制作:如何为网页添加导航栏,网页导航栏制作(前端入门教程网页导航栏制作教程)

然后看一下整体的话是占到整个导航条的80%左右,上图红色框圈出的范围。

网页导航栏制作:如何为网页添加导航栏,网页导航栏制作(前端入门教程网页导航栏制作教程)

这个盒子又分为两个部分,左侧的logo部分,右侧的导航部分。

整个布局用到的是flex布局:

大家可以去看一下阮一峰老师的教程:

阮一峰flex布局

左侧logo部分我们用到的标签有:

1、h3标签:

<h3><ahref=http://www.029ztxx.com/tg/"index.html">多多鱼网页

h3是一对有开始有闭合的标签组合。以<h3>开始,以</h3>结束。

html h3标签主要用于布局标题、栏目类内容,h3与h1最大标题标签相比,h1标签一般一个网页中使用一次,而h3标签可以在一个网页中多次使用。默认CSS h3又比h2文字大小小一点。

html h3标签常见应用地方:

栏目标题可以使用h3标签
文章标题可以使用h3标签
文章标题列表可以使用h3标签(一般图文列表中,图片使用img引入,文章标题文字使用h3标签)

2、a标签:

<ahref=http://www.029ztxx.com/tg/"index.html">多多鱼网页

<a> 标签定义超链接,用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性,它指示链接的目标。

在所有浏览器中,链接的默认外观是:

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

右侧的导航部分我们用到的标签有:

一、无序列表简介

无序列表,很好理解,有序列表的列表项是有一定顺序的,而无序列表的列表项是没有顺序的。默认情况下,无序列表的项目符号是●,不过可以通过无序列表type属性来改变无序列表的列表项符号。

语法:

<ul><li>无序列表项</li><li>无序列表项</li><li>无序列表项</li></ul>

说明:

<ul>,即“unordered list(无序列表)”。<li>,即“list(列表项)”。理解标签语义更有利于你记忆,而记忆HTML标签的语义是HTML的基础。

在该语法中,使用<ul></ul>标签表示一个无序列表的开始和结束,<li>表示这是一个列表项。在一个无序列表中可以包含多个列表项。

注意,<ul>标签和<li>标签也是配合使用,没有单独使用,而且<ul>标签内部不能存在任何其他标签,一般情况下只能存在<li>标签(对于初学者,我们忽略嵌套列表)。这个概念要非常清楚,在网站开发后期很容易犯错。(这个情况跟有序列表一样)。

右侧导航代码:

<ul><liclass="active"><ahref=http://www.029ztxx.com/tg/"index.html">首页

  • 网页模板
  • 学习资料
  • 常见问题
  • 网页作业
  • 联系我们
  • 视屏教程:

    视频加载中...

    2、网页导航栏制作:如何为网页添加导航栏

    操作方法

    制作一个放导航栏的容器
    制作一个放导航栏的容器,容器名为nav,容器宽为1000px,高为30px,背景颜

    色为灰色,相关代码如下:
    #nav
    {
    width:1000px;
    height:30px;
    background:#CCC;
    margin:0 auto;
    margin-top:50px;
    }
    <div id="nav"></div>

    显示结果
    在浏览器中显示的结果为下图所示:

    在容器中放入一些导航栏
    导航栏代码如下:
    <ul>
    <li>模块一</li>
    <li>模块二</li>
    <li>模块三</li>
    <li>模块四</li>
    <li>模块五</li>
    <li>模块六</li>
    </ul>

    为导航栏添加一些属性
    <style type="text/css">
    #nav
    {
    width:1000px;
    height:30px;
    background:#CCC;
    margin:0 auto;
    margin-top:50px;
    }
    #nav ul
    {
    width:960px;
    height:35px;

    }
    #nav ul li
    {
    float:left;
    width:100px;
    float:left;
    list-style:none;
    background:yellow;
    line-height:35px;
    }

    </style>

    导航栏在浏览器页面的显示结果如下图所示:

    本文关键词:网页设计导航栏制作,怎么制作网页导航栏,网页导航栏设计,网页导航栏制作代码,HTML导航栏制作。这就是关于《网页导航栏制作:如何为网页添加导航栏,网页导航栏制作(前端入门教程网页导航栏制作教程)》的所有内容,希望对您能有所帮助!

    本文来自网络,不代表本站立场。转载请注明出处: https://tj.jiuquan.cc/a-2060985/
    1
    上一篇 pdf双面打印怎么操作,打印PDF文件怎么设置成双面打印(教你两招再也不用转格式打印了)
    下一篇 qq电子邮件在哪里查看,怎么用手机QQ查看电子邮件(在14年后的2022发生了变化)

    为您推荐

    联系我们

    联系我们

    在线咨询: QQ交谈

    邮箱: alzn66@foxmail.com

    关注微信

    微信扫一扫关注我们

    返回顶部