当前位置:

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

5月前 阅读 / 134 来源 / 原创 文 / 多多鱼

导航条效果图:我们先来看一下,首先这个整体我们可以看成一个大盒子,盒子的背景颜色为白色。然后看一下整体的话是占到整个导航条的80%...

  导航条效果图:image.png

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

image.png

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

image.png

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


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

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

阮一峰flex布局


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

1、h3标签:

<h3><a href="index.html">多多鱼网页</a></h3>

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

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

html h3标签常见应用地方:
栏目标题可以使用h3标签
文章标题可以使用h3标签
文章标题列表可以使用h3标签(一般图文列表中,图片使用img引入,文章标题文字使用h3标签)

2、a标签:

<a href="index.html">多多鱼网页</a>

<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>
   <li class="active">
	<a href="index.html">首页</a>
   </li>
   <li>
	<a href="">网页模板</a>
   </li>
   <li>
	<a href="">学习资料</a>
   </li>
   <li>
	<a href="">常见问题</a>
   </li>
   <li>
	<a href="">网页作业</a>
   </li>
   <li>
	<a href="">联系我们</a>
   </li>
</ul>




评论列表
共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

猜你喜欢

内容管理系统 · Powered By YzmCMS皖ICP备17010873号
学生网页作业定制、企业网站联系客服微信:zhaocom666
相关侵权、举报、投诉及建议等,请发E-mail:2528730315@qq.com

友情链接: 大学生网页作业 网页制作成品下载 网页教程 网页作业模板 网页成品

客服微信

客服微信

zhaocom666

模板问题

定制问题

作业定制

企业建站

微信客服