代码教程——第二十章 导航条(五)

现在来写导航项。其实导航是有专门的标签的 <nav> </nav> 但是这个特性比较新,IE9 才开始支持,所以很多人还是习惯用列表来写导航,这里我们也使用列表,为的是你以后看到各种代码都能看得懂,因为 nav 标签相对于列表还是比较简单的。

那么先来说说列表哦:

<ul>

<li>列表内容</li>

<li>列表内容</li>

<li>列表内容</li>

</ul>

效果如下:

  • 列表内容
  • 列表内容
  • 列表内容

如上叫做无序列表。

<ol>

<li>列表内容</li>

<li>列表内容</li>

<li>列表内容</li>

</ol>

效果如下:

  1. 列表内容
  2. 列表内容
  3. 列表内容

如上叫做有序列表。

你说这跟导航项一点都不像啊,但是在逻辑上还是很像的,都是列出来一些内容。既然我们对于前边的编号圆点什么的完全不在乎,那么我们就选择无序列表好了,那么 html 代码很简单的,几乎跟上面一样

<ul id=“nav-items”>

<li class=“nav-item”>首页</li>

<li class=“nav-item”>下载</li>

<li class=“nav-item”>特点</li>

<li class=“nav-item”>关于</li>

</ul>

这个样子没有问题,挺容易看懂的,我们把他加在 #loge 的 div 后面来看看效果。

你说,哼,幸亏我已经不再相信你了,否则又得失望。本来想要跟 logo 在一排的效果(要不那背景留着干嘛用??)结果又做出来一个奇葩的造型。

我跟你说啊:想横排,加浮动!你看我一步步把它搞上去哦!在 CSS 里加上

#nav-items .nav-item {

float:left;

}

就是给我们的每一个导航项加上了一个向左浮动的属性,我们只做了这一点,来看看什么变化哦

这个……好像是到一行了,但是有点乱,看不好效果,主要是那个圆点的影响,那我们去掉圆点,把刚才那部分 CSS 再加上一个属性:

#nav-items .nav-item {

float:left;

list-style: none;

}

就是列表的样式:无。再看效果。

呀,果然是一排相邻的元素,一加上浮动就从竖着排列变到横着排了。那么眼下呢,到这里你只要记住把想要横排的东西都加上浮动就好。如果你想知道为什么,那我们需要继续一下我们快递箱的故事,有些绕,这个故事晚些时候我会发布在我们交流平台的“咖啡俱乐部”频道内(就是我们的 VIP 频道)。

现在我们就先记住这个结论,然后再实践中去慢慢体验他的用途。然后我们做个练习,你看 logo 和导航项这两部分还是纵向排列的呢,那我们来给他俩也加上浮动试试看。

为了防止你搞乱了,我在这贴一下完整的 CSS 代码:

/* 这是我写的第一个 CSS 文件,内心十分的激动,在这心潮澎湃之余,我想到了一个真理 —— 稻米鼠真帅! */

html, body {

margin:0;

padding:0;

}

#nav {

width:100%;

height:50px;

background:#F3F3F3;

padding:0 30px;

}

#logo {

float: left;

}

#logo a {

color:#333;

text-decoration: none;

font-size:24px;

font-weight: 700;

line-height: 50px;

}

#nav-items {

float: left;

}

#nav-items .nav-item {

float:left;

list-style: none;

}

再来看看效果:

那么到了这里貌似虽然难看些,但是我们把位置都搞对了。下节课我们来试着给导航项加链接哦~~

 

本章代码下载

原文链接:https://www.ek58.com/archives/324,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?