CSS——个人资料demo

1、上下外边距合并，选最大值。

2、两个input标签在编辑中如果换行了，在浏览器中显示的时候会自动增加一些距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 208px;
            height: 384px;
            border: 1px solid #cecece;
            margin: 10px auto;
        }
        .box .title{
            height: 25px;
            padding-left: 9px;
            background: #ECEDEE;
            font: 14px/25px 微软雅黑;
        }
        .box .pic{
            width: 180px;
            height: 180px;
            border: 1px solid #cecece;
            margin: 10px 0 11px 13px;
        }
        .box .blink{
            height: 27px;
            text-align: center;
        }
        .box .blink img{
            margin-left:10px;
        }
        .box .weibo{
            height: 33px;
            text-align: center;
            border-bottom: 1px dotted #D1D1D1;
            margin-bottom: 20px;
        }
        .box .weibo input{
            width: 68px;
            height: 23px;
            background: #EEEEF2 url("vb.jpg") no-repeat;
    
        }
        .box .friend{
            text-align: center;
        }
        .box .friend input{
            width: 67px;
            height: 21px;
            margin: 0 5px 5px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="title">
        个人资料
        </div>
        <div class="pic">
            <img src="1.jpg" alt="">
        </div>
        <div class="blink">
            V闪闪<img src="v.jpg" alt="">
        </div>
        <div class="weibo"><input type="button" value="微博"></div>
        <div class="friend">
            <input type="button" value="加好友"><input type="button" value="发纸条"><input type="button" value="加好友"><input type="button" value="加好友">
        </div>
    </div>
</body>
</html>

效果：

posted @ 2017-11-06 11:50  var_obj  阅读(247)  评论(0)    收藏  举报