HTML+CSS+JS简单的个人自我介绍，附代码和效果图（不喜勿喷，也希望大lao提建议，和哪些代码需要优化）

1.编写一个自我介绍的HTML页面，要求使用HTML文档常用的文本、图片、表格、行级、块级等标签，页面要求布局合理（图片未上传）

HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人介绍</title>
    <link rel="stylesheet" href="../css/myself.css">
    <script src="../js/myself.js"></script>
</head>
<body>
    <h1 id="header">
        自我介绍
    </h1>
    <div id="div-1">
    <div id="div-2">
    <p class="p_2">郑沧海</p>
    <ul class="nav_1">
        <li>习惯：半夜爱敲代码(安静)</li>
        <li>性格：开朗，积极向上，爱交朋友</li>
        <li>个人名言：键盘敲烂，月薪过万；键盘沾灰，垃圾一堆</li>
        <li>愿望：我的愿望就是希望班上所有人的flag实现</li>
    </ul>
    <div id="div_2_1">
        <h2>个人技能</h2>
        <ul class="nav_2">
           <li>① 熟悉HTML网页技术，能使用DIV+CSS快速布局。</li>
           <li>② 熟悉JavaScript。</li> 
           <li>③ 熟悉jQuery、Ajax技术实现对于客户端的脚本验证</li> 
           <li>④ 熟悉MySQL数据库，以及SQL语言。</li> 
        </ul>
        <div id="div_2_1_1">
            <ul class="nav_2">
                <li>⑤ 了解主流框架vue。</li>
                <li>⑥ 了解学习过bootstrap布局。</li> 
                <li>⑦ 了解webpack。</li> 
                <li>⑧ 了解java基础,php等语言。</li> 
             </ul>   
        </div>
    </div>
    </div>
    </audio>
    <div id="div-3">
    <p class="p_3">奋斗的165天</p>
    <p class="p_4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;接下来的日子希望和同学们一起好好努力的奋斗这五个半月的时间，
    不管怎么样努力本身就是一件会让人觉得心安理得的事,如果成功了会心安理得地享受自己获得的一切,
    即使失败了也能心安理得地放下然后继续前行。希望同学们快快乐乐的渡过这段时间，享受着敲代码带来的快乐。最后祝愿同学们步步高升，毕业后找到一份适合自己的工作。一起加油！！！加油！！！加油！！！</p>
    </div>
    </div>
    <div id="div-4">
    <div id="div-5"><h2 class="h_2">兴趣爱好(来自武功山 )</h2>
    <br>
    <p class="p_1">日常爱好：爬山 游泳 摄影 打篮球 羽毛球等
    <br>    
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下面的照片就是最近爬过的江西省萍乡市的武功山，最美不过的就是日出了，当时也被遇到了<q>百年难见</q>的<strong><font color="red">云海</font></strong>。此时太阳从云朵中探出头来，阳光洒在云海上，金黄一片，十分壮观。萍乡武功山景区的核心部分平均海拔在一千米以上，由于景区周边多是山谷和小盆地，大雨过后，天气转晴，再遇上<strong><font color="red">云海</font></strong>便会在这里出现。
    </p>
    </div>
    <br>
    <h2>下面图片&nbsp;&nbsp;欢迎欣赏</h2>
    <br>
    <img class="img_fj" src="../img/1.jpg" alt="武功山">
    <button id="btn_prev">上一张</button>
    <button id="btn_next">下一张</button>
    </div>
</body>
</html>

CSS部分:

*{
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}
body{
    background-image: url(../img/zhuye.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
}
#div-1{
    width: 850px;
    height: 617px;
    padding: 10px;
    margin: 10px auto;
    text-align: center;
    position: absolute;
    left: 10px;
    top: 70px;
    background: rgba(119, 117, 117, 0.4);
}
#div-2{
    width: 850px;
    height: 410px;
    background: rgba(179, 33, 33, 0.4);
}
#div_2_1{
        position: relative;
        width: 850px;
        height: 150px;
        background: rgba(226, 175, 206, 0.4);
    
}
#div_2_1_1{
    position: absolute;
    top: 30px;
    right: 0px;
    width: 420px;
    height: 110px;
    
}
#div-3{
    width: 850px;
    height: 177px;
    background: rgba(12, 219, 209, 0.4);
    position:relative;
    top: 40px;
}
#header{
    text-align: center;
    margin-top: 30px;
    color:aqua;
}
#div-4{
    width: 600px;
    padding: 10px;
    margin: 10px auto;
    text-align: center;
    position: absolute;
    right: 5px;
    top: 70px;
    background: rgba(119, 117, 117, 0.4);
    
}
#btn_prev{
    width: 80px;
    height: 40px;
    background-color: #286cb9;
    border-radius: 12px;
    margin-right: 100px;
}
#btn_next{
    width: 80px;
    height: 40px;
    background-color: #d14646;
    border-radius: 12px;
}
.img_fj{
    width: 600px;
    height: 300px;
}
.h_2{
    color: yellow;
    text-align: center;
}
#div-5{
    width: 600px;
    height: 200px;
    text-align: left;
    background: rgba(196, 153, 192, 0.781);
}
.p_1{
    font-size: 18px;
    color:black;
}
.p_2{
    font-size: 30px;
    color:rgba(235, 15, 217, 0.774);
}
.p_3{
    font-size: 30px;
    color:rgba(67, 22, 190, 0.774);
}
.p_4{
    font-size: 20px;
    color:rgba(8, 25, 97, 0.774);
}
.nav_1 li{
   list-style-type: none;
   font-size: 20px;
   padding: 10px 0 15px 0;
}
.nav_2 li{
    list-style-type: none;
    font-size: 15px;
    width: 420px;
    padding: 4px 2px 4px 0;
    text-align: left;
    color: black;
 }
 ul.nav_1 li:hover {
     background-color: rgb(228, 192, 75);
 }
 ul.nav_2 li:hover {
    background-color: rgb(80, 64, 72);
}

js部分：

     window.onload = function(){
        var prev = document.getElementById("btn_prev");
        var next = document.getElementById("btn_next");
        var img = document.getElementsByTagName("img");
        var img = document.getElementsByTagName("img")[0];
        var index = 0;
        var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
        prev.onclick = function(){
            index--;
            if(index == -1){
                index = 4;
            }
            img.src = imgArr[index];
        
        }
        next.onclick = function(){
            index++;
            if(index == imgArr.length){
                index = 0;
            }
            img.src = imgArr[index];
        
        } 
    }

显示效果：

图片效果需要自己创建一个img文件把图片放进去。注意图片的命名，img文件的位置，很多人因为路径错误显示不出来。

标签： javascript html css

本文转载自: https://blog.csdn.net/IT_Tea/article/details/123440585
版权归原作者 IT_Tea 所有，如有侵权，请联系我们删除。

HTML+CSS+JS简单的个人自我介绍，附代码和效果图（不喜勿喷，也希望大lao提建议，和哪些代码需要优化）

发表评论

“HTML+CSS+JS简单的个人自我介绍，附代码和效果图（不喜勿喷，也希望大lao提建议，和哪些代码需要优化）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航