渣渣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;
}
运行部分截图
成长就是将哭声调成静音的过程
