4.11

web作业：

实验项目名称：实验一  客户端脚本编程

 

一、实验目的

通过设计一个个人主页网站，学习常用的HTML标记，学习使用CSS对页面进行美化，掌握JavaScript的语法和常用的浏览器对象，初步学会使用Eclipse创建网站和编辑网页的方法。

二、实验内容和要求

1) 自己设计网页内容，做一张展示自己网页。要求展示的主要内容有：基本资料、学习经历、所得奖励、最新动态等。

2) 在网页的合适位置加入一些JavaScript特效，例如显示当前时间、图片定时切换、文本自动滚屏等。

3) 将网页源代码和浏览器截图写入实验报告并提交。

三、实验步骤

1) 打开Eclipse软件，新建一个web项目Lab01，并设置其部署程序为Tomcat。

2) 编写具有个人主页。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人主页</title>
</head>
<style type="text/css">
table 
{
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: #c5a5af;
    text-decoration: none;
    font-size: 12px;
}

a:hover {
    color: #ffb3bf;
    text-decoration: underline;
    font-size: 12px;
}

a:visited {
    color: #c5a5af;
    font-size: 12px;
}
/*整个tab层居中，宽度为600px*/
#tabDiv {
    width: 600px;
    margin: 1em auto;
    padding-bottom: 10px;
    border-right: #ffb3bf 1px solid;
    border-top: #ffb3bf 1px solid;
    border-left: #ffb3bf 1px solid;
    border-bottom: #ffb3bf 1px solid;
    background: #d8c2c9;
}
/*tab头的样式*/
#tabsHead {
    padding-left: 0px;
    height: 26px;
    background-color: #e8f7fc;
    font-size: 1em;
    margin: 1px 0px 0px;
    color: #ffb3bf;
    line-height: 26px;
}
/*已选tab头（超链接）的样式*/
.curtab {
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-right: #ffb3bf 1px solid;
    font-weight: bold;
    float: left;
    cursor: pointer;
    background: #ffffff;
}
/*未选tab头（超链接）的样式*/
.tabs {
    border-right:#ffb3bf 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;
}
li {
      border-bottom-style: solid;
      border-bottom-color: #EEE;
      border-bottom-width: thin;
      height: 25px;
    font-family: "宋体";
    font-size: 12pt;
}
</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;">杨佩个人主页</div>

    <div id="tabDiv" style="width: 1000px">

        <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="tabs2" class="tabs" href="javascript:showTab('tabs3','tabContent3')">最近动态</a>
        </div>

        <div id="tabContent1" style="display: block">
            <table style="border-width: 0; width: 100%">
                <tr>
                    <td rowspan="3" style="width: 300px; text-align: center"><img alt="杨佩" src="images/1.jpg"  style="width: 280px"/></td>
                    <td colspan="3" rowspan="3">
                        <table border="1" style="border-left-color: aqua; border-bottom-color: aqua; width: 701px; border-top-style: solid; border-top-color: aqua; border-right-style: solid; border-left-style: solid; height: 380px; border-right-color: aqua; border-bottom-style: solid">
                            <tr>
                                <td style="width: 50%">姓名：杨佩</td>
                                <td style="width: 50%">生日：2002.03.24</td>
                            </tr>
                            <tr>
                                <td style="width: 50%">国籍：中华人民共和国</td>
                                <td style="width: 50%">出生地：山西省大同市</td>
                            </tr>
                            <tr>
                                <td style="width: 50%; height: 29px">身高：160cm</td>
                                <td style="width: 50%; height: 29px">体重：52kg</td>
                            </tr>
                            <tr>
                                <td style="width: 50%">血型：A</td>
                                <td style="width: 50%">星座：白羊座</td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                <p>求学经历：
                                </p>
                                    <p>小学：浑源县北岳小学</p>
                                    <p>初中：浑源县示范中学</p>
                                    <p>高中：山西省浑源中学</p>
                                    <p>大学：石家庄铁道大学</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                </tr>
                <tr>
                </tr>
            </table>
        </div>
        <!--以下为获奖记录部分内容-->
        <div id="tabContent2" style="display: none">
            <ul>
                <li>*************</li>
                <li>'''''''''''''</li>
            </ul>
        </div>
        <div id="tabContent3" style="display: none">
        <img alt="" src="images/2.jpg" style="width: 490px" />
        <img alt="" src="images/3.jpg" style="width: 490px" />
        <img alt="" src="images/4.jpg" style="width: 490px" />
        <img alt="" src="images/6.jpg" style="width: 490px" />
        </div>
    </div>
    <hr />
    <div id="time" style="text-align: center; width: 100%; font-size: 12px; color: #333;">当前访问时间为：</div>
    <script>
        function showTime() {
            var date = new Date();

            // 年月日
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();

            // 时分秒
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();

            // 实时显示
            var element = document.getElementById('time');
            
            element.innerHTML = '<h1>' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        }

        setInterval('showTime()', 1000);
    </script>
    <div style="text-align: center; width: 100%; font-size: 12px; color: #333;">&copy;版权所有：石家庄铁道大学信息科学与技术学院</div>
</body>
</html>

 

posted @ 2022-04-11 22:46  _Pi  阅读(111)  评论(0)    收藏  举报