.profile{ width: 100%; border-bottom: 1px solid #e5e5e5; background: rgba(255,255,255,0.6); margin-bottom: 20px; padding-top: 24px; position: relative; height: 140px; } .profile .big-avatar{ float: left; border: 1px solid #BFBFBF; width: 100px; border-radius: 50px; margin-right: 32px; margin-left: 15px; } .profile .name{ font-size: 24px; display: inline-block; margin-right: 20px; } .profile .intro{ color: #969696; } .profile .btn-edit{ border: 1px solid #969696; border-radius: 4px; color: #969696; font-size: 12px; } .profile .btn-edit:hover{ border-color: #1DC78E; color: #1DC78E; } .tabs{ position: absolute; bottom: 0; margin-bottom: 0; } .tab-container{ padding-left: 100px; } .tabs li{ display: inline-block; padding: 12px 32px; } .tabs li.active{ border-bottom: 3px solid #1DC78E; } .tabs li.active a{ color: #1DC78E; } .tag-group{ list-style: none; padding-left: 50px; } .tag-group>li{ margin-bottom: 10px; border: 1px solid #969696; line-height: 28px; padding: 0 15px; border-radius: 15px; display: inline-block; margin-right: 20px; } .tag-group .tag{ color: #969696; } .tag-group>li.active, .tag-group>li:hover{ border: 1px solid #1dc78e; background: #1dc78e; } .tag-group>li.active .tag, .tag-group>li:hover .tag{ color: #fff; }