~~~
<style>
*{margin: 0;padding: 0;}
.parent{
width: 300px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
text-align: center;
}
.oth_type_tit {
border-top: 1px solid #e0e0e0;
padding-top: 10px;
padding-bottom: 10px\9;
}
fieldset,
img {
border: 0;
}
.all-icon a{
width: 28px;
height: 28px;
display: inline-block;
border-radius: 50%;
border: 1px solid #ccc;
}
.all-icon :first-child{
background: #0288d1;
}
.all-icon :last-child{
background: #d32f2f;
}
.all-icon .qq,.all-icon .weibo{
display: inline-block;
width: 18px;
height: 18px;
margin-top: 5px;
background: url("images/icons_type.png");
}
.all-icon .qq{
background-position-x: -19px;
}
.all-icon .weibo{
background-position-x: -38px;
}
</style>
~~~
~~~
<body>
<div class="parent">
<fieldset class="oth_type_tit">
<legend align="center" class="oth_type_txt">其他方式登錄</legend>
</fieldset>
<div class="all-icon">
<a href="#">
<i class="qq"></i>
</a>
<a href="#">
<i class="weibo"></i>
</a>
</div>
</div>
</body>
~~~
