个人资料

作者: Yuann | 来源:发表于2017-06-21 19:43 被阅读0次

Section-9 项目实战之个人资料模块
Android项目实战系列—基于博学谷（五）个人资料
关于日亚海淘
2017年7月31日跟妆
个人资料
个人资料
个人资料
个人资料
个人资料
个人资料

原图

结构分析图

效果图

闪闪是文字,后面紧跟一个图片,然后是一个带有背景图片的button,这三个放到一个div里面,加一个bottom的border

下面四个是四个button,放到一个大的div里面文字居中,padding设置一个值即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
*{
    margin: 0;
    padding: 0;
}
.main-box{
    width: 208px;
    height: 384px;
    border: 1px solid red;
    margin: 10px auto;
}
.title{
    height: 25px;
    background-color: blanchedalmond;
    line-height: 25px;
    font-size: 14px;
    font-family: "微软雅黑";
    padding-left: 9px;
}
.photo{
    width: 180px;
    height: 180px;
    border: 1px solid yellow;
    margin: 10px auto;
}
.wb{
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px dotted yellow;
    padding-bottom: 10px;
}
.wb input{
    width: 68px;
    height: 23px;
    margin-top: 10px;
    background-image: url(images1/vb.jpg);
    background-repeat: no-repeat;
     background-color:#EEEEF2;
    
}
.friend{
    text-align: center;
    padding-top: 20px;
}
.friend input{
    width: 67px;
    height: 21px;
    outline-style: none;
    margin-bottom: 5px;
}
    </style>
    </head>
    <body>
        <div class="main-box">
            <div class="title">
                个人资料
            </div>
            <div class="photo">
                <img src="images1/1.jpg"/>
            </div>
            <div class="wb">
                闪闪
                <img src="images1/v.jpg"/>
                <br />
                <input type="button" name="" id="" value="微博" />
            </div>
            <div class="friend">
                <input type="button" name="" id="" value="加好友" />
                <input type="button" name="" id="" value="加好友" />
                <input type="button" name="" id="" value="加好友" />
                <input type="button" name="" id="" value="加好友" />
                
            </div>
        </div>
    </body>
</html>