web实验一代码
个人简历代码：个人主页
<!DOCTYPE html> <html> <head> <title>个人主页</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body{ background:black; } /*设置超链接样式*/ table { border-collapse: collapse; border-spacing: 0; border-radius:10px; color:#DDA0DD; margin:0 auto; } a { color: #DDA0DD; text-decoration: none; font-size: 12px; } a:hover { color: #DDA0DD; text-decoration: underline; font-size: 12px; } a:visited { color: #DDA0DD; font-size: 12px; } .touxiang{ padding-left:0px; width:100%; height:auto; float:left; margin-left:30px; margin-top:20px; text-align:center; } /*整个tab层居中，宽度为600px*/ #tabDiv { width:100%; margin: 1em auto; padding-bottom: 10px; background:black; } /*tab头的样式*/ #tabsHead { padding-left: 0px; height: 30px; background-color: black; font-size: 1em; margin: 1px 0px 0px; color: pink; line-height: 35px; border-radius:10px; } /*已选tab头（超链接）的样式*/ .curtab { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; border-right: #DDA0DD 1px solid; font-weight: bold; float: left; cursor: pointer; background: black; } /*未选tab头（超链接）的样式*/ .tabs { border-right: #FFD0FF 1px solid; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; font-weight: normal; float: left; cursor: pointer; } p { font-size: 12pt; text-indent: 2em; color:#DDA0DD; } li { border-bottom-style: solid; border-bottom-color: #DDA0DD; border-bottom-width: thin; height: 25px; font-family:"幼圆"; font-size: 12pt; text-decoration:none; color:#DDA0DD; } </style> <script type="text/jscript"> //显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID） function showTab(tabHeadId,tabContentId) { //tab层 var tabDiv = document.getElementById("tabDiv"); //将tab层中所有的内容层设为不可见 //遍历tab层下的所有子节点 var taContents = tabDiv.childNodes; for(i=0; i<taContents.length; i++) { //将所有内容层都设为不可见 if(taContents[i].id!=null && taContents[i].id != 'tabsHead') { taContents[i].style.display = 'none'; } } //将要显示的层设为可见 document.getElementById(tabContentId).style.display = 'block'; //遍历tab头中所有的超链接 var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a'); for(i=0; i<tabHeads.length; i++) { //将超链接的样式设为未选的tab头样式 tabHeads[i].className='tabs'; } //将当前超链接的样式设为已选tab头样式 document.getElementById(tabHeadId).className='curtab'; document.getElementById(tabHeadId).blur(); } </script> </head> <body> <div style="width: 100%; font-family: 黑体; text-align: center; font-size: 20pt; color:#DDA0DD">个人简历</div> <div id="tabDiv" style="width: 100%"> <div id="tabsHead"> <a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">基本资料</a> <a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">专业技能</a> <a id="tabs3" class="tabs" href="javascript:showTab('tabs3','tabContent3')">工作经历</a> <a id="tabs4" class="tabs" href="javascript:showTab('tabs4','tabContent4')">其它经历</a> <a id="tabs5" class="tabs" href="javascript:showTab('tabs5','tabContent5')">联系方式</a> </div> <div id="tabContent1" style="display: block"> <div class="touxiang"> <img alt="王鹏霄" src="images/jianjie.jpg" style="width: 280px" /> <table border="2" style="width: 500px; height:260px;border-color:pink; border-style:solid;"> <tr> <td style="width: 50%">姓名：王鹏霄</td> <td style="width: 50%">生日：2001.7.16</td> </tr> <tr> <td style="width: 50%">国籍：中华人民共和国</td> <td style="width: 50%">出生地：石家庄市鹿泉区</td> </tr> <tr> <td style="width: 50%; height: 29px">身高：168cm</td> <td style="width: 50%; height: 29px">体重：65kg</td> </tr> <tr> <td style="width: 50%">血型：B</td> <td style="width: 50%">星座：巨蟹座</td> </tr> </table> </div> </div> <!--专业技能--> <div id="tabContent2" style="display: none"> <div class="touxiang"> <img alt="专业技能" src="images/zhuanye.gif" style="width: 280px" /> <p>善于Ctrlcv</p> <p>c语言不太行</p> <p>java不太会</p> <p>Python被克制</p> <p>C#被压制</p> <p>但是</p> <p>非常善于摆烂</p> </div> </div> <!--工作经历--> <div id="tabContent3" style="display: none"> <div class="touxiang"> <img alt="工作经历" src="images/buxiban.jpg" style="width: 280px" /> <p>教了三个假期的补习班</p> <p>第一个暑假只有三个学生</p> <p>后来慢慢有家长来主动询问</p> <p>第二个暑假开始做家教</p> <p>今年寒假有家长帮忙介绍</p> <p>很多孩子想来都没有时间了</p> <p>工作使我快乐</p> </div> </div> <!--其它经历--> <div id="tabContent4" style="display: none"> <div class="touxiang"> <img alt="其他经历" src="images/tanjianci.jpg" style="width: 280px" /> <p>我真的是一个细心的人</p> <p>上个课耳机落到了教室里</p> <p>洗个澡水卡丢到了路上</p> <p>洗个衣服洗衣液被人拿了</p> <p>没锁车子锁子在车筐里被人拿</p> <p>真的是幸运的一个星期呢</p> </div> </div> <!--联系方式--> <div id="tabContent5" style="display: none"> <div class="touxiang"> <img alt="联系方式" src="images/lianxi.jpg" style="width: 280px" /> <ul> <li>手机：17326987898</li> <li>微信：17326987898</li> <li>QQ：1904830966</li> <li>邮箱：1904830966@qq.com</li> </ul> </div> </div> </div> <hr /> <div style="text-align: center; width: 100%; font-size: 12px; color: #333;">©版权所有：石家庄铁道大学信息科学与技术学院</div> </body> </html>
