HTML 课程 |创建导航菜单

课程导航

在上一篇文章中，我们使用 HTML 元素和标签创建了我们网站的整个结构。现在让我们开始分部分构建网站。
网站的第一部分是标题。因此，我们首先要创建的是网页页眉中的导航菜单。
导航栏包含：

• 左对齐的标志。
• 右侧对齐的五个项目的菜单。

让我们从 index.html文件中查看标题菜单的部分代码。下面是 Header 菜单的代码部分，其中突出显示的部分是顶部导航栏：

第一个任务是为徽标添加图像。包含图像和创建徽标的步骤：

• 点击此处下载图片。
• 将图像复制并粘贴到目录：root/images。其中root是我们项目的顶级目录。在我们的例子中，它被命名为“示例项目”。
• 使用 img 标签在代码中包含图像。

第二个任务是在标题菜单的导航部分内的 HTML 中创建一个无序列表：

• 在导航菜单部分添加一个无序列表，其中包含 5 个名为“主页”、“关于我们”、“我们的产品”、“职业”和“联系我们”的列表项。

添加以上两件事后的 Header 部分的代码将如下所示：

HTML

         
    
    

             
        
        

            
        
   
                 
        
        

          

            

                
Home
                
About Us
                
Our Products
                
Careers
                
Contact Us
            
          
        
    
   
 
    
    

 
    

如果您现在在浏览器中打开 index.html 文件，您将看到以下输出：

这看起来与我们在最终项目的屏幕截图中看到的非常不同。这是因为我们的网站目前缺少 CSS。也就是说，我们刚刚创建了导航栏的结构，为了让它看起来漂亮，我们必须使用CSS添加样式。
我们稍后会设计导航栏，但首先创建一个名为“ style.css ”的文件并将其添加到文件夹“ sample project/css ”中。通过在 head 标签之间添加以下行，还将创建的 CSS 文件包含到“index.html”文件中。

在我们开始设置导航菜单样式之前，需要做的第一件事是为 HTML 元素设置默认的 CSS 值。将以下代码复制并粘贴到您的“ style.css ”文件中：

CSS

html, body{
    height: 100%;
}
     
body{
    margin: 0px;
    padding: 0px;
    background: #FFFFFF;
    font-family: 'Roboto';
    font-size: 12pt;
}
         
h1, h2, h3{
    margin: 0;
    padding: 0;
    color: #404040;
}
     
p, ol, ul{
    margin-top: 0;
}
 
p {
    line-height: 180%;
}
 
ol, ul{
    padding: 0;
    list-style: none;
}
     
.container{   
    /* Set width of container to
        1200px and align center */
    margin: 0px auto;
    width: 1200px;
}

正如您在上面的 CSS 中看到的，我们为项目所需的几乎每个有用的 HTML 元素都设置了默认值。我们还创建了一个名为“容器”的 CSS 类。这基本上定义了一个宽度为 1200px 的容器，其中的所有文本都与中心对齐。将这个名为container 的类添加到

标签中。
下一步是为我们的 HTML 元素分配一些 id，然后在 CSS 文件中使用这些 id 来设置它们的样式。在这里，我们已经为 HTML 元素分配了 id，正如您在上面的代码中看到的那样。让我们开始为它们添加样式。
以下是导航栏样式的分步指南：

• 整体标题样式：标题标签不需要太多样式。标题标签只需要设置为“溢出：隐藏”以防止窗口在浏览器调整大小时溢出。
  将以下代码添加到 style.css 中：

CSS

header{
     
    overflow: hidden;
}

• 样式导航栏(#top-header) ：为导航栏设置固定高度 60px 并将文本居中对齐。
  将以下代码添加到 style.css 中：

CSS

#top-header{
         
    text-align: center;
    height: 60px;
}

• 样式 Logo(#logo) ：从 logo 的父 div 中删除填充。使父级和图像都向左浮动并为其分配宽度。
  将以下代码添加到 style.css 中：

CSS

#logo{
    float: left;
    padding: none;
    margin: none;
    height: 60px;
    width: 30%;
}
 
#logo img{
    width: 60%;
    float: left;
    padding: 10px 0px;
}   

• 样式导航菜单（#menu） ：
  将以下代码添加到 style.css 中：

CSS

#menu{
    float: right;
    width: 70%;
    height: 100%;
    margin: none;
}
     
#menu ul{
    text-align: center;
    float: right;
    margin: none;
    background: #0074D9;
}
     
#menu li{
    display: inline-block;
    padding: none;
    margin: none;
}
     
#menu li a, #menu li span{
    display: inline-block;
    padding: 0em 1.5em;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
}
     
#menu li a{
         
    color: #FFF;
}
     
#menu li:hover a, #menu li span{
    background: #FFF;
    color: #0074D9;
    border-left: 1px solid #0074D9;
    text-decoration: none;
}

结合上述所有类和导航栏 id 的整体 CSS 代码如下所示：

CSS

/*************************/
/*    Styling  Header    */
/*************************/
header{
     
    overflow: hidden;
}
 
#top-header{
         
    text-align: center;
    height: 60px;
}
 
/****************/   
/* Styling Logo */
/****************/
#logo{
    float: left;
    padding: none;
    margin: none;
    height: 60px;
    width: 30%;
}
 
#logo img{
    width: 60%;
    float: left;
    padding: 10px 0px;
}   
 
/***************************/
/* Styling Navigation Menu */
/***************************/
#menu{
    float: right;
    width: 70%;
    height: 100%;
    margin: none;
}
     
#menu ul{
    text-align: center;
    float: right;
    margin: none;
    background: #0074D9;
}
     
#menu li{
    display: inline-block;
    padding: none;
    margin: none;
}
     
#menu li a, #menu li span{
    display: inline-block;
    padding: 0em 1.5em;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
}
     
#menu li a{
         
    color: #FFF;
}
     
#menu li:hover a, #menu li span{
    background: #FFF;
    color: #0074D9;
    border-left: 1px solid #0074D9;
    text-decoration: none;
}

现在在浏览器中打开 index.html 文件，你能看到如下图所示的内容吗？如果没有，请与我们的代码一起计算并重新检查您的代码，您一定错过了一些东西：

所以，我们已经成功地为我们网站的标题创建了导航栏。接下来是在标题中导航栏正下方的图像上插入图像和文本。

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 火狐
• 歌剧
• 苹果浏览器

<< 上一个
下一个 >>