/*这个css文件放的是公用的样式*/
/*写样式的起手式，先去除浏览器的公共样式，并且设置border-box,避免元素盒子被内边距和边框撑大
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/*并集选择器*/
html,body{
    /*
        html是页面的最顶层元素，高度100%是相对父元素来说高度是100%（和父元素一样高）
        对于html标签来说，父元素就是浏览器窗口，浏览器窗口多高，html就多高
        body的父亲是html,设为100%意思是body和html一样高
        此时，body和html的高度都是和浏览器窗口一样高
        如果不设置高度，此时元素默认的高度取决于内部的内容
    */
    height:100%;
}
 
body{
    background-image:url(../image/背景图片.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
}
 
/*实现导航栏的样式*/
.nav{
    /*设置宽度和父元素一样宽*/
    /*对于块级元素来说，默认就是width:100%*/
    width:100%;
    height:50px;
    /*rgba中a是透明度*/
    background-color:rgba(212, 166, 16,0.3);
    color:white;
 
    /*导航栏里面的元素都是水平排列的，用弹性布局来设置*/
    display:flex;
    /*垂直方向子元素居中*/
    align-items:center;
}
 
 
/*设置导航栏里的logo*/
.nav img{
    width:40px;
    height:40px;
    margin-left:30px;/*logo标签左右都有间距*/
    margin-right:10px;
    border-radius:50%;/*设成圆的*/
}
 
.nav .spacer{
    width: 70%;
}
 
/*设置导航栏里的文字*/
.nav a{
    color:white;
    /*去掉下划线*/
    text-decoration:none;
    /*为了让这几个a标签不贴的那么紧，加个内边距
    此处用外边距也行，但是内边距更好，内边距也是元素的内容，可以增大用户点击的面积*/
    padding:0 10px;
}
 
 
/*编写页面主体样式*/
.container{
    /*设置主体部分宽度1000px*/
    width:1000px;
    /*高度能够填充整个页面,整个页面减去导航栏的50px*/
    height: calc(100% - 50px);
    /*水平居中*/
    margin:0 auto;
 
    
 
    /*弹性布局*/
    display:flex;
    align-items:center;
    justify-content:space-between;
 
}
 
.container-left{
 
    height:100%;
    width:200px;
 
    
}
 
.container-right{
    height:100%;
    /*此处留出了5px，产生一个缝*/
    width:795px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
 
    /*让这个元素自己带上滚动条*/
    overflow:auto;/*如果内容没有溢出，则无滚动条，如果溢出，则自动加上滚动条*/
    
    
}
 
/*左侧用户信息*/
.card{
    background-color: rgba(255,255,255,0.8);
    border-radius:10px;
    /*设置内边距，让内容与边框之间留点距离*/
    padding:30px;
 
}
/*用户头像*/
.card img{
    width:140px;
    height:140px;
    border-radius:50%;
}
 
/*用户名字*/
.card h3{
    /*文字居中*/
    text-align:center;
    /*让文字和上下有边距*/
    /*使用内边距或外边距均可*/
    padding:10px;
}
 
 
/*用户的github链接*/
.card a{
    /*a标签是行内元素，设置居中没有用*/
    text-align:center;
    /*为了居中，要将其设置成块级元素*/
    display:block;
    color:#777;
    text-decoration:none;
    padding:10px;
}
 
 
.card .counter{
    /*为了让里面的元素水平排列，使用弹性布局*/
    display:flex;
    justify-content:space-around;
    /*让元素之间产生距离*/
    padding:5px;
}