1. *{
    2.     margin: 0;
    3.     padding: 0;/*去除白边框*/
    4. }
    6. body{
    7.     height: 100%;/*设置宽度*/
    8.     background-color: #00CED1;/*设置主页面背景色*/
    9. }
    11. span{
    12.     overflow: hidden;/*超出的部分不显示*/
    13.     display: block;/*使其成为转化为块级标签*/
    14.     width: 16px;/*为其设置宽度和高度方便后面圆角色荷治*/
    15.     height: 16px;
    16.     margin: 30px auto 40px;/*设置位置居中显示*/
    17.     border-radius: 50%;/*圆角设置*/
    18.     background-color: white;/*设置背景色*/
    19. }
    21. .avr{
    22.     position: relative;/*设置相对定位*/
    23.     display: flex;/*弹性布局 能够将显示的部分随着窗口的大小改变大小*/
    24.     width: 50vw;/*vw相对单位，1vw等于可视窗口宽度的%1*/
    25.     margin: 0 auto 45px;
    26.     justify-content: space-between;/*与display: flex;配合使用 可以让元素再容器中左右均匀分布 最长用于移动端开发
    27.     内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。*/
    28. }
    30. .avr>a{
    31.     font-size: 15px;/*设置字体大小*/
    32.     padding: 10px;/*从盒子内部向外撑开*/
    33.     border:2px solid #5395b4;/*设置边框*/
    34.     color: #255d7e;
    35.     text-decoration: none;/*去除a标签原有的下划线*/
    36.     background-color: white;
    37.     z-index: 2;/*设置层级关系将等会用伪元素添加的线藏在下面*/
    38. }
    40. .avr::before{/*伪元素它是一个行级元素*/
    41.     content:"";/*有内容只是没添加  激活伪元素 必须得添加这个不然无法显示*/
    42.     position: absolute;/*添加绝对定位*/
    43.     top: 18px;
    44.     width: 98%;
    45.     height: 10px;
    46.     background-color: white;
    47.     display: block;/*使元素变成块级 这样设置宽高才有效果*/
    48.     z-index: 1;/*伪元素添加的这个藏在a标签的后面*/
    49. }
    51. .dpl{
    52.     position: relative;/*相对定位设置*/
    53.     overflow: hidden;/*影藏溢出清楚浮动*/
    54.     width: 50vw;
    55.     height: 75vh;/*相对单位，1vw等于可视窗口高度的1%*/
    56.     margin: 0 auto;/*居中显示*/
    57.     background-color: white;
    58.     box-shadow: 0 0 30px 0 rgba(8,1,3,0.3);/*设置盒阴影*/
    59. }
    61. .dpl>img{
    62.     position: absolute;/*绝对定位*/
    63.     top: 0;
    64.     right: 0;
    65.     bottom: 0;
    66.     left: 0;
    67.     width: 98%;
    68.     height: 98%;/*设置比div盒子小一点形成白色边框*/
    69.     margin: auto;/*居中显示*/
    70. }