我的介绍主页制做简单的(html css js)

2022年05月13日 阅读数:4
这篇文章主要向大家介绍我的介绍主页制做简单的(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制做。javascript

有一个div放4张图片:添加4个小盒子(div),使4张图片为4个小盒子的背景图css

js(记住的一些):

获取元素方式:经过获取它的css标签 找到元素并定义变量:例子
var button=document.getElementsByClassName(‘btu’);//获取全部具备btu的css元素
也能够
var button=document.querySelector(’.btu’);//得到的只有第一个元素html

<button class="button1 btu">我的介绍</button>
<button class="button2 btu">个人做品</button>

其它获取元素方式:
1.获取id属性
id=“btna”
var div=document.getElementById(‘btna’);
2.直接得到标签属性java

<button></button>

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

查看显示元素属性
console.dir(元素变量);
console.dir(tu);
console.dir(button);svg

注册事件,一点击变量指定的元素,触发事件
button[0].addEventListener(‘click’,function(){ 学习

}网站

tu[i].className=‘tu’;
//给这个元素加css属性(可是以前给的css属性消失了)
能够
tu[0].className=‘tu front’; 多添加一个属性(具备两个css属性)url

css代码:spa

.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>一、愿意吃苦受累,经过本身富有激情、积极主动的努力实现自身价值。做风优良、待人诚恳,人际关系良好,处事冷静稳健,能合理地统筹安排生活中的事务。具有较强的逻辑思惟和判断能力,对事情认真负责,有很强的责任心和团队意识;自信、乐观,具备必定的创新意识和创造能力。</p>

  <p>  二、我是一个认真工做,认真钻研,敢于创新的人。能熟练运用电脑,掌握必定的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>

效果图:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述