css 基本样式设置

css

font-size：0；使图片之间无间隙（注意需在父元素设置，且子元素需另行设置font-size否则父元素包含的字体大小都会变为最小）

box-sizing：border-box；解决padiding把边框撑大（即总边框大小不变内部元素缩小padding间隙变大）。

rgba（0，0，0，0.04）；前三个0为无色，最后一位调节透明度。

overflow：hidden；隐藏段落magin跨出整体区域.。

.card:nth-child(){  }；一组兄弟元素第n个元素。

background-position:50% 50%;图片垂直居中

background-size：cover最大包裹/contain最适合包裹

transform: rotate(45deg);将元素旋转45

<div class="icon-group">

                  <span class="icon">
                          <div class="rotate">关于我</div>
                   </span>
                   <span class="icon">
                          <div class="rotate">联系我</div>
                   </span>

                   <span class="icon">
                           <div class="rotate">记住我</div>

                    </span>

</div>

.section-blue .wrapper .icon-group .icon{

    display: inline-block;
    width: 50px;height: 50px;
    background-color: dimgrey;
    transform: rotate(45deg);
    margin:20px;
    font-size: 12px;
}
.icon-group{
    margin-top: 50px;
}

.icon-group .icon .rotate{
    transform: rotate(-45deg);
    margin: 10px;
}

javascript

对象的两种构造方法

<script>
         var friend = {
             'name':'小杨',
             'age':25,
             'edu':'本科',
             'mind':'一般',
             'asset':4000,
             'address':'本地',
             "hobby":function() {
                 return '游泳,弹钢琴,跳舞';
             },
             'chracter':function() {
                 return '孝顺,可爱,上进,体贴';
             }
         }
         
         console.log(friend);



         var friend = new Object();
         friend.name = "小杨",
         friend.age = "25";
         friend.edu = "本科";
         friend.mind = "一般";
         friend.asset = "4000";
         friend.address  = "本地";
         friend.hobby = function() {
             return '游泳'+',弹钢琴'+',跳舞';
         }
         friend.charcter = function() {
             return '孝顺'+',可爱'+',上进'+',体贴';
         }
         
         console.log(friend);

    </script>