“表单和导航”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（→‎竖直导航栏）
 
（未显示同一用户的15个中间版本）
第1行： 第1行：
 
*前置知识点：[[罗汉塔]]、[[图片、列表和导航]]
 
*前置知识点：[[罗汉塔]]、[[图片、列表和导航]]
−
==表单==
 
−
*[http://www.w3school.com.cn/tiy/t.asp?f=html_input_src W3C编辑器]
 
−
===基本表单===
 
−
*[[文件:w8-8.png]]
 
  
 +
实战案例_商院电商源代码：https://share.weiyun.com/5FUn2P5
 +
 +
==准备工作==
 +
*添加表单前，先找好表单放置的区域
 +
*比如中下图画红框的区域。
 +
*[[文件:w8-56.png|700px]]
 +
 +
==添加表单==
 +
*[[文件:w8-57.png|700px]]
 +
*知识点：[[表单的基本标记]]、[[表单的高级标记]]
 
*知识点：[[表单的基本标记]]
 
*知识点：[[表单的基本标记]]
−
 
 
*源码：
 
*源码：
 
  <nowiki><form>
 
  <nowiki><form>
−
  First name: <input type="text" name="fname">
+
请输入关键词: <input type="text" name="fname">  
−
  Last name: <input type="text" name="lname">
+
   <input type="submit" value="搜索">
−
   <input type="submit" value="提交">
 
 
</form></nowiki>
 
</form></nowiki>
  
−
===美化表单===
 
−
*[[文件:w8-9.png]]
 
−
*知识点：[[表单的基本标记]]、[[表单的高级标记]]
 
−
 
−
*源码：
 
−
<nowiki><html>
 
−
<body>
 
−
<p>
 
−
<form action="/example/html/form_action.asp" method="get">
 
−
  FirstName <input type="text" name="fname" style="height:30px;"/>
 
−
  LastName <input type="text" name="lname" style="height:30px;"/>
 
−
  <input type="image" src="/i/eg_submit.jpg" alt="Submit" 
 
−
    style="height:40px;vertical-align:bottom"/>
 
−
</form>
 
−
</p>
 
−
 
−
<p>注释：如果 type 属性设置为 image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。</p>
 
−
 
−
</body>
 
−
</html></nowiki>
 
−
 
−
===多功能表单===
 
−
*[[文件:w8-10.png]]
 
−
*知识点：[[表单的基本标记]]、[[表单的高级标记]]
 
−
*源码：
 
−
  <nowiki><html>
 
−
<body>
 
−
<p>
 
−
<form action="/example/html/form_action.asp" method="get">
 
−
 
−
  请搜索关键字： <input type="text" name="fname" style="height:30px;"/>&nbsp; 
 
−
  <input type="image" src="/i/eg_submit.jpg" alt="Submit" 
 
−
    style="height:40px;vertical-align:bottom"/><br><br>
 
−
 
 
−
  配送方式：<input type="radio" name="byway" value="jd" checked >京东配送
 
−
  <input type="radio" name="byway" value="other">其他配送<br><br>
 
−
  配送区域：
 
−
  <select>
 
−
  <option value="京津冀">京津冀</option>
 
−
  <option value="沪宁杭">沪宁杭</option>
 
−
  <option value="粤港澳">粤港澳</option>
 
−
  <option value="其他">其他</option>
 
−
</select>
 
−
 
 
−
 
 
−
 
 
−
</form>
 
−
</p>
 
−
 
−
 
−
</body>
 
−
</html></nowiki>
 
−
 
−
===用表格布局===
 
−
*[[文件:w8-11.png]]
 
−
*知识点：[[表单的基本标记]]、[[表单的高级标记]]
 
−
 
−
*源码：
 
−
<nowiki><html>
 
−
<body>
 
−
 
−
<form action="/example/html/form_action.asp" method="get">
 
−
<table>
 
−
  <tr>
 
−
    <td>请搜索关键字：</td>
 
−
    <td><input type="text" name="fname" style="height:30px;"/> 
 
−
        <input type="image" src="/i/eg_submit.jpg" alt="Submit" 
 
−
    style="height:40px;vertical-align:bottom"/>
 
−
    </td>
 
−
  </tr>
 
−
 
 
−
  <tr>
 
−
    <td>配送方式：</td>
 
−
    <td><input type="radio" name="byway" value="jd" checked >京东配送
 
−
  <input type="radio" name="byway" value="other">其他配送
 
−
    </td>
 
−
  </tr>
 
−
 
−
  <tr>
 
−
      <td>配送区域：</td>
 
−
      <td>
 
−
        <select>
 
−
          <option value="京津冀">京津冀</option>
 
−
          <option value="沪宁杭">沪宁杭</option>
 
−
          <option value="粤港澳">粤港澳</option>
 
−
          <option value="其他">其他</option>
 
−
        </select>
 
−
      </td>
 
−
  </tr> 
 
−
</form>
 
−
</body>
 
−
</html></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>
  
 
==导航==
 
==导航==
−
===超链接===
+
===超链接简易版导航===
−
*横排超链接：
+
*直接使用超链接就可以制作一个简单的导航：
−
*[[文件:W4-25.png]]
+
*[[文件:w8-58.png|700px]]
−
*竖排超链接:
 
−
*[[文件:w8-27.png]]
 
  
 
*代码：
 
*代码：
−
  <nowiki><div id="navigation">
+
  <nowiki><div id="layer1-2">
−
<a href="#">Home</a>
+
      <a href="#">学校概况</a>
−
<a href="#">Contact us</a>
+
      <a href="#">机构设置</a>
−
<a href="#">Web Dev</a>
+
      <a href="#">教育教学</a>
−
<a href="#">Web Design</a>
+
      <a href="#">创新创业</a>
−
<a href="#">Map</a>
+
      <a href="#">科技服务</a>
−
</div></nowiki>
+
  </div></nowiki>
  
−
===水平导航栏===
+
===将超链接转化为块级元素===
−
*[[文件:W4-26.png]]
+
*但是我们知道，导航之所以称为导航条，是因为将超链接转化成了块级元素。
−
 
+
*所以我们添加如下CSS代码：
−
*基本CSS代码：
+
  <nowiki>  
−
            <nowiki>#navigation {  
+
                #layer1-2{width:100%;height:40px;background-color:darkblue;color:white;
−
width:60%;
+
                          }  
−
height:5em;
+
                #layer1-2 a{
−
background-color:#1136c1;
+
width:16%;
−
          }
+
float:left;
−
#navigation a{
+
height:40px;
−
width:16%;
+
color:#FFFFFF;      
−
float:left;
+
}</nowiki>
−
height:4em;
+
*添加之后的效果为：
−
color:#FFFFFF;      
+
  [[文件:w8-59.png|700px]]
−
}</nowiki>
+
===导航栏最终效果===
−
+
*[[文件:w8-60.png|700px]]
−
*优化后的代码:
+
*我们再继续优化:使文字居中，去掉下划线，增加悬停
 
  <nowiki><style>
 
  <nowiki><style>
−
   #navigation {     
+
   #layer1-2 {     
−
width:60%;
+
width:100%;
−
height:5em;
+
height:40px;
−
background-color:#1136c1;
+
background-color:darkblue;      
  
 
font-weight:bold;/*字体加粗*/
 
font-weight:bold;/*字体加粗*/
 
font-size:1em;/*字号*/
 
font-size:1em;/*字号*/
 
text-align:center; /* 这个属性使盒子中的链接居中 */
 
text-align:center; /* 这个属性使盒子中的链接居中 */
−
}
+
  }
−
   #navigation a{
+
   #layer1-2 a{
−
+
width:16%;  
−
width:16%;
 
 
float:left;
 
float:left;
−
height:4em;
+
height:40px;
−
        color:#FFFFFF;
 
−
 
 
  
−
line-height:4em; /* 行高*/
+
        color:white;
−
padding:0.5em;  /* 内边距 */
+
line-height:40px; /* 行高*/
 
text-decoration:none; /*下划线*/
 
text-decoration:none; /*下划线*/
−
border-left:1em solid #151571; /* 左边的粗边 */
+
 
   }
 
   }
−
   #navigation a:hover{ /* 鼠标经过时 */
+
   #layer1-2 a:hover{ /* 鼠标经过时 */
 
background-color:#002099; /* 改变背景色 */
 
background-color:#002099; /* 改变背景色 */
 
color:#ffff00; /* 改变文字颜色 */
 
color:#ffff00; /* 改变文字颜色 */
−
border-left:12px solid yellow;
+
 
   }
 
   }
 
</style>
 
</style>
 
</nowiki>
 
</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;/*字体加粗*/
−
*[[文件:W4-17.png]]
+
      font-size:1em;/*字号*/
−
 
+
      text-align:center; /* 这个属性使盒子中的链接居中 */
−
*代码：
+
          }
−
<nowiki><style>
+
          #layer1-2 a{
−
#navigation {   
+
      width:16%;
−
width:30%;
+
      float:left;
−
font-weight:bold;
+
      height:40px;
−
font-size:1em;
 
−
text-align:center; /* 这个属性使盒子中的链接居中 */
 
−
margin:0;
 
−
padding:0;
 
  
 +
              color:white;
 +
      line-height:40px; /* 行高*/
 +
      text-decoration:none; /*下划线*/
 
 
−
}
+
        }
−
#navigation a{
+
        #layer1-2  a:hover{ /* 鼠标经过时 */
 +
      background-color:#002099; /* 改变背景色 */
 +
      color:#ffff00; /* 改变文字颜色 */
 
 
−
width:100%;
+
          }
−
display:block;
+
 
−
height:4em;
+
 
−
+
          #layer2{width:100%;height:auto;background-color:lightblue;}
−
line-height:4em;
+
  #layer2-1{width:45%; height:410px; float:left;}     
−
color:#FFFFFF;
+
          #layer2-1 img {width:100%;}  
−
background-color:#074C97;;
+
          #layer2-2{width:55%; height:410px;;float:left;}
−
padding:5px 5px 5px 0.5em;
+
          #layer2-2 a {font-size:1em;color:black;text-decoration:none;}
−
text-decoration:none;
+
          #layer2-2 ul{ padding:0; margin:0;}
−
border-left:1em solid #151571; /* 左边的粗边 */
+
          #layer2-2 ul li{ padding:0 0 0 20px;list-style:disc inside url(images/arrow.gif) ;line-height:250%; }  
−
border-right:1px solid #151571; /* 右侧阴影 */
+
          .clear{clear:both;}
−
}
+
 
−
 
+
          #layer3{width:100%; height:100px; background:gray; text-align:center;line-height:100px;}         
−
#navigation  a:hover{ /* 鼠标经过时 */
+
      </style>
−
background-color:#002099; /* 改变背景色 */
+
    </head>
−
color:#ffff00; /* 改变文字颜色 */
+
    <body>
−
border-left:1em solid yellow;
+
        <div id="layer1">
−
}
+
  <div id="layer1-1">
−
</style></nowiki>
+
      <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>

2018年12月21日 (五) 13:28的最新版本

实战案例_商院电商源代码：https://share.weiyun.com/5FUn2P5

准备工作

  • 添加表单前，先找好表单放置的区域
  • 比如中下图画红框的区域。
  • W8-56.png

添加表单

<form>
 请输入关键词: <input type="text" name="fname"> 
  <input type="submit" value="搜索">
</form>


  • 页面此时的完整代码：
<!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>

导航

超链接简易版导航

  • 直接使用超链接就可以制作一个简单的导航：
  • W8-58.png
  • 代码：
<div id="layer1-2">
	       <a href="#">学校概况</a>
	       <a href="#">机构设置</a>
	       <a href="#">教育教学</a>
	       <a href="#">创新创业</a>
	       <a href="#">科技服务</a>
  </div>

将超链接转化为块级元素

  • 但是我们知道，导航之所以称为导航条，是因为将超链接转化成了块级元素。
  • 所以我们添加如下CSS代码：
   
                 #layer1-2{width:100%;height:40px;background-color:darkblue;color:white;
                           } 
                 #layer1-2 a{	
				width:16%;
				float:left;
				height:40px;
				color:#FFFFFF;		    
		 }
  • 添加之后的效果为：
 W8-59.png

导航栏最终效果

  • W8-60.png
  • 我们再继续优化:使文字居中，去掉下划线，增加悬停
<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>
  • 页面此时的完整代码：
<!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{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>
取自“http://www.openbrains.net/mediawiki/index.php?title=表单和导航&oldid=10729”