这段CSS代码定义了页面的样式，让我逐个解释其功能：

1. `* {}`：通配符选择器，用于将页面中的所有元素设置统一的样式。这里将margins和paddings设置为0，以去除默认的边距。

2. `div img {}`：选择页面中所有div元素内的img元素，并设定其样式。这里设置img元素的宽度为视窗宽度的100%（即铺满整个屏幕宽度），高度为15视口高度。

3. `.head`：定义一个类选择器，用于对位于页头的元素进行样式设置。

4. `.head-left`和`.head-right`：这两个类选择器分别用于对页头左侧和右侧的元素进行样式设置。设置了宽度、高度、字体大小、颜色、显示方式、背景颜色和底部边框等样式。

5. `.acc`和`.acc div`：这两个选择器分别用于对显示账号的元素进行样式设置。

6. `.name`和`.name input`：用于对显示姓名的元素进行样式设置。

7. `.add`和`.add div`：用于对显示地址的元素进行样式设置。

8. `.code`和`.code input`：用于对显示邮编的元素进行样式设置。

9. `.names`和`.names div`：用于对显示名字的元素进行样式设置。

10. `.gender span`和`.gender input`：用于对显示性别的元素进行样式设置。

11. `.gan-left`和`.print`：用于对显示性格和印象的元素进行样式设置。

12. `#imgs`：对ID为`imgs`的元素进行样式设置。

13. `.footer`和`.footer-f div`：用于对页脚的元素进行样式设置。

14. `#alert`：对ID为`alert`的元素进行样式设置，包括宽度、高度、背景色、显示和定位等。

15. `.popup-container`、`.popup-container h2`、`.popup-container p`和`.popup-container button`：用于对弹出框的元素进行样式设置，包括定位、背景色、边框、内边距、字体颜色等。

这段代码定义了页面的布局和各种元素的样式，通过对不同的元素应用不同的类选择器或ID选择器，实现了个性化的样式设置。

* {margin: 0;padding: 0;
}div img {width: 100vw;height: 15vh;
}.head {width: 100%;display: flex;
}.head-left {width: 50%;height: 40px;font-size: 12px;color: rgb(162, 162, 162);display: flex;background-color: #ebebeb;justify-content: center;align-items: center;border-bottom: 1px solid rgb(235, 235, 235);
}.head-left div {/* margin-top: 8%; */
}.head-right {width: 50%;height: 40px;font-size: 12px;color: rgb(162, 162, 162);display: flex;justify-content: center;align-items: center;border-bottom: 1px solid rgb(235, 235, 235);
}.head-right div {font-size: 15px;justify-content: center;/* margin-top: 4%; */
}.acc {width: 100%;margin-top: 10%;
}.acc div {width: 50%;font-size: 15px;text-align: center;
}.name {width: 80%;margin-left: 5%;
}.name input {width: 100%;margin-top: 10%;border: none;margin-left: 10%;border-bottom: 1px solid #b1b1b1;outline: none;
}.add {width: 100%;margin-top: 10%;
}.add div {width: 50%;font-size: 15px;text-align: center;
}.code {width: 80%;margin-left: 5%;
}.code input {width: 100%;margin-top: 10%;border: none;margin-left: 10%;border-bottom: 1px solid #b1b1b1;outline: none;
}.names {width: 100%;
}.names div {width: 50%;margin-top: 10%;font-size: 15px;text-align: center;
}.names input {width: 80%;margin-top: 10%;border: none;margin-left: 13%;border-bottom: 1px solid #b1b1b1;outline: none;
}.gender {width: 100%;margin-top: 10%;display: flex;
}.gender span {font-size: 15px;
}.gender input {width: 15px;margin-left: 2%;border-radius: 100%;font-size: 10vh;
}.gan-left {width: 30%;margin-left: 10%;font-size: 15px;
}.print {display: flex;align-items: flex-end;width: 60%;margin-top: 10%;font-size: 15px;margin-left: 10%;
}#imgs {width: 15vw;height: 10vh;border-radius: 50%;display: flex;align-items: center;
}.footer {width: 85%;height: 50px;position: relative;margin-top: 1%;margin-left: 10%;justify-content: center;background-color: #66b1ff;
}.footer-f {width: 100%;position: absolute;}.footer-f div {color: #fff;font-size: 15px;margin-top: 5%;text-align: center;justify-content: center;
}#alert {width: 80%;height: 50px;margin-left: 8%;background-color: #66b1ff;display: none;text-align: center;padding: 10px;text-align: center;position: fixed;top: 100px;
}.popup-container {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;border: 1px solid #ccc;padding: 20px;z-index: 9999;
}.popup-container h2 {margin: 0;color: #333;
}.popup-container p {margin: 10px 0;color: #555;
}.popup-container button {padding: 5px 10px;background-color: #66b1ff;color: #fff;border: none;cursor: pointer;
}