HTML网页设计大作业-个人网页（三页）课程设计

一、项目描述

1. 需求分析

这次设计的是个人网页网站（三页网站），这个网站可以帮助用户进行一些关于个人方面的自我介绍，比如说，这里面有一些自我信息的描述（班级、姓名等等）。另外这里还包括了对家乡的相关介绍（美食、风景），还有一些个人爱好、日常生活的描述。可以让人较为全面的了解自己，同时也使得自我的介绍更加的简洁生动，具体可观。

1. 作品展示

首页面效果展示

 

 个人兴趣爱好页

 个人日常生活页

1. 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. 删除广告效果

（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. 图片替换效果

（1）算法分析（实现过程描述）

运用mouseOver和mouseOut事件作用于图片上，当鼠标移到图片上面的时候，就会触发mouseover事件，将图片换成需要展示的图片，然后当光标移开图片的时候，就会触发mouseout事件，再将图片换回原来的图片。

1. 代码

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