個人介紹主頁制作簡單的（html css js）

提出問題：

1. 4個按鈕，4個div，4個按鈕控制控制div切換？（位置合適）
2. 有一個div放4張圖片？
3. 制作個留言區？

解決問題：

4個div用position absolute； 使重疊一起（共同屬性）
之后用z-index=1，使重疊位于上面（想讓哪個div出現在最上層，
就加css屬性z-index=1，其它的沒有這個屬性）通過javascript制作，

有一個div放4張圖片：添加4個小盒子（div），使4張圖片為4個小盒子的背景圖

js（記住的一些）:

獲取元素方式：通過獲取它的css標簽 找到元素并定義變數：例子
var button=document.getElementsByClassName(‘btu’);//獲取所有具有btu的css元素
也可以
var button=document.querySelector(’.btu’);//獲得的只有第一個元素

<button class="button1 btu">個人介紹</button>
<button class="button2 btu">我的作品</button>

其它獲取元素方式：
1.獲取id屬性
id=“btna”
var div=document.getElementById(‘btna’);
2.直接獲得標簽屬性

<button></button>

var but=document.querySelector(‘button’);

查看顯示元素屬性
console.dir(元素變數);
console.dir(tu);
console.dir(button);

注冊事件，一點擊變數指定的元素，觸發事件
button[0].addEventListener(‘click’,function(){

}

tu[i].className=‘tu’;
//給這個元素加css屬性（但是之前給的css屬性消失了）
可以
tu[0].className=‘tu front’; 多添加一個屬性（具有兩個css屬性）

css代碼：

.background{
position: relative;
width: 1920px;
height: 1080px;
background-image: url(../個人頁面制作/2052882.jpg);
background-size: 100% 70%;
background-repeat: no-repeat;

}


button{
position: absolute;
width: 200px;
height: 50px;
background-color: chartreuse;
left: 400px;
}
.button1{
top: 150px;
background-color: #4cc7a8;
}
.button2{
background-color: #efd70c;
    top: 230px;
}
.button3{
    background-color: #f010ce;
    top: 290px;
    
}
.button4{
background-color: #e5254e;
    top: 350px;
}

.tu{

position: absolute;
width: 700px;
height: 500px;
background-color:white;
right: 600px;

top: 150px;

}




.one1{
position: absolute;
width: 300px;
height: 200px;
background-color: blue;
left: 30px;

background-image: url(../個人頁面制作/2052461.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.one2{
background-image: url(../個人頁面制作/2052545.jpg);
    position: absolute;
width: 300px;
height: 200px;
background-color: blue;

left: 350px;
background-size: 100% 100%;
background-repeat: no-repeat;

}
.one3{
    background-image: url(../個人頁面制作/2052563.jpg);
    position: absolute;
width: 300px;
height: 200px;
background-color: blue;
left: 30px;
top: 280px;


background-size: 100% 100%;
background-repeat: no-repeat;


}
.one4{
background-image: url(../個人頁面制作/2052587.jpg);
    position: absolute;
width: 300px;
height: 200px;
background-color: blue;

left: 350px;
top: 280px;

background-size: 100% 100%;
background-repeat: no-repeat;

}



.two{

background-image: url(../個人頁面制作/2052182.jpg);
    position: absolute;
   left: 30px;
width: 626px;
height: 370px;
background-color: blue;
background-size: 100% 100%;
background-repeat: no-repeat;


}

input{
    width: 277px;
position: absolute;
left: 200px;


}
textarea{ width: 277px;
position: absolute;
left: 200px;}




.four1{
    height: 40px;
top: 60px;
}

.four2{
    height: 210px;
top: 120px;
}
.four3{
    width: 277px;
position: absolute;
bottom: 100px;
left: 200px;
height: 43px;
background-color: #121b37;
color: white;

}

.front{

    z-index: 1;
}

html代碼：

<div class="background">


<button class="button1 btu">個人介紹</button>
<button class="button2 btu">我的作品</button>
<button class="button3 btu">個人技巧</button>
<button class="button4 btu">在線留言</button>

<div class="three tu front">


<h3>我寫此信應聘貴司公招聘的經理助理職位， </h3>
<p>我很高興地在招聘網站得知你們的招聘廣告，并一直期望能有機會加盟貴司公</p>
<p>1、愿意吃苦受累，通過自己富有激情、積極主動的努力實作自身價值，作風優良、待人誠懇，人際關系良好，處事冷靜穩健，能合理地統籌安排生活中的事務，具備較強的邏輯思維和判斷能力，對事情認真負責，有很強的責任心和團隊意識；自信、樂觀，具有一定的創新意識和創造能力，</p>

  <p>  2、我是一個認真作業，認真鉆研，勇于創新的人，能熟練運用電腦，掌握一定的office辦公軟體，與老師與同學保持著緊密的關系，樂于幫助同學解決學習與生活上的麻煩，善于總結歸納，善于溝通，有良好的敬業作風和團隊合作精神，</p>
</div>
<div class=" tu  ">
<p>作品</p>

<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
<div class="one4"></div>





</div>
<div class=" tu">


<p>技能</p>
<p>拍出優美的照片</p>
<div class="two">



</div>



</div>

<div class=" tu">

<P>留言</P>
<input type="text" value="請輸入你的姓名" class="four1">
<textarea name="" id="" cols="30" rows="10" class="four2">輸入留言：</textarea>

<button class="four3">提交留言</button>


</div>




    </div>

var button=document.getElementsByClassName('btu');
var tu=document.getElementsByClassName('tu');
var i=0;



console.log(111);


console.dir(tu);
console.log(button);
button[0].addEventListener('click',function(){

for(var i=0;i<4;i++)
{

    tu[i].className='tu';
}

    tu[0].className='tu front';

})


button[1].addEventListener('click',function(){

for(var i=0;i<4;i++)
{

    tu[i].className='tu';
}

    tu[1].className='tu front';

})
button[2].addEventListener('click',function(){

for(var i=0;i<4;i++)
{

    tu[i].className='tu';
}

    tu[2].className='tu front';

})
button[3].addEventListener('click',function(){

for(var i=0;i<4;i++)
{

    tu[i].className='tu';
}

    tu[3].className='tu front';

})












    </script>

效果圖：