一、项目描述
- 需求分析
这次设计的是个人网页网站(三页网站),这个网站可以帮助用户进行一些关于个人方面的自我介绍,比如说,这里面有一些自我信息的描述(班级、姓名等等)。另外这里还包括了对家乡的相关介绍(美食、风景),还有一些个人爱好、日常生活的描述。可以让人较为全面的了解自己,同时也使得自我的介绍更加的简洁生动,具体可观。
- 作品展示
首页面效果展示
个人兴趣爱好页
个人日常生活页
- CSS样式分析
display: flex;/* 弹性盒子*/
justify-content: space-between; /* 均匀排列每个元素首个元素放置于起点,末尾元素放置于终点 * /
align-items: center;/*元素位于容器的中心*/
letter-spacing: 4px;/*增加字符间的间距*/
display: inline-block;/*相当于浮动*/
overflow: hidden;溢出隐藏、清除浮动、解决外边距塌陷
object-fit: cover;图片保持原有尺寸比例。但部分内容可能被剪切。
transition: all 0.6s linear;设置图片变化,在0.6秒内全部变化
transform: scale(1.15);图片变化,变大1.15倍
border-radius: 50%;/*图片变成圆角边框*/
position: absolute;绝对定位
2.JavaScript效果
- 删除广告效果
(1)算法分析(实现过程描述)
运用onclick事件在关闭广告按钮上面,当鼠标点击关闭广告按钮时会运行JS代码,JS通过getElementById获取ID值,然后寻找到对应的节点,将节点删除。
(2)代码
function shanchu1() {
var shanchu = document.getElementById("nav2");
shanchu.parentNode.removeChild(shanchu);
}
function shanchu2() {
var shanchu = document.getElementById("nav3");
shanchu.parentNode.removeChild(shanchu);
}
- 图片替换效果
(1)算法分析(实现过程描述)
运用mouseOver和mouseOut事件作用于图片上,当鼠标移到图片上面的时候,就会触发mouseover事件,将图片换成需要展示的图片,然后当光标移开图片的时候,就会触发mouseout事件,再将图片换回原来的图片。
- 代码
function mouseOver1(){
document.getElementById('b1').src="img/图片1.jfif"
}
function mouseOut1(){
document.getElementById('b1').src="img/ban.jpg"
}
function mouseOver2(){
document.getElementById('b2').src="img/增城小吃.webp"
}
function mouseOut2(){
document.getElementById('b2').src="img/增城小吃2.webp"
}
function mouseOver3(){
document.getElementById('b3').src="img/增城小吃,正果云吞.webp"
}
function mouseOut3(){
document.getElementById('b3').src="img/增城小吃,正果云吞2.webp"
}
function mouseOver4(){
document.getElementById('b4').src="img/荔枝2.webp"
}
function mouseOut4(){
document.getElementById('b4').src="img/荔枝.webp"
}
function mouseOver5(){
document.getElementById('b5').src="img/客家豆腐.webp"
}
function mouseOut5(){
document.getElementById('b5').src="img/客家豆腐2.webp"
}
function mouseOver6(){
document.getElementById('b6').src="img/迟菜心2.webp"
}
function mouseOut6(){
document.getElementById('b6').src="img/迟菜心.webp"
}
function mouseOver7(){
document.getElementById('b7').src="img/白水寨.webp"
}
function mouseOut7(){
document.getElementById('b7').src="img/白水寨2.webp"
}
function mouseOver8(){
document.getElementById('b8').src="img/焦石岭2.jfif"
}
function mouseOut8(){
document.getElementById('b8').src="img/焦石岭.webp"
}
个人网页下载地址:https://download.csdn.net/download/Mrh_ge/89629958?spm=1001.2014.3001.5501