<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
background-color: #f0b6cf;
font-size: 14px;
background-image: url(../lx5/images/sinablogb.jpg);//背景图片
background-position: center top;
background-repeat: no-repeat;
}
#header {
width: 850px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-left: 100px;
color: #FFF;
padding-bottom: 45px;
overflow: hidden;
}
#header .nav {
margin-top: 100px;
}
#header a {
text-decoration: none;
color: #FFF;
}
#header a:hover {
text-decoration: underline;
color: #06C;
}
#header .nav li {
list-style-type: none;
float: left;
width: 100px;
border-right-width: 1px;//显示竖杠
border-right-style: dotted;
border-right-color: #FFF;
text-align: center;
line-height: 25px;
}
#header .nav .last {
border-right-style: none;
}
#header .nav ul {
padding-left: 0px;
}
#content{width:950px;margin:0px auto;}
#content .left img.img1 {
position: relative;
top: -40px;显示精英博主图片
left: 150px;
}
#content .left .txt {
font-weight: bold;
color: #999;
text-align: center;
margin-top: -40px;
}
#content .left{
width:210px;
float:left;
background-color: #fcf1f5;
border: 1px solid #cfa1ac;
}
#content .left .btns .btn1 {
background-image: url(../lx5/images/qing_bg.gif);
background-repeat: no-repeat;
height: 23px;
width: 74px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: left;
text-indent: 20px;
}
#content .left .btns .btn2 {
background-image: url(../lx5/images/weibo_bg.gif);
background-repeat: no-repeat;
height: 23px;
width: 74px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: left;
text-indent: 20px;
}
#content .main{width:730px;float:right}
#content .left .btns {
text-align: center;
line-height: 40px;
}
#content .left .header {
background-color: #f7dde8;//背景颜色
line-height: 25px;
font-weight: bold;
color: #900;//字体颜色
padding-left: 10px;
}
#content .left .img {
background-image: url(../lx5/images/idimg.jpg);
height: 180px;
background-repeat: no-repeat;
width: 180px;
border: 1px solid #999;
margin-left: 14px;
margin-top: 14px;
}
#content .left .left3 {
border-top:dotted 1px #999;
border-bottom:dotted 1px #999;
padding:10px;
}
#content .left .left3 .item{
padding:5px;text-align:center;
}
#content .left .left3 .item .btn{
background-image:url(images/btn_bg.gif);
width:69px;height:23px;
border:none;
}
#content .order{
margin-top:10px;
}
#content .order ul{
list-style-type:none;
padding-left:20px;
}
#content .order li{
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<div id="header">
<h1>多情浪子</h1>
<p><a href="#">http://blog.sina.com.cn/xwxbk</a> [<a href="#">订阅</a>] [<a href="#">手机订阅</a>]</p>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博文目录</a></li>
<li><a href="#">图片</a></li>
<li class="last"><a href="#">关于我</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="left">
<div class="header">个人资料</div>
<div class="img">
</div>
<img src="images/badge.png" class="img1"/>
<div class="txt">雨中竹</div>
<div class="btns">
<input type="button" value="Qing" class="btn1"/>
<input type="button" value="微博" class="btn2"/>
</div>
<div class="left3">
<div class="item">
<input type="button" value="加好友" class="btn"/> <input type="button" value="加好友" class="btn"/>
</div>
<div class="item">
<input type="button" value="加好友" class="btn"/> <input type="button" value="加好友" class="btn"/>
</div>
</div>
<div class="order">
<ul>
<li>博客等级： <img src="images/number.gif" /></li>
<li>博客积分：<span>4615</span></li>
<li>博客访问：<span>39,803,258</span></li>
<li>关注人气：<span>7,262</span></li>
</ul>
</div>
</div>
<div class="main">2
</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/tian114527375/p/4931959.html