个人介绍主页制作简单的(html css js)
个人主页网站设计
- 提出问题:
- 解决问题:
- js(记住的一些):
- 效果图:
提出问题:
- 4个按钮,4个div,4个按钮控制控制div切换?(位置合适)
- 有一个div放4张图片?
- 制作个留言区?
解决问题:
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>
效果图:
个人介绍主页制作简单的(html css js)相关推荐
- html css制作计算器,使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: /* 主体 */ .counter{ width: 396px; height: 486px; backg ...
- 简单使用html+css+js随机获取一注双色球号码
随机抽取双色球号码 双色球规则: 双色球 投注区分为红色球号码区和蓝色球号码区,每注投注号码由6个红色球号码和1个蓝色球号码组成,红色球号码从1到33中选择,蓝色球号码从1到16中选择. 使用html ...
- 期末前端web大作业——我的家乡甘肃介绍网页制作源码HTML+CSS+JavaScript
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家乡旅游景点 | 家乡民生变化 | 介绍自己的家乡 | 我的家 ...
- 期末前端web大作业——我的家乡陕西介绍网页制作源码HTML+CSS+JavaScript
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 学生DW网页设计作业成品 简单的学校网站制作与实现 HTML+CSS+JS
- 企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证
引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, ...
- 企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型 引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...
- 企业网站前端制作实战教程 JQuery CSS JS HTML 项目需求分析与准备工作
1思维导图 2登录界面 3管理界面
- 一文带你了解web前端是如何制作表白网站(HTML+CSS+JS)
❤ 精彩专栏推荐
最新文章
- react的bind(this)
- Quest Central for DataBase 5.0.1,6.1 (软件+注册)
- Leaflet中添加的不同图层样式图标
- Flutter嵌套深?扩展函数了解一下
- springboot jwt token前后端分离_7个开源的 Spring Boot 前后端分离项目,一定要收藏!...
- Java异常类复习总结
- 面向对象 —— 对类(class)的理解
- 乌鲁木齐大雾弥漫 局地能见度不足200米
- 计算电磁学中的矩量法及其求解过程介绍
- 什么是网络操作系统?网络操作系统具有哪些基本功能?
- Apache虚拟主机配置详细教程
- 微软快捷键截图_所有最好的Microsoft Excel键盘快捷键
- vivo手机怎么安装Android10,首批升级Android 10 Bate教程!vivo手机3步搞定
- vue3实现表格单元格可编辑
- ms721调试总结及光电传感器板测试总结
- scratch节假日课程:元旦贺卡的制作
- Word在方框中插入对勾和×
- 那些在一个公司死磕了5-10年的人,最后都怎么样了?那些在一个公司死磕了5-10年的人,最后都怎么样了?...
- FPGA进阶(2):基于I2C协议的EEPROM驱动控制
- 使用dfs求解修道士和野人问题