加载用户头像
要么是背景图片background:url()
要么是<img src="">
没有其他情况了，剩下的就是后台 *** 作，传值过来
这个很简单，用圆角就可以啦，我帮你写出来吧，看代码:
<html><head>
<style type="text/css">
div.icon
{
width:200px
height: 200px
display:block
position: relative
float:left
padding: 0px
margin: 10px
background: #e9e7e0
}
div.icon_head
{
width:150px
height: 150px
display:block
position: relative
float:left
padding: 0px
margin: 25px
background: #bde9df
border-radius:75px
-webkit-border-radius:75px
-moz-border-radius:75px
-o-border-radius:75px
-webkit-background-clip: padding
overflow:hidden
}
a.trans_name
{
width:150px
height: 150px
display:block
position: absolute
left: 0px
bottom: 0px
padding: 0px
margin: 0px
z-index:1
filter: Alpha(Opacity=0)
opacity:0
}
span.icon_translucent
{
width:150px
height: 60px
display:block
position: absolute
left: 0px
bottom: 0px
padding: 0px
margin: 0px
background: #000000
z-index:2
filter: Alpha(Opacity=50)
opacity:0.5
}
span.icon_name
{
width:150px
height: 60px
display:block
position: absolute
left: 0px
bottom: 0px
padding: 0px
margin: 0px
color: #ffffff
font-size: 16px
text-align: center
line-height: 40px
z-index:3
}
a.trans_name:hover
{
filter: Alpha(Opacity=100)
opacity:1
}
</style>
</head>
<body>
<div class="icon">
<div class="icon_head">
<img src="http://t3.qpic.cn/mblogpic/33b2836395e33a0a1dc8/160" width="150" height="150" />
<a class="trans_name">
<span class="icon_translucent"></span>
<span class="icon_name">隔城府窥红颜</span>
</a>
</div>
</div>
</body>
</html>
记得采纳，纯手写的，谢谢！！！！
这个挺简单的啊，要分析问题嘛，首先：
图片是圆的（当然设计师一般是不会给不一个圆的图片，并且后台上传的也是无法确定上传的就是圆的）所以使用一个盒子装起来，把盒子设置为圆的，然后后边是文字
主要是使用浮动来设置，就是头像用一个盒子，右边的内容用一个盒子，然后用float:left；把这两个盒子都浮动起来,父级要清除浮动
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>007</title>
<style type="text/css">
html,body{
margin:0
}
.fl{
float:left
}
.ovf{
overflow: hidden
}
.auto-img{
display: block
width:100%
}
.box{
width:100%
}
.box>div{
margin-left: 50px
margin-top: 50px
}
.box-tx{
width:50px
height:50px
border-radius: 50%
background-color: #f00
}
.box-texts{
}
</style>
</head>
<body>
<div class="box ovf">
<div class="fl box-tx">
<!-- <img class="auto-img" src="图片路径">-->
</div>
<div class="fl box-texts">
<div>
推荐码：sss55
</div>
<div>姓名：喵喵咪</div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）