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. 实用型的DJANGO ORM

    比较深入一点的内容,需要用时,用心看看. URL: https://www.sitepoint.com/doing-more-with-your-django-models/ https://www. ...

  2. [bzoj3809]Gty的二逼妹子序列_莫队_分块

    Gty的二逼妹子序列 bzoj-3809 题目大意:给定一个n个正整数的序列,m次询问.每次询问一个区间$l_i$到$r_i$中,权值在$a_i$到$b_i$之间的数有多少个. 注释:$1\le n\ ...

  3. [bzoj 1093][ZJOI2007]最大半联通子图（强联通缩点+DP）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1093 分析: 首先肯定是先把强联通全部缩成一个点,然后成了一个DAG 下面要知道一点: ...

  4. Hadoop2.0安装之非HA版

    主要步骤跟Hadoop1.0(1.0安装地址)一致,主要在配置这块有更改 安装 下载地址:http://archive.apache.org/dist/hadoop/core/hadoop-2.6.5 ...

  5. 5.配置globals文件(目标端）

            mgr进程是goldengate软件执行的主进程.是由这个进程控制其它进程的,比方extract,replicat进程等. 对于mgr进程的配置,将会在以下介绍. global文件我们 ...

  6. nginx + mysql + php-fpm 环境

    安装 Nginx 想在 CentOS 系统上安装 Nginx ,你得先去加入一个资源库.像这样: vim /etc/yum.repos.d/nginx.repo 使用 vim 命令去打开 /etc/y ...

  7. 2015：WPS笔试-Android开发岗位

    题目一共三道: 一:实现一个函数,能够推断两条直线的关系:平行.重合.垂直或相交. 二:实现一个函数.能够得到随意两个日期的相隔天数. 三:针对题目一或题目二,实现一个完整的单元測试. (笔试后在网上 ...

  8. swift 2.0 语法 常量变量

    import UIKit /*: 常量变量 * 常量: let * 变量: var 完整格式: * 修饰符(let/var) 常量/变量名称: 数据类型 */ let number: Int var ...

  9. MySQL 登录问题

    1.问题一:使用update mysql.user set password='root'改动密码后,不能登录 解决:操作过程例如以下. (1)关闭mysql(杀掉mysqld进程),然后使用命令: ...

  10. react State改变，页面却没有改变

    react 小白编程 做项目时遇到了个问题,无论我怎么查看我的action.reducer 还是 dispatch 函数,都没有发现有什么毛病.但是 debugger 的时候,state 改变了,页面 ...