渣渣HTML外加javascript做的第一个同乡会网页（好多功能都没写，只弄出来一个框架）
2017-02-06 19:49
465 查看
这里只是上传了主页代码，其它的子页不是很重要，网页成员之间的互动部分暂时还不能完成（技术太水）
<!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;
}运行部分截图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html中 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
- 一个javascript框架应有的功能
- HTML-利用CSS和JavaScript制作一个切换图片的网页
- 一个学习HTML Javascript等网页相关技术的好网站
- 一个javascript框架应有的功能
- JavaScript+Css+Html实现网页换皮肤功能
- javascript实现查看html网页放大图片功能
- 一个javascript框架应有的功能
- HTML-一个网页的头部的大概框架（完善ing）
- html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载 （播放功能限mp3文件）
- Python3实现抓取javascript动态生成的html网页功能示例
- Javascript 网页开发—体验式学习教程(1) html 和 CSS
- 一个网页上随鼠标移动显示时钟的javascript 代码
- 一个发邮件的类，带验证功能，可以发html内容，可以添加附件，并解决附件乱码问题。
- JavaScript] 让iframe框架网页在任何浏览器下自动伸缩
- 一个实现让整个网页变灰的javascript 函数
- 整理了一个带语法高亮显示，及到处html功能的richtextbox控件
- 一个使用监听器模式实现的J2ME网络编程框架,包括一个简单的登录功能实现(含源代码)
- 框架网页（javascript）
- 一个发邮件的类，带验证功能，可以发html内容，可以添加附件，并解决附件乱码问题。