商院官网：框架的使用

来自CloudWiki
跳转至： 导航， 搜索

案例：商院官网

效果图

  • Web6-19.png、Web5-13.png

确定框架范围

。

编写浮动内页1

  • 命名为inside01.html
  • Web7-20.png
<!DOCTYPE html>
<html">
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
    #apply{
		width:100%;
	}
    table,td{
		border:1px #0071c0 solid;
		border-collapse:collapse;
	}
	td{
		height:30px;
	}
    .col1{
		
	}
	.col2{
		width:30%;
	}
	.col5{
		width:80%;
	}
  .col6{
    text-align:center;
  }
  /*输入框*/
  .data{
     width:99%;height:95%;font-size:100%;
  }
  textarea{
     width:99%; height:70px;font-size:100%;
  }
  select,option{
     width:100%;height:95%;font-size:100%;
  }
  .data2{
     width:45%;height:95%;font-size:100%;
  }
  caption{
     font:normal bold 150% "黑体";
  }
  .name{
     background:#f3f3f3;
  }
  .bn{
     height:40px; margin:0 5px; padding:5px 20px;
     font-size:100%;background:#409eff;color:white;
  }
</style>
</head>

<body>
      <div class="layer2">
          <form method="post">
          <table id="apply">
              <caption>出差申请单</caption>
              <tr></tr>
              <tr> 
                  <td class="col1 name">申请人：</td>
                  <td class="col2"> 
                      <input type="text" name="uname" class="data"/>
                  </td>
                  <td class="col3 name">所在部门：</td>
                  <td class="col4">
                      <input type="text" name="setion" class="data"/>
                  </td>
              </tr>
              <tr> <td class="col1  name">交通方式：</td> 
                  <td class="col2">
                      <select>
                          <option value="car">汽车</option>
                          <option value="train">火车</option>                          
                          <option value="plane">飞机</option>
                          <option value="car hire">租车</option>

                      </select>
                  </td>
                  <td class="col3 name">申请日期：</td><td class="col4"> <input type="date" name="user_date" class="data"/></td>
              </tr>
               <tr>  
                   <td class="col1 name"> 出差事由</td><td  colspan="3"class="col5"><textarea></textarea></td>
              </tr>
               <tr> 
                   <td class="col1 name"> 预计出差时间</td>
                   <td  colspan="3"class="col5">
                        <input type="date" name="start_date" class="data2"/> 
                        至 <input type="date" name="start_date" class="data2"/> 共 n 天 
                   </td>
              </tr>
               <tr>  <td class="col1 name"> 出差教师</td><td  colspan="3"class="col5"><input type="text" name="teacher" class="data"/></br>新增</td>
              </tr>
               <tr>  <td class="col1 name">出差学生 </td><td  colspan="3" class="col5"><input type="text" name="student" class="data"/>
               </td>
              </tr>
               <tr>  
                    <td class="col1 name">附件 </td>
                    <td  colspan="3"class="col5">
                          <input type="file" name="items" accept="image/gif" />
                          </br>新增
                    </td>
              </tr>
              <tr>  <td  colspan="4" class="col6">
                    <input type="submit" value="提交" class="bn" />
                    <input type="reset" value="重置" class="bn" />
              </td>
              </tr>
          </table>
          </form>
     </div>  
</body>
</html>

编写浮动内页2

Web7-19.png 

<!DOCTYPE html>
 <html >
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
		
		    *{margin:0;padding:0;}
           
		    
      #customers
  {  
  width:100%;
  border-collapse:collapse;
  font:normal  100%  "宋体";
 line-height: 180%;text-align: center;
  }
  			
  			#customers td, #customers th 
{
	border:1px solid black;
}


#customers td, #customers th 
  {
 
  border:1px solid #ebeef5;

 
  }
  #customers th 
  {
 
  	 background:#fafafa;
  	 padding:6px ;
  	 text-align:center;
  	 

  }
  #customers td
  {
 
  	 	
  	 padding:6px ;
 
  }
  #customers td a{
  	float:left; width:20%;
  }
  
   #customers tr:hover
  {
      background:#fafafa; 	
  	 
 
  }
		</style>
	</head>

<body>
	<div id="content">
		 <table id="customers">
				<tr>
					<th>院系</th>
					<th>姓名</th>
					<th>教工号</th>
					<th>标题</th>
					<th>提交时间</th>
					<th>操作</th>
				</tr>

				<tr>
					<td>信息与艺术学院</td>
					<td>马欣</td>
					<td>20150815</td>
					<td>11月份实习总结</td>
					<td>2019-01-04 21:19:46</td>
					<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
				</tr>

				<tr >
					<td>信息与艺术学院</td>
					<td>马欣</td>
					<td>20150815</td>
					<td>11月份实习总结</td>
					<td>2019-01-04 21:19:46</td>
					<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
				</tr>

				<tr>
					<td>信息与艺术学院</td>
					<td>马欣</td>
					<td>20150815</td>
					<td>11月份实习总结</td>
					<td>2019-01-04 21:19:46</td>
					<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
				</tr>

				<tr >
					<td>信息与艺术学院</td>
					<td>马欣</td>
					<td>20150815</td>
					<td>11月份实习总结</td>
					<td>2019-01-04 21:19:46</td>
					<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
				</tr>

				<tr>
					<td>信息与艺术学院</td>
					<td>马欣</td>
					<td>20150815</td>
					<td>11月份实习总结</td>
					<td>2019-01-04 21:19:46</td>
					<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
				</tr>

				<tr>
					<td>信息与艺术学院</td>
					<td>马欣</td>
					<td>20150815</td>
					<td>11月份实习总结</td>
					<td>2019-01-04 21:19:46</td>
					<td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td>
				</tr>


			</table>

		</div>
	</body>
	</html>

编写框架主页

  • 编写浮动内页之后，我们开始编写框架主页。
<!DOCTYPE html>
 <html >
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
		
		    *{margin:0;padding:0;}
           #header{width:100%; height:auto; text-align:center;position: fixed;left:0;}
           #layer1-1{width:45%; height:80px; background:white;text-align:center;line-height:350%;float:left;} 
           #layer1-1 img{height:80px;}			   
           #layer1-2{width:55%; height:80px;background:#00203f;;color:#FFFFFF;text-align:center;float:left;} 
		   
           #layer1-2 h3{line-height:350%;}		
		   .clear {clear:both;}
           #main{width:100%; height:600px;color:black;}
		    #navigation2 {    
				width:17%;
				height:600px;
				background-color:#001529;
				font:normal 100%/4.6em  "宋体";
				/*text-align:center; /* 这个属性使盒子中的链接居中 */
				float:left;
				position: fixed;
				left:0;
				top:80px;

	
            }

            #navigation2 a{
            	color:#FFFFFF;/*字体颜色*/
            	text-decoration: none;
            	width:100%;
            	height:4.5em;
            	line-height: 4.6em;
            	box-sizing: border-box;
            	border:0.05em solid black; 	
                border-left:1em solid #151571;
            	display:block;
            }
            #navigation2  a:hover{					/* 鼠标经过时 */
				background-color:yellow;			/* 改变背景色 */
				color:black;						/* 改变文字颜色 */
				border-left:1em solid orange;

  			}

		</style>
	</head>
	
	<body>
		<div id="header">
		    <div id="layer1-1"><img src="http://www.sict.edu.cn/Templets/mode3/images/logo.png" /></div>
            <div id="layer1-2"><h3>学校概况  机构设置  教育教学  就业创业  科技服务</h3>
            <div class="clear"></div>
		</div>
	    <div id="main">
			<div id="navigation2">
				<a href="#">首页</a>
				<a href="#">实习指导</a>
				<a href="#">就业指导</a>
				<a href="#">学生周报</a>
				<a href="#">老师月报</a>
			</div>
			<div id="content">
					
			</div>
		</div>
		<div id="footer">
	       <p>学校地址：济南市旅游路4516号    邮编：250103</p>
           <p>电话：0531-86335888     招生电话：0531-86335555</p>
           <p>鲁ICP备05002370 </p>	
	   </div>
		
	</body>
</html>

在框架页与浮动页之间建立链接

  • 最后一步，在框架页左侧的链接中加上地址，为框架页和浮动页建立联系。
取自“http://www.openbrains.net/mediawiki/index.php?title=商院官网：框架的使用&oldid=15458”