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>

效果：

CSS——个人资料demo的更多相关文章

  1. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  2. Css Secret 案例Demo全套

    Css Secret 案例全套 github地址 案例地址 去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户 ...

  3. CSS圆环百分比DEMO

    <html> <head> <title>test</title><!--本DEMO参考http://www.cnblogs.com/jr1993 ...

  4. CSS设计资料

    CSS实现垂直居中的5种方法 网页阶级配色:http://tools.jb51.net/tools/peise.htm

  5. 常用CSS技巧资料收集

    1.重置浏览器的字体大小  重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...

  6. css的小demo

    demo1 一个高度随宽度变化的正方形   (缩小屏幕试试) 原理:margin和padding如果是用百分比设置,则是以父元素的宽度的百分比设置的. .Square{ display: inline ...

  7. CSS grid layout demo 网格布局实例

    直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-syst ...

  8. CSS——tab导航demo

    问题总结: 1.ul要比外套div宽度的值大一点 2.ul需要往左移动1px 3.外套的div设置overflow隐藏 解决抖动: 1.li宽度设置98px,padding左右值1px,hover之后 ...

  9. CSS——ul（demo）

    1.ul本身是块级元素,在实际运用中,我们不设定宽高的话,它的宽就是父元素的宽,它的高就是内容撑起来的高度. 2.在局部布局的时候,我们可以不用设定ul的宽度和高度,直接使用margin来巧妙布局. ...

随机推荐

  1. VS2017 +NetCore2.2.0+WebApi项目整合SwaggerUI 以及遇到的坑

    1.新建一个WebApi项目,这里不说了. 2.打开项目nuget管理控制台,在 https://www.nuget.org/ 搜索swagger的包:Swashbuckle.AspNetCore , ...

  2. Leet Code OJ 26. Remove Duplicates from Sorted Array [Difficulty: Easy]

    题目: Given a sorted array, remove the duplicates in place such that each element appear only once and ...

  3. Android利用Volley异步载入数据完整具体演示样例(二)

    MainActivity例如以下: package cc.y; import android.app.Activity; import android.content.Context; import ...

  4. hdu 2255奔小康赚大钱 KM算法模板

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=2255 一,KM算法:(借助这个题写一下个人对km的理解与km模板) KM算法主要是用来求解图的最优匹 ...

  5. Android 应用按返回键异常退出的问题

    开发过程中遇到按返回键异常退出的问题,log显示为空指针异常,进一步产看是由于onActivityResult得到的Intent为空. 按返回键复写代码例如以下: @Override public v ...

  6. EF中System.Data.Entity.Internal.AppConfig的类型初始值设定项引发异常

    使用Entity的时候遇到的一个错 问题出在项目的App.config中 解决: 1.configSections要写在最顶端 2. 当中的incariantName会变成incariantNodeN ...

  7. 2015南阳CCPC D - Pick The Sticks 背包DP.

    D - Pick The Sticks Description The story happened long long ago. One day, Cao Cao made a special or ...

  8. linux替换目录下所有文件中的某字符串

    linux替换目录下所有文件中的某字符串 比如,要将目录/modules下面所有文件中的zhangsan都修改成lisi,这样做: sed -i "s/zhangsan/lisi/g&quo ...

  9. oc82--成员变量使用copy修饰

    // // Person.h #import <Foundation/Foundation.h> typedef void (^myBlock)(); @interface Person ...

  10. StackExchange.Redis 使用资料

    在StackExchange.Redis中最重要的对象是ConnectionMultiplexer类, 它存在于StackExchange.redis命名空间中.这个类隐藏了Redis服务的操作细节, ...