如上图所示，在Dreamweaver中新建html、css、js文档各一个(注释:三个文档需放在同一文件夹中)在html中把css、js文档引用需注意css与js文档的引用位置，然后就在html文档中写基础代码先在body标签中创造一个div，也是最大的div，我给它的类名为“group”
然后在“group”中再给它一个div赋予一个ID还有一个按钮标签“button” 也在该标签中赋予一个ID，在div中再给它一个div，在新建的div中给它两个标签一个“h3”标签和一个“i”标签
也在该标签中赋予一个ID
这就是html样式写完后的效果，用浏览器打开在页面左上角
然后html的样式就写完了接下来写css的样式
先把默认的内外边距设置为0，“maigin”(外边距)“padding”(内边距)“*”代表的是所以的html样式“.”类选择器，选中类名为“header”然后设置给它一个遮罩层半透明；宽为屏幕的100%，高为1000个像素，给它一个固定定位，把调节定位的top、left设置为0像素并把这个样式隐藏；
然后选中类名“panel_head”给它宽700像素，内边距15像素，背景颜色为白色，给一个相对定位用top、left调节位置再给它5个像素的圆角
选中panel_head里面的“i”标签
导入一张图片，设置宽与高，刚好完全容纳那一张图片
设置绝对定位，调节其位置，再给它设置一个鼠标移入图形变化
这个时候用浏览器打开应该只是“再见”被隐藏起来了
最后改写js的样式了
写一个页面加载事件然后获取到在html中赋予的三个ID最后分别写出他们的点击事件写完后想要可以点击需要到文件夹中直接用浏览器打开加载进去只有左上角有一个按钮
点击一下会出来一个页面，背景为半透明，中间偏上的位置有白色的圆角矩形，圆角矩形中右边的“x”是我导入的图片不是样式，想要关闭背景为半透明的页面点击哪一张图片也就是哪一个“x”就行，然后就会返回刚加载的样子