渣渣HTML外加javascript做的第一个同乡会网页（好多功能都没写，只弄出来一个框架） 

这里只是上传了主页代码，其它的子页不是很重要，网页成员之间的互动部分暂时还不能完成（技术太水）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>广财大贵州同乡会</title>
		<link rel="stylesheet" type="text/css" href="css/firstpage.css">
		<script>
		
			function showid(id){
			 document.getElementById(id).style.display ='block';
			}
			
			function showid1(id){
			 document.getElementById(id).style.display ='none';
			}
			
			function resend(i){
				switch(i){
					
					case 1:window.open("http://www.xiami.com/");
					break;
					case 2:window.open("http://music.163.com/");
					break;
					case 3:window.open("https://y.qq.com/");
					break;
					case 4:window.open("http://web.3366.com/ddz/");
					break;
					case 5:window.open("http://waimai.baidu.com/waimai?qt=find&city=&cid=257&cname=广州");
					break;
					case 6:window.open("https://www.ele.me/home/");
					break;
					case 7:window.open("http://fs.meituan.com/?utm_campaign=baidu&utm_medium=organic&utm_source=baidu&utm_content=homepage&utm_term=");
					break;
					case 8:window.open("http://www.51voa.com/");
					break;
					case 9:window.open("https://wx.qq.com/");
					break;
					case 10:window.open("http://web2.qq.com/");
					break;
					case 11:window.open("http://weibo.com/u/2139537262/home?wvr=5");
					break;
					case 12:window.open("https://www.baidu.com/link?url=watq7rLs3KzTwAh6FESItFQniR6vMk_V7ygrP2Dd3Gy&wd=&eqid=e4938eaa00001eb500000006589856be");
					break;
					case 13:window.open("http://www.ctrip.com/");
					break;
					case 14:window.open("http://www.tuniu.com/tours/?p=1558&utm_source=baidu&utm_medium=cpc&utm_campaign=SE&fc=u10316631.k52612101624.a13465900513.pb");
					break;
					case 15:window.open("http://www.12306.cn/mormhweb/");
					break;
					case 16:window.open("http://translate.google.cn/");
					break;
				}
				
			}
		
		</script>
		
	</head>
	
	<body>
		
		<table>
			<tbody>
				<tr>
					
						<table style="left: 80px;height: 50px;right: 100px; position: absolute;">
							<tbody>
								<tr>
									<td><img src="img/2.jpg" width="320px" height="120px"></td>
									<td><img src="img/5.jpg" width="320px" height="120px"></td>
									<td><img src="img/3.jpg" width="320px" height="120px"></td>
								</tr>	
							</tbody>
						</table>
						
						<table style="left: 80px;position: absolute;right: 100px; top: 134px;position: absolute;z-index: 100;">
							<tbody>
								<tr>
									<td width="92" height="27" align="center" background="img/6.gif" style="left: 1px;position: absolute;right: 100px;position: absolute;">
										<a href="Firstpage.html" class="nav" style="text-decoration: none;align-content: center;">首 页</a>
									</td>
									
									<td width="1" height="27" align="center" background="img/7.gif" style="left: 96px;position: absolute;right: 100px;position: absolute;" ></td>
									
									<td width="92" height="27" align="center" background="img/6.gif" style="left:99px;position: absolute;right: 100px;position: absolute;">
									      <div class="show" onmouseover="showid('downmenu1')" onmouseout="showid1('downmenu1')">
									      		<a href="#" class="add" onmouseover="showid('downmenu1')">会所概况</a>
										           <div class="hidden" id="downmenu1" style="display:none;">
																  <table width="%100" border="0" cellpadding="0" cellspacing="0">
										                             <tbody>	
																	<tr>
																		<td>
																			<a href="HuisuoDiscrible.html"><strong>会所简介</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td>
																			<a href="two.html"><strong>会所章程</strong></a>
																		</td>
																	</tr>
																	
																	<tr >
																		<td >
																			<a href="three.html"><strong>入会章程</strong></a>
																		</td>
																	</tr>
																	
																  </tbody>
									                          </table>
												  </div>
											 </div>
				                    </td>
									
									<td width="1" height="27" align="center" background="img/7.gif" style="left: 194px;position: absolute;right: 100px;position: absolute;" ></td>
									
									<td width="92" height="27" align="center" background="img/6.gif" style="left: 197px;position: absolute;right: 100px;position: absolute;">
									      <div class="show1" onmouseover="showid('downmenu')" onmouseout="showid1('downmenu')">
									      		<a href="#" class="add1" onmouseover="showid('downmenu')">会所动态</a>
										           <div class="hidden" id="downmenu" style="display:none;">
																  <table width="%100" border="0" cellpadding="0" cellspacing="0">
										                             <tbody>	
										                             <tr>
																		<td >
																			<a href="four.html"><strong>会员名单</strong></a>
																		</td>
																	</tr>	
										                             	
										                             	
																	<tr>
																		<td >
																			<a href="five.html"><strong>会所简介</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="six.html"><strong>会所章程</strong></a>
																		</td>
																	</tr>
																	
									
																  </tbody>
									                          </table>
												  </div>
											 </div>
				                    </td>
				                       
				                    <td width="1" height="27" align="center" background="img/7.gif" style="left: 291px;position: absolute;right: 100px;position: absolute;" ></td>
				                     
									<td width="92" height="27" align="center" background="img/6.gif" style="left: 295px;position: absolute;right: 100px;position: absolute;">
									      <div class="show1" onmouseover="showid('downmenu2')" onmouseout="showid1('downmenu2')">
									      		<a href="#" class="add1" onmouseover="showid('downmenu2')">贵州文化</a>
										           <div class="hidden" id="downmenu2" style="display:none;">
																  <table width="%100" border="0" cellpadding="0" cellspacing="0">
										                             <tbody>	
										                             
										                            <tr>
																		<td >
																			<a href="http://baike.baidu.com/link?url=G_3dGKoE_T6aE5KUCU0F8aVUzpfs-aXb8VMhdI6rf3oyaZZ4XV6rqFLQbsCzYKJkQFVa1t0zSy9l9aKZ8fs3sDAgdyLXffsnPgO2V09jkue"><strong>全省介绍</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="http://www.360doc.com/content/13/1029/16/137012_325089869.shtml"><strong>文化简介</strong></a>
																		</td>
																	</tr> 
										                       	
																	<tr>
																		<td >
																			<a href="http://baike.baidu.com/link?url=Dw0PuwYCaFP9CqEp6F3FTFGwbWgF_sGCNA5o5lGj0tAO67mr6_1bZNk4EOd3EXNvNJFoatFhRgmkB_-cumKTvGNlBRvzWF3aGpfF-askdeWnBSptvuoivpRUzpFnYyK0"><strong>历史</strong></a>
																		</td>
																	</tr>
																	
															
																  </tbody>
									                          </table>
												  </div>
											 </div>
				                       </td>
				                       
				                    <td width="1" height="27" align="center" background="img/7.gif" style="left: 390px;position: absolute;right: 100px;position: absolute;" ></td> 
				                       
									<td width="92" height="27" align="center" background="img/6.gif" style="left: 393px;position: absolute;right: 100px;position: absolute;">
									      <div class="show1" onmouseover="showid('downmenu3')" onmouseout="showid1('downmenu3')">
									      		<a href="#" class="add1" onmouseover="showid('downmenu3')">各学院会员</a>
										           <div class="hidden" id="downmenu3" style="display:none;">
																  <table width="%100" border="0" cellpadding="0" cellspacing="0">
										                             <tbody>	
										                             	
										                             <tr>
																		<td >
																			<a href="seven.html"><strong>人文与传播学院</strong></a>
																		</td>
																	 </tr>
																	
																	<tr>
																		<td >
																			<a href="eight.html"><strong>法学院</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="nine.html"><strong>工商管理</strong></a>
																		</td>
																	</tr> 	 	
										                             	
										                            <tr>
																		<td >
																			<a href="ten.html"><strong>会计学院</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="eleven.html"><strong>金融学院</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="twelve.html"><strong>经济贸易学院</strong></a>
																		</td>
																	</tr> 	
																	
																	<tr>
																		<td >
																			<a href="seven.html"><strong>财政税务学院</strong></a>
																		</td>
																	 </tr>
																	
																	<tr>
																		<td >
																			<a href="eight.html"><strong>信息学院</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="nine.html"><strong>公共管理学院</strong></a>
																		</td>
																	</tr> 	 	
										                             	
										                            <tr>
																		<td >
																			<a href="ten.html"><strong>艺术学院</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="eleven.html"><strong>外国语学院</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="twelve.html"><strong>地理与旅游学院</strong></a>
																		</td>
																	</tr> 	
																	
																	 <tr>
																		<td >
																			<a href="ten.html"><strong>数学与统计学院</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="eleven.html"><strong>继续教育学院</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="twelve.html"><strong>国际学院</strong></a>
																		</td>
																	</tr> 	
										     			
																  </tbody>
									                          </table>
												  </div>
											 </div>
				                       </td>
				                       
				                    <td width="1" height="27" align="center" background="img/7.gif" style="left: 488px;position: absolute;right: 100px;position: absolute;" ></td>   
				                       
									<td width="100" height="27" align="center" background="img/6.gif" style="left: 491px;position: absolute;right: 100px;position: absolute;">
									      <div class="show1" onmouseover="showid('downmenu4')" onmouseout="showid1('downmenu4')">
									      		<a href="#" class="add1" onmouseover="showid('downmenu4')">会员工作行业</a>
										           <div class="hidden" id="downmenu4" style="display:none;">
																  <table width="%100" border="0" cellpadding="0" cellspacing="0">
										                             <tbody>	
										                             	
										                            	<tr>
																		<td >
																			<a href="thirteen.html"><strong>金融</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="fiveteen.html"><strong>IT</strong></a>
																		</td>
																	</tr>
																	
																	<tr>
																		<td >
																			<a href="fiveteen.html"><strong>销售</strong></a>
																		</td>
																	</tr>
																
																  </tbody>
									                          </table>
												  </div>
											 </div>
				                       </td>
				                       
				                    <td width="1" height="27" align="center" background="img/7.gif" style="left: 588px;position: absolute;right: 100px;position: absolute;" ></td>  
				                       
									<td width="100" height="27" align="center" background="img/6.gif" style="left: 595px;position: absolute;right: 100px;position: absolute;">   
									  <a href="#">在线留言</a>        
				                    </td>
				                       
				                    <td width="1" height="27" align="center" background="img/7.gif" style="left: 677px;position: absolute;right: 100px;position: absolute;" ></td>   
				                 
								</tr>
							</tbody>
						</table>
						
						<table style="left: 80px;height:200px;width:970px;right: 100px; top:165px;position: absolute;z-index: 99;">
							<tbody>
								<tr style="height:390px;width:978px;"><td style="background: url(img/8.png);"></td></tr>
							</tbody>
			            </table>
		            
		           
		                <td>
		           	    <table style="left: 1050px;height:319px;width:409px; position: absolute;">
							<tbody>
								<tr>
									<td style="background: url(img/10.gif);width:137px;height:25px;"><a href="#" style="position: absolute;left:34px;top:6px;">各地旅游景点</a></td>
								    <td style="background: url(img/10.gif);"><a href="#" style="position: absolute;left:180px;top:6px;">各市小吃</a></td>
									<td style="background: url(img/10.gif);"><a href="#" style="position: absolute;left:312px;top:6px;">各地经济状况</a></td>
								</tr>
								
								<tr>
									<td style="position: absolute;bottom:20px;top:45px;"><img src="img/9.jpg" height: 319px;width:409px;></td>	
								</tr>	
								
								<tr >
									<div>		
								     <tr style="position: absolute;top:400px;">
									   	<td>会 员 名</td>
										<td><input type="text"></td>
								     </tr>
								   
								     <tr style="position: absolute;top:430px;">
										<td>密   码</td>
										    <td><input type="text"></td>
									</tr>
									
									 <tr style="position: absolute;top:465px;">
										<td><button>登  录</button></td>
										<td><button>注  册</button></td>
						             </tr>
						             
									 <tr style="position: absolute;top:500px;">
									    <td>
											 登陆身份<select>
											<option>网站管理员</option>
											<option>会长</option>
											<option>普通会员</option>
										    </select>
										</td>
								        <td><a href="#">忘记密码?</a></td>	
									 </tr>
									 
                                   </div> 
								</tr>	
								
							</tbody>
						</table>
		           </td>
		           
				</tr>
			</tbody>
		</table>
		
		<table>
			<tbody>
				<tr>
				<table style="left: 80px;height:50px;right: 100px; top: 560px;position: absolute;">
								<tbody>		
									<tr style="position: absolute;z-index: 100;">
										
										                <td width="92" height="27" align="center"  style="left: 1px;position: absolute;right: 100px;position: absolute;background: #EEEEEE;">
															<a href="Firstpage.html" class="nav" style="text-decoration: none;align-content: center;">三水攻略</a>
														</td>
														
														<td width="1" height="27" align="center" background="img/7.gif" style="left: 96px;position: absolute;right: 100px;position: absolute;background: #EEEEEE;" ></td>
														
														<td width="92" height="27" align="center" background="img/6.gif" style="left: 99px;position: absolute;right: 100px;position: absolute;background: #EEEEEE;">
														      <div class="show1" onmouseover="showid('downmenu11')" onmouseout="showid1('downmenu11')">
														      		<a href="#" class="add1" onmouseover="showid('downmenu11')">周边</a>
															           <div class="hidden" id="downmenu11" style="display:none;">
																					  <table width="%100" border="0" cellpadding="0" cellspacing="0">
															                             <tbody>	
																							<tr>
																							<td>
																								<a href="#"><strong>KTV</strong></a>
																							</td>
																						   </tr>
																						
																						<tr>
																							<td>
																								<a href="#"><strong>烧烤</strong></a>
																							</td>
																						</tr>
																						
																						<tr >
																							<td >
																								<a href="#"><strong>饭店</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>公交站</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>家乡风味</strong></a>
																							</td>
																						</tr>
																						
																					  </tbody>
														                          </table>
																	  </div>
																 </div>
									                    </td>
														
														<td width="1" height="27" align="center" style="left: 194px;position: absolute;right: 100px;position: absolute;background: #EEEEEE;"></td>
														
														<td width="92" height="27" align="center"  style="left: 197px;position: absolute;right: 100px;position: absolute;background: #EEEEEE;">
														      <div class="show1" onmouseover="showid('downmenu12')" onmouseout="showid1('downmenu12')">
														      		<a href="#" class="add1" onmouseover="showid('downmenu12')">新生攻略</a>
															           <div class="hidden" id="downmenu12" style="display:none;">
																					  <table width="%100" border="0" cellpadding="0" cellspacing="0">
															                             <tbody>	
																						<tr>
																							<td >
																								<a href="#"><strong>会所简介</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>会所章程</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>入会章程</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>会员名单</strong></a>
																							</td>
																						</tr>
																					  </tbody>
														                          </table>
																	  </div>
																 </div>
									                       </td>
									                       
									                    <td width="1" height="27" align="center" background="img/7.gif" style="left: 200px;position: absolute;right: 100px;position: absolute;background: #EEEEEE;" ></td>
										
										                <td width="92" height="27" align="center"  style="left:292px;position: absolute;right: 100px;position: absolute;background: #EEEEEE;">
														      <div class="show" onmouseover="showid('downmenu13')" onmouseout="showid1('downmenu13')" onmou>
														      		<a href="#" class="add" onmouseover="showid('downmenu13')">期末不挂科</a>
															           <div class="hidden" id="downmenu13" style="display:none;">
																					  <table width="%100" border="0" cellpadding="0" cellspacing="0">
															                             <tbody>	
																						<tr>
																							<td>
																								<a href="#"><strong>KTV</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td>
																								<a href="#"><strong>烧烤</strong></a>
																							</td>
																						</tr>
																						
																						<tr >
																							<td >
																								<a href="#"><strong>饭店</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>公交站</strong></a>
																							</td>
																						</tr>
																					     </tbody>
														                              </table>
																	  </div>
																 </div>
									                       </td>
						                                
						                                <td width="92" height="27" align="center"  style="left:387px;position: absolute;right: 100px;position: absolute;background: #EEEEEE;">
															<a href="Firstpage.html" class="nav" style="text-decoration: none;align-content: center;">我有疑问</a>
														</td>
									       
									</tr>  
									  
									<tr style="left:0px;height:50px;right: 100px; top:30px;position: absolute;z-index:99;">
									  
									    <td><img src="img/13.jpg"></td>
										<td><img src="img/14.jpg"></td>
										
										<td>
										<table>
											<tbody>
												<div>
													<tr>
														<td><img src="img/one.png" onclick="resend(1)"></td>
														<td><img src="img/eight.jpg" onclick="resend(2)"></td>
														<td><img src="img/three.jpg"  onclick="resend(3)"></td>
														<td><img src="img/two.png" onclick="resend(4)"></td>
													</tr>
													
													<tr>
														<td><img src="img/five.png" onclick="resend(5)"></td>
														<td><img src="img/nine.jpg" onclick="resend(6)"></td>
														<td><img src="img/eleven.jpg" onclick="resend(7)"></td>
														<td><img src="img/A.jpg" onclick="resend(8)"></td>
													</tr>
													
													<tr>
														<td><img src="img/four.png" onclick="resend(9)"></td>
														<td><img src="img/six.jpg" onclick="resend(10)"></td>
														<td><img src="img/ten.jpg" onclick="resend(11)"></td>
														<td><img src="img/B.jpg" onclick="resend(12)"></td>
													</tr>
													
													<tr>
														<td><img src="img/seven.png" onclick="resend(13)"></td>
														<td><img src="img/thirteen.jpg" onclick="resend(14)"></td>
														<td><img src="img/twelve.png" onclick="resend(15)"></td>
														<td><img src="img/C.jpg" onclick="resend(16)"></td>
													</tr>
													
												</div>
											</tbody>
										</table>	
										</td>
		
									</tr>
									
					                <tr>
					                  	<table style="left:80px;right:100px;top:850px;position: absolute;">
					                  		<tbody>
					                  			<tr>
					                  				<td>
							                  			<tr>
							                  			  <td style="font-size:50px;top:890px;";>大 家 一 起 来 互 动</td>
							                  			  <td style="font-size:50px;top:890px;">聚 会 通 知</td>
							                  			</tr>
							                  			
							                  	 		<tr>
							                  			  <td style="width: 960px;height:650px;background: url(img/15.jpg);"></td>
							                  			  <td></td>
							                  	        </tr>
						                  	       </td>
						                  	       
					                  	        </tr>
					                  		</tbody>
					                  	</table>
					                </tr>

									<table style="left:80px;height:50px;right: 100px; top:1580px;position: absolute;z-index: 100;">
											<tbody>
											  <tr>
													    <td width="92" height="27" align="center" background="img/6.gif" style="left: 1px;position: absolute;right: 100px;position: absolute;">
															<a href="Firstpage.html" class="nav" style="text-decoration: none;align-content: center;">本部攻略</a>
														</td>
														
														<td width="1" height="27" align="center" background="img/7.gif" style="left: 96px;position: absolute;right: 100px;position: absolute;" ></td>
														
														<td width="92" height="27" align="center" background="img/6.gif" style="left: 99px;position: absolute;right: 100px;position: absolute;">
														      <div class="show1" onmouseover="showid('downmenu15')" onmouseout="showid1('downmenu15')">
														      		<a href="#" class="add1" onmouseover="showid('downmenu15')">周边</a>
															           <div class="hidden" id="downmenu15" style="display:none;">
																					  <table width="%100" border="0" cellpadding="0" cellspacing="0">
															                             <tbody>	
																							<tr>
																						<td>
																									<a href="#"><strong>KTV</strong></a>
																								</td>
																						    </tr>
																						
																						<tr>
																							<td>
																								<a href="#"><strong>烧烤</strong></a>
																							</td>
																						</tr>
																						
																						<tr >
																							<td >
																								<a href="#"><strong>饭店</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>公交站</strong></a>
																							</td>
																						</tr>
																					  </tbody>
														                          </table>
																	  </div>
																 </div>
									                    </td>
					
							
														<td width="1" height="27" align="center" background="img/7.gif" style="left: 194px;position: absolute;right: 100px;position: absolute;" ></td>
														
														<td width="92" height="27" align="center" background="img/6.gif" style="left: 197px;position: absolute;right: 100px;position: absolute;">
														      <div class="show1" onmouseover="showid('downmenu16')" onmouseout="showid1('downmenu16')">
														      		<a href="#" class="add1" onmouseover="showid('downmenu16')">新生攻略</a>
															           <div class="hidden" id="downmenu16" style="display:none;">
																					  <table width="%100" border="0" cellpadding="0" cellspacing="0">
															                             <tbody>	
																						<tr>
																							<td >
																								<a href="#"><strong>会所简介</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>会所章程</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>入会章程</strong></a>
																							</td>
																						</tr>
																						
																						<tr>
																							<td >
																								<a href="#"><strong>会员名单</strong></a>
																							</td>
																						</tr>
																					  </tbody>
														                          </table>
																	  </div>
																 </div>
									                       </td>
									                       
									                    <td width="1" height="27" align="center" background="img/7.gif" style="left: 200px;position: absolute;right: 100px;position: absolute;" ></td>
										                
										                <td width="350" height="38" align="center" style="left: 964px;position: absolute;right: 100px;position: absolute;">求 职 攻 略</td>
												</tr>
											</tbody>
										</table>
							
								    <table  style="left:80px;height:50px;right: 100px; top: 1610px;position: absolute;z-index: 99;">
											<tbody>
												<tr>
													<td><img src="img/11.jpg"></td>
										            <td><img src="img/12.jpg"></td>
										            <td style="position: absolute;left:965px ;"><img src="img/E.gif"></td>
												</tr>
											</tbody>
							             </table>
								
									
							    </tbody>
				</table>
				
				 
				</tr>
		   </tbody>
		</table>
		
	</body>
</html>

　　

a{text-decoration: none;

}

.td a{
	font-size: 20px;
	
}

td{
	background: #EEEEEE;
	border-bottom:1px white solid;
}

#text1{
	position: absolute;
	font-size: 25px;
	text-shadow:2px 2px 0px greenyellow; 
}

p{
left: 20px;
top: 130px;
position: absolute;
}

　　运行部分截图

 

posted @ 2017-02-06 19:49  p微笑玲jx绝影  阅读(264)  评论(0)  编辑  收藏  举报