水平导航

本章我们将学习如何向网站添加水平导航或菜单项。

步骤 1 − 要创建菜单项或水平导航，让我们在index.html文件的<div id = “top-nav”>中添加以下代码，其中包含菜单项列表。

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

步骤 2 − 这是一个简单的顶部菜单项目符号列表。要创建超链接，请转到设计视图或代码视图。

步骤 3 − 选择要用作超链接的项目，然后按 Ctrl + K。

步骤 4 − 点击屏幕提示…按钮。

步骤 5 − 输入您想要的屏幕提示文本，然后点击确定。

步骤 6 − 在显示文本字段中，输入首页，然后选择index.html文件，然后点击确定。

步骤 7 − 同样，为其他菜单项添加超链接，如下面的代码所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel="stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title =  "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
         <div id = "left-nav"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

步骤 8 − 要设置顶部导航的样式，请转到管理样式面板。