查看“表单和导航”的源代码

*前置知识点：[[罗汉塔]]、[[图片、列表和导航]]
==准备工作==
*添加表单前，先找好表单放置的区域
*比如中下图画红框的区域。
*[[文件:w8-56.png|700px]]

==添加表单==
*[[文件:w8-57.png|700px]]
*知识点：[[表单的基本标记]]、[[表单的高级标记]]
*知识点：[[表单的基本标记]]
*源码：
 <nowiki><form>
 请输入关键词: <input type="text" name="fname"> 
  <input type="submit" value="搜索">
</form></nowiki>


*页面此时的完整代码：
 <nowiki><!doctype html>
<html>
    <head>
        <title>我的第一个 HTML 页面</title>
        <meta charset="gb2312">
	<style type="text/css">
          *{margin:0;padding:0;}
           #layer1{width:100%; height:120px; background:blue;}
	   #layer1-1{width:100%;height:80px;background-color:lightblue;}  
	   #layer1-1 img {height:100%;}
	   #layer1-1-1 {width:35%; height:80px; text-align:center;float:left;} 
	   #layer1-1-2 {width:65%; height:80px; line-height:80px;text-align:center;float:left;} 
	   #layer1-2{width:100%;height:40px;background-color:darkblue;color:white;} 
	   #layer2-1{width:45%; height:410px; float:left;} 
		   
           #layer2{width:100%;height:auto;background-color:lightblue;}
	   #layer2-1{width:45%; height:410px; float:left;}      
           #layer2-1 img {width:100%;}		   
           #layer2-2{width:55%; height:410px;;float:left;} 
           #layer2-2 a {font-size:1em;color:black;text-decoration:none;}
           #layer2-2 ul{ padding:0; margin:0;}
           #layer2-2 ul li{ padding:0 0 0 20px;list-style:disc inside url(images/arrow.gif) ;line-height:250%;	}	   
           .clear{clear:both;}
		   
           #layer3{width:100%; height:100px; background:gray; text-align:center;line-height:100px;}           
       </style>
     </head>
     <body>
        <div id="layer1">
		   <div id="layer1-1">
		      <div id="layer1-1-1">
				<img src="image/logo.png" alt="山东商职学院" />
		      </div>
		      <div id="layer1-1-2">	
                         <form action="" method="">
				<p>请输入关键词：<input type="text" name="fname" />					
				    <input type="image" src="image/03.png" alt="Submit" style="vertical-align:middle;" /></p>
			 </form>			  
		       </div>
		      <div class="clear"></div>
		   </div>
                   <div id="layer1-2"> 学校概况 教育教学 机构设置 创新创业 科研服务</div>
	</div>
        <div id="layer2">
		    <div id="layer2-1">
			   <img src="image/02.png" alt="学院新闻" />			   
		    </div>
		    <div id="layer2-2">
			   <h3>学校要闻</h3>
                           <br/>
                            <ul>
                               <li>马克思主义学院召开陶行知教育...</li>
                              <li>我校承办2017年山东省“农产品质量...</li>
                              <li>2017山东养老服务业高峰论坛在我...</li>
                              <li>校报荣获全国高校校报协会2016年...</li>
                              <li>浙江纺织服装职业技术学院、河北...</li>
                            </ul>
		     </div>
                     <div class="clear"></div>
	</div>    
        <div id="layer3"><p>学校邮编：250000 学校地址：旅游路4516号</p></div>
     </body>
  </html></nowiki>

==导航==
===超链接简易版导航===
*直接使用超链接就可以制作一个简单的导航：
*[[文件:w8-58.png|700px]]

*代码：
 <nowiki><div id="layer1-2">
	       <a href="#">学校概况</a>
	       <a href="#">机构设置</a>
	       <a href="#">教育教学</a>
	       <a href="#">创新创业</a>
	       <a href="#">科技服务</a>
  </div></nowiki>

===将超链接转化为块级元素===
*但是我们知道，导航之所以称为导航条，是因为将超链接转化成了块级元素。
*所以我们添加如下CSS代码：
   <nowiki> 
                 #layer1-2{width:100%;height:40px;background-color:darkblue;color:white;
                           } 
                 #layer1-2 a{	
				width:16%;
				float:left;
				height:40px;
				color:#FFFFFF;		    
		 }</nowiki>
*添加之后的效果为：
  [[文件:w8-59.png|700px]]	
===导航栏最终效果===
*[[文件:w8-60.png|700px]]
*我们再继续优化:使文字居中，去掉下划线，增加悬停
 <nowiki><style>
   #layer1-2 {    
	width:100%;
	height:40px;	
	background-color:darkblue;       

	font-weight:bold;/*字体加粗*/
	font-size:1em;/*字号*/
	text-align:center; /* 这个属性使盒子中的链接居中 */	
   }
   #layer1-2 a{	
	width:16%; 
	float:left;
	height:40px;

        color:white;
	line-height:40px;	/* 行高*/	
	text-decoration:none; /*下划线*/
	
  }
  #layer1-2  a:hover{					/* 鼠标经过时 */
	background-color:#002099;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
	
  }
</style>
</nowiki>
*页面此时的完整代码：
 <nowiki><!doctype html>
<html>
    <head>
        <title>我的第一个 HTML 页面</title>
        <meta charset="gb2312">
	<style type="text/css">
          *{margin:0;padding:0;}
           #layer1{width:100%; height:120px; background:blue;}
	   #layer1-1{width:100%;height:80px;background-color:lightblue;}  
	   #layer1-1 img {height:100%;}
	   #layer1-1-1 {width:35%; height:80px; text-align:center;float:left;} 
	   #layer1-1-2 {width:65%; height:80px; line-height:80px;text-align:center;float:left;} 
	   #layer1-2 {    
	      width:100%;
	      height:40px;	
	      background-color:darkblue;       

	      font-weight:bold;/*字体加粗*/
	      font-size:1em;/*字号*/
	      text-align:center; /* 这个属性使盒子中的链接居中 */	
           }
          #layer1-2 a{	
	      width:16%; 
	      float:left;
	      height:40px;

              color:white;
	      line-height:40px;	/* 行高*/	
	      text-decoration:none; /*下划线*/
	
         }
         #layer1-2  a:hover{					/* 鼠标经过时 */
	      background-color:#002099;			/* 改变背景色 */
	      color:#ffff00;						/* 改变文字颜色 */
	
          }
	   #layer2-1{width:45%; height:410px; float:left;} 
		   
           #layer2{width:100%;height:auto;background-color:lightblue;}
	   #layer2-1{width:45%; height:410px; float:left;}      
           #layer2-1 img {width:100%;}		   
           #layer2-2{width:55%; height:410px;;float:left;} 
           #layer2-2 a {font-size:1em;color:black;text-decoration:none;}
           #layer2-2 ul{ padding:0; margin:0;}
           #layer2-2 ul li{ padding:0 0 0 20px;list-style:disc inside url(images/arrow.gif) ;line-height:250%;	}	   
           .clear{clear:both;}
		   
           #layer3{width:100%; height:100px; background:gray; text-align:center;line-height:100px;}           
       </style>
     </head>
     <body>
        <div id="layer1">
		   <div id="layer1-1">
		      <div id="layer1-1-1">
				<img src="image/logo.png" alt="山东商职学院" />
		      </div>
		      <div id="layer1-1-2">	
                         <form action="" method="">
				<p>请输入关键词：<input type="text" name="fname" />					
				    <input type="image" src="image/03.png" alt="Submit" style="vertical-align:middle;" /></p>
			 </form>			  
		       </div>
		      <div class="clear"></div>
		   </div>
                   <div id="layer1-2"> 学校概况 教育教学 机构设置 创新创业 科研服务</div>
	</div>
        <div id="layer2">
		    <div id="layer2-1">
			   <img src="image/02.png" alt="学院新闻" />			   
		    </div>
		    <div id="layer2-2">
			   <h3>学校要闻</h3>
                           <br/>
                            <ul>
                               <li>马克思主义学院召开陶行知教育...</li>
                              <li>我校承办2017年山东省“农产品质量...</li>
                              <li>2017山东养老服务业高峰论坛在我...</li>
                              <li>校报荣获全国高校校报协会2016年...</li>
                              <li>浙江纺织服装职业技术学院、河北...</li>
                            </ul>
		     </div>
                     <div class="clear"></div>
	</div>    
        <div id="layer3"><p>学校邮编：250000 学校地址：旅游路4516号</p></div>
     </body>
  </html></nowiki>