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. 纯JSP实现简单微信开发后台

    %@ page import="java.net.*" % %@ page import="java.math.*" % %@ page import=&quo ...

  2. [24点计算器][C++版本]无聊拿去玩

    特性:数字数量.目标答案不限,当然数据大了会很慢... 基本可以去除所有本质相同的表达式...至少能等出结果的数据规模可以.. 安卓:http://yun.baidu.com/s/1slCGILn 程 ...

  3. java中static学习总结

    <<java编程思想>>: 1.static方法就是没有this的方法. 2.在static方法内部非静态方法. 3.在没有创建对象的前提下,可以通过类本身来调用static修 ...

  4. 杨辉三角的打印（Java）

    // //输入指定的行数,打印杨辉三角 // //每个数等于它上方两数之和. //每行数字左右对称,由1开始逐渐变大. //第n行的数字有n项. // // // //可从打印菱形的思想出发:???? ...

  5. 【Android】自己定义圆形ImageView(圆形头像 可指定大小)

    近期在仿手Q的UI,这里面常常要用到的就是圆形头像,看到 在android中画圆形图片的几种办法 这篇文章,了解了制作这样的头像的原理.只是里面提供的方法另一个不足的地方就是不能依据实际需求改变图片的 ...

  6. PayPal加密证书.pem的生成

    How do I create a public certificate for use with PayPal Encrypted Website Payments?   Before you ca ...

  7. Java中集合List，Map和Set的差别

    Java中集合List,Map和Set的差别 1.List和Set的父接口是Collection.而Map不是 2.List中的元素是有序的,能够反复的 3.Map是Key-Value映射关系,且Ke ...

  8. Unity3D开发——LeRunning的人物角色信息的显示

    ///////////////////////2015/08/22/////////////// //////////////////////by    xbw/////////////////// ...

  9. leetcode_Product of Array Except Self

    描写叙述: Given an array of n integers where n > 1, nums, return an array output such that output[i]  ...

  10. Js通用验证

    //-----------------------------------------------------js 验证封装 zhy2014-07-10------------------------ ...