1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为网页换肤。
2、下图是我们要做出来的整体效果图，接下来我们就先搭建好它的框架。
3、在body标签里面第一步先放置一个id名为box的div将这个看做一个整体。然后在box里面放置五个span标签。
4、在span标签里面设置行内样式，分别设置好它们的颜色。做到这一步我们可以发现现在打开浏览器是什么都没有的那是因为我们还没有给span标签设置宽高，接下来我们就去style标签里面设置css样式。
5、我们先给这个div设置宽高，宽为352px，高为50px，背景颜色为白色，行高为50px然后设置左外边距用于设置它们的位置。
6、然后再给div的span标签设置宽高，但是设置到这里打开浏览器依旧没有 这是为什么呢。敬请期待下一步。
7、最最最重要的一步是设置display，因为span标签是行内标签 不能设置宽，所以我们要运用display设置它为行内块级元素。这就显示出来了。
8、做到这里我们还差几个字，就直接在div里面span标签前面加上这几个字就可以了。
9、现在我们可以看到下图这个颜色块和文字是没有居中对齐的，我们就需要设置一个样式让它们居中对齐。
10、只要关于位置这个东西，我们首先要想到的就是定位，在这里我使用相对定位。这不就对齐了。
11、我们要用到span标签 所以我们给每一个span标签设置一个独一无二的id名。
12、接下来我们就设置js部分，现在body标签里面放置一个script标签，在script标签里设置js内容。
13、要想设置js 首先要先获取到需要设置的标签，在这里我们通过id名来获取到span标签。
14、接下来我们就设置每一个span标签的点击事件。
15、然后在这个点击事件里面写上函数，这个函数就代表的给背景换颜色。
16、打开浏览器就会发现第一个点击事件已经成功了。
17、以此类推下面的几个span也是这样子做的，好了这个网页换肤就做好了。
