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后缀重写为html

    公司有时候要写一些小的项目,而用java搭建web的一个缺(特)陷(征)就是动态网页的后缀名.jsp.没办法啊,就是不能以.jsp结尾,原因有几个:隐藏服务端技术:吸引爬虫:对用户更友好:等等.如果全 ...

  2. HXY烧情侣（洛谷 2194）

    题目描述 众所周知,HXY已经加入了FFF团.现在她要开始喜(sang)闻(xin)乐(bing)见(kuang)地烧情侣了.这里有n座电影院,n对情侣分别在每座电影院里,然后电影院里都有汽油,但是要 ...

  3. Ubuntu 16.04禁用来宾账号（Guest User）

    1.打开50-ubuntu.conf sudo vim /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2.在最后加入 allow-guest=fal ...

  4. MVC WebApi 将返回值改为JSON格式

    新增一个类: public class BrowserJsonFormatter : JsonMediaTypeFormatter { public BrowserJsonFormatter() { ...

  5. ArcGIS 10 Engine DevelopKit 之安装与帮助;VBA,跨平台CPP,JAVA,ArcGIS Engine DevelopKit 10 的帮助如何打开

    你看到的这个文章来自于http://www.cnblogs.com/ayanmw ArcGIS Engine Developer Kit10 可以从VeryCD上下载到.其不需要破解,只需要你有一个已 ...

  6. C++中const引用的是对象的时候只能调用该对象的f()const方法

    const引用的作用: 1. 避免不必要的复制.  2. 限制不能修改对象. const 引用的是对象时只能访问该对象的const 函数  例: class A { public: void cons ...

  7. 新手学測试----Unit Test（单元測试）

    在程序猿做项目的过程中,每当完毕一个功能,首先自己须要对完毕的功能进行測试.我如今正在做的项目用的工具是VS2012.那么接下来,就说一说在VS2012中是怎样创建单元測试的. 怎样创建单元測试? 在 ...

  8. Unity学习笔记(4) --- Unity的界面排版:初识GUI

    GUI和GUILayout是Unity提供的UIKit.在使用GUI的Controls时都要求设置Rect參数.没办法做到自己主动排版,给适配带来难度.而GUILayout的设计就是为了弥补这个缺陷, ...

  9. Scroller的应用--滑屏实现

    1.Scroller源代码分析 以下是对Scroller源代码的分析,并附有源代码.例如以下: package android.widget; import android.content.Conte ...

  10. ocpm

    学习中心 | 腾讯社交广告营销平台 http://e.qq.com/ads/learning/data/optimization/case/035/