📜  HTML 课程 |创建导航菜单

📅  最后修改于: 2021-09-02 05:00:33             🧑  作者: Mango

课程导航

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

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

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

HTML

         
                                                                       
                
       


HTML

                   
                                                                           
               
      


HTML


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
header{
     
    overflow: hidden;
}


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


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


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;
}


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;
}


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

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

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

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

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

HTML


                   
                                                                           
               
      

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

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

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 文件,你能看到如下图所示的内容吗?如果没有,请与我们的代码一起计算并重新检查您的代码,您一定错过了一些东西:

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

<< 上一个

下一个 >>