下午好,所有的帮助都会非常感激。
我似乎无法做到这一点,容器不像id那样工作。放入溢出后,我无法摆脱滚动条,我似乎无法摆脱滚动条!并集中我的个人资料。谢谢!!!一直在尝试溢出:隐藏;但是不能正确。
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html{
background:#d7d7d9;
}
*, html, body {
font-family: Open Sans;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
.profile-container{
margin: 0px auto 0;
width: 143px;
overflow: hidden;
}
.profile{
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background:white;
padding:4px;
overflow: hidden;
}
.avatar img{
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.follow button{
background:#268cde;
border-radius:3px;
border:0;
width:100%;
margin:0;
padding:7px 0;
color:white;
cursor: pointer;
}
.follow button i {
font-size: 10px;
color: #b9daf4;
}
.profile-list{
width:100%;
color: #767b7e;
font-size: 13px;
border-radius:0 0 3px 3px;
}
.profile-list li{
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform:perspective(250px) rotateX(-90deg);
-moz-transform:perspective(250px) rotateX(-90deg);
transform:perspective(250px) rotateX(-90deg);
background:white;
text-align:left;
padding:15px 10px;
cursor: pointer;
border-top:1px solid #d7d7d9;
}
.profile-list li i{
padding-right:3px;
}
.profile-list li.first{
-webkit-transition: .2s linear 1.5s;
-moz-transition: .2s linear 1.5s;
transition: .2s linear 1.5s;
}
.profile-list li.second{
-webkit-transition: .3s linear 1.2s;
-moz-transition: .3s linear 1.2s;
transition: .3s linear 1.2s;
}
.profile-list li.third{
-webkit-transition: .4s linear .8s;
-moz-transition: .4s linear .8s;
transition: .4s linear .8s;
}
.profile-list li.fourth{
-webkit-transition: .6s linear .2s;
-moz-transition: .6s linear .2s;
transition: .6s linear .2s;
}
.profile-container:hover .profile{
border-radius: 3px 3px 0 0;
-o-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
}
.profile-container:hover li{
-webkit-transform:perspective(250px) rotateX(0deg);
-moz-transform:perspective(250px) rotateX(0deg);
transform:perspective(250px) rotateX(0deg);
}
.profile-container:hover li.first{
-webkit-transition: .2s linear .2s;
-moz-transition: .2s linear .2s;
transition: .2s linear .2s;
}
.profile-container:hover li.second{
-webkit-transition: .3s linear .4s;
-moz-transition: .3s linear .4s;
transition: .3s linear .4s;
}
.profile-container:hover li.third{
-webkit-transition: .4s linear .7s;
-moz-transition: .4s linear .7s;
transition: .4s linear .7s;
}
.profile-container:hover li.fourth{
-webkit-transition: .6s linear 1.1s;
-moz-transition: .6s linear 1.1s;
transition: .6s linear 1.1s;
}
三江源