博文尚美小圆点变化

此时小圆点在下面中间的位置
此时的CSS代码如下

这是圆点在右方的时候

此时小圆点位于左上角
且将小圆点变为灰色


Css中设置居中显示定位法：position：absolute如果子控件有定义宽和高的话可以使用定位法。注：margin-top和margin-left的值均为高和宽的一半。margin：auto法这个也可以是定位法。必须子空间设置宽的值否则没有效果。margin：auto；是水平垂直都居中margin：auto 0；是水平居中margin：0 auto；是垂直居中3．display：table-cell法主要针对多行文字内容的垂直居中对齐。text-align：center设置了文字的水平居中对齐vertical-align：middle设置的是垂直居中对齐4．transform：translate（x,y）法当子控件没有设置宽和高值可以使用这个方法实现5．before, after伪元素法也是让子控件元素垂直居中，如想水平居中可配合其他几种方法完成。如给子空间元素设置：margin：0 auto；6.Flex布局法要垂直居中的元c素无需设置宽和高的值。
下面为CSS代码注释可以方便学习

padding: 0;/*内边距*/   
 margin: 0;/*外边距*/
 list-style: none;/*清除默认的小圆点*/
 text-decoration: none;/*去掉下划线*/
 color: inherit;/*强制其继承父类颜色属性*/
 display: block;/*快捷元素*/
 /*左浮动的简写*/    float: left;
 .clearfix::after{/*清除浮动伪元素*/
 content: "";/*伪元素中必须添加的内容*/    
 display: block;/*把伪元素设计成快捷元素*/   
  visibility: hidden; /*visibility 属性规定元素是否可见（会占据空间），display不会占据空间*/  
    height: 0;/*高度为0*/   
     clear: both;/*清除浮动*/
     width: 1090px;/*页面总宽度*/    
     margin: 0 auto;/*auto让其居中*/
     header{/*对应HTML11行头部样式*/   
      height: 60px;/*设置高度*/    
      padding-top: 20px;/*上面的内边距*/
      width: 167px;/*logo宽度*/ 
        height: 44px;/*logo高度（与图片大小一致）*/
        .header .nav > li{/*指向选择器 头部列表整个一起*/
        position: relative;/*添加相对定位，需要相对定位移动*/
        .banner .banner-list li{/*意思是找到banner文件夹上banner-list li这个标签*/
        border:2px solid #fff;/*添加边框 2像素 实心 白色*/
         text-align: center;/*服务范围字样那一整行样式居中*/
         .section-header-left::after,.section-header-right::after{    content: "";/*必须写*/
         padding: 60px 0 50px 0;/*让上下两个部分有一些距离*/
         background: #f8f8f8;/* 背景改成灰色 */
         .section2-content .list{/* 让图片从竖着变为横着 */
         border-radius: 100px;/* 圆角，不加是方的 */