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. Hihocoder 1337 (splay)

    Problem 平衡树 SBT 题目大意 维护一个序列,支持两种操作. 操作一:插入一个数. 操作二:询问第k小的数. 解题分析 ~~刷刷水题,再熟悉一下splay的基本操作. ps:哇咔咔,有连续四 ...

  2. android从sdcard中读取bitmap

    String sdcard_path=Environment.getExternalStorageDirectory().getCanonicalPath(); String file_path=sd ...

  3. NYOJ5 Binary String Matching

    Binary String Matching 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Given two strings A and B, whose alp ...

  4. @Autowired中无法注入RestTemplate的问题

    1.在启动类中添加 @Beanpublic RestTemplate restTemplate(){ return new RestTemplate();} 即可解决无法注入RestTemplate的 ...

  5. 洛谷（cogs 1293/bzoj 1212） P2292 [HNOI2004]L语言

    1293. [HNOI2004] L语言 ★★★   输入文件:language.in   输出文件:language.out   简单对比时间限制:1 s   内存限制:162 MB [题目描述] ...

  6. oracle汉字占多少字节问题

    这个其实和Oracle的配置是相关的,用以下语句查询: select * from v$nls_parameters t where t.PARAMETER='NLS_CHARACTERSET'; 可 ...

  7. 相当精简的CentOS个人桌面版－－从CentOS6.3 32b-mini版開始(mini版过程略)

    利用网络实现相当精简的CentOS个人桌面版--从CentOS6.3 32位mini版開始(mini版过程略).升级后即是CENTOS6.5. 特别感谢163网易的镜像空间［http://mirror ...

  8. varnish代理server笔记

    varnish是一款开源的代理server软件.和Squid的差别是採用内存进行数据缓存. 速度很的快,并且不easy崩溃.可是奔溃之后全部数据都消失,导致全部请求全部发送至后台server端,这是其 ...

  9. Fragment中的setUserVisibleHint()方法调用

    使用Fragment的时候难免会遇到想在视图可见与不可见之中做些操作.此时一般会想到类似Activity中的onResume()和onPause()方法.Fragment中也确实有这两个方法,然而亲測 ...

  10. [Android]通过adb shell input上报命令模拟屏幕点击事件【转】

    本文转载自:http://blog.csdn.net/yuanzihui/article/details/52871652 常用的 input上报命令: input text 1234 实际向界面注入 ...