今天用JavaScript做了web个人主页

用到了JavaScript+div+css

截图如下

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘柏的个人主页</title>
    <style type="text/css">
        /*设置超链接样式*/
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        a {
            color:black;
            text-decoration: none;
            font-size: 12px;
            /*font-weight: bolder;*/
        }

        a:hover {
            color: white;
            /*text-decoration: underline;*/
            /*font-size: 12px;*/
            background:rgb(60, 60, 60);
        }

        a:visited {
            /*color: #5086a5;*/
            font-size: 12px;
        }
        /*整个tab层居中，宽度为600px*/
        #tabDiv {
            width: 600px;
            margin: 1em auto;
            padding-bottom: 10px;
            border-right: #b2c9d3 1px solid;
            border-top: #b2c9d3 1px solid;
            border-left: #b2c9d3 1px solid;
            border-bottom: #b2c9d3 1px solid;
            background: #ffffff;
        }
        /*tab头的样式*/
        #tabsHead {
            padding-left: 0px;
            height: 35px;
            background-color:rgb(180, 180, 180);
            font-size: 1em;
            margin: 1px 0px 0px;
            /*color: #5086a5;*/
            line-height: 35px;
        }
        /*已选tab头（超链接）的样式*/
        .curtab {
            padding-top: 0px;
            padding-right: 10px;
            padding-bottom: 0px;
            padding-left: 10px;
            border-right: #b2c9d3 1px solid;
            font-weight: bold;
            float: left;
            cursor: pointer;
            background: #ffffff;
        }
        /*未选tab头（超链接）的样式*/
        .tabs {
            border-right: #c1d8e0 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: 45px;
            font-family: "宋体";
            font-size: 18pt;

        }
        h4{

            letter-spacing:20px;
            font-family:华文彩云;
            font-size:25px;
            color:#333333;
        }
        h4:hover{
            color:rgb(60, 179, 113);
        }
        td{
            letter-spacing: 3px;
            border:1px solid rgb(180, 180, 180);
        }
        #ziping{
            line-height:30px
        }
        #tabContent4 {


        }
        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            float: left;
            transition-duration: 0.4s;
        }

        .button a{

        }
        .button:hover{
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        }
        ol{

        }
        .content{
            margin-top: 50px;
            margin-left: 10px;
        }


    </style>

    <script type="text/javascript">
        //显示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 style="text-align: center;"><audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"src="周深%20-%20大鱼.mp3"></audio></div>


    <div id="tabDiv" style="width:1500px">
        <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>
        </div>
        <div id="tabContent1" style="display: block">
            <table style="border-width: 0; width: 100%;text-align:center" border="1" border-style="solid" border-color="#ffff">


                <h4 style="text-align: center ">个人信息</h4>

                <tr>
                    <td style="width:30%;height: 38px">姓名：刘柏</td>
                    <td style="width:30%;height: 38px">生日：2002-01-24</td>
<!--                        <td style="width:40%"><img src="C:\Users\bai\Desktop\image\001.png" alt=""></td>-->
                    <td style="width:30%;height: 38px">年龄：20</td>
                </tr>
                <tr>
                    <td style="width:30%;height: 38px">民族：汉族</td>
                    <td style="width:30%;height: 38px">政治面貌：团员</td>
                    <td style="width:30%;height: 38px">学历：本科</td>
                </tr>
                <tr>
                    <td style="width:30%;height: 38px">国籍：中华人民共和国</td>
                    <td style="width:30%;height: 38px">出生地：吉林省四平市</td>
                    <td style="width:30%;height: 38px">现居地：石家庄</td>
                </tr>
                <tr >
                    <td style="width:30%;height: 38px">身高：175cm</td>
                    <td style="width:30%;height: 38px">体重：60kg</td>
                    <td style="width:30%;height: 38px">婚姻状况：未婚</td>
                </tr>
                <tr >
                    <td style="width:30%;height: 38px">所在学校</td>
                    <td style="width:30%;height: 38px">学校网址：<a href="https://www.stdu.edu.cn/">https://www.stdu.edu.cn/</a></td>
                    <td style="width:30%;height: 38px">专业：软件工程</td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 38px">技能，特长或爱好</td>
                </tr>
                <tr>
                    <td style="width:30%;height: 38px">游泳</td>
                    <td style="width:30%;height: 38px">打游戏</td>
                    <td style="width:30%;height: 38px">个人博客：<a href="https://home.cnblogs.com/">https://home.cnblogs.com/</a></td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 38px">联系方式</td>
                </tr>
                <tr>
                    <td style="width:30%;height: 38px">Email:577277331@qq.com</td>
                    <td style="width:30%;height: 38px">联系电话：15665916652</td>
                    <td style="width:30%;height: 38px">通信地址：石家庄铁道大学</td>
                </tr>
                <tr>
                    <td id="ziping" colspan="3" rowspan="" style="height:150px">自我评价：作为一名石家庄铁道大学的软件工程学生，我所拥有的是年轻和知识。年轻虽然缺少经验，但是年轻也意味着热情和活力，我自信能凭自己的能力和学识在毕业以后的工作和生活中克服各种困难，不断实现自我的人生价值和追求的目标。面对当今激烈的人才竞争，我很清楚自己知识有限，但我更清楚我有着不甘落后的精神和不断学习、不断提高的愿望。</td>
                </tr>
            </table>

        </div>

        <div id="tabContent2" style="display: none">
            <ul>
                <li>儿时，父母在北京工作，我便跟着来到北京上学，在北京生活了六年</li>
                <li>随后，我回到了家乡，在爷爷奶奶的陪伴下，度过了美好的初中三年</li>
                <li>在不懈的努力下，我考进了市一中，高中的学习并不是很用心，临近高考时，还有些贪玩</li>
                <li>最终我考进了现在的石家庄铁道大学，很是开心</li>
                <li>我决定在大学的生活中，继续努力，可以通过自己的努力让自己以后获得一个好的生活，对父母尽尽孝心。</li>
            </ul>
        </div>
        <div id="tabContent3" style="display: none">
            <table>
                <tr>
                    <td width="50%" style="text-align: center">第二届王者荣耀全国大赛亚军</td>
                    <td width="50%"><img src="00.png" alt=""></td>
                </tr>
            </table>

        </div>

        <div id="tabContent4" style="display: none;" >
            <div class="bu">
                <ol><a href="left.html" target="iframe_a" class="button">我的日志</a></ol>
                <ol><a href="right.html" target="iframe_a" class="button">个人相册</a></ol>
            </div>
            <br>
            <div class="content">

                <iframe src="left.html" frameborder="0" name="iframe_a" width="100%" height="700px">
                </iframe>
            </div>
        </div>

    </div>

    <hr />
    <div style="text-align: center; width: 100%; font-size: 12px; color: #333;">&copy;版权所有：石家庄铁道大学信息科学与技术学院</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>right</title>
    <style type="text/css">
        li{
            list-style-type: none;
            letter-spacing: 3px;
        }

    </style>
</head>
<body>
        <div>
            <ul>
                <li>2021年1月14日</li>
                <li>今天是我的生日，在家人和朋友的陪伴下我度过了一个美好而幸福的一天</li>
                <li><img src="0.png" alt="">&nbsp;&nbsp;<img src="031.png" alt=""></li>
            </ul>
        </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <img src="011.gif" alt="">&nbsp;&nbsp;<br><img src="002.png" alt="">&nbsp;&nbsp;<img src="003.png" alt="">&nbsp;&nbsp;<img src="012.png" alt="">
    </div>

</body>
</html>