CSS——个人资料demo
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的更多相关文章
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- Css Secret 案例Demo全套
Css Secret 案例全套 github地址 案例地址 去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户 ...
- CSS圆环百分比DEMO
<html> <head> <title>test</title><!--本DEMO参考http://www.cnblogs.com/jr1993 ...
- CSS设计资料
CSS实现垂直居中的5种方法 网页阶级配色:http://tools.jb51.net/tools/peise.htm
- 常用CSS技巧资料收集
1.重置浏览器的字体大小 重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...
- css的小demo
demo1 一个高度随宽度变化的正方形 (缩小屏幕试试) 原理:margin和padding如果是用百分比设置,则是以父元素的宽度的百分比设置的. .Square{ display: inline ...
- CSS grid layout demo 网格布局实例
直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-syst ...
- CSS——tab导航demo
问题总结: 1.ul要比外套div宽度的值大一点 2.ul需要往左移动1px 3.外套的div设置overflow隐藏 解决抖动: 1.li宽度设置98px,padding左右值1px,hover之后 ...
- CSS——ul（demo）
1.ul本身是块级元素,在实际运用中,我们不设定宽高的话,它的宽就是父元素的宽,它的高就是内容撑起来的高度. 2.在局部布局的时候,我们可以不用设定ul的宽度和高度,直接使用margin来巧妙布局. ...
随机推荐
- spring mvc日期转换（前端到后端，后端到前端）
在做web开发的时候,页面传入的都是String类型,SpringMVC可以对一些基本的类型进行转换,但是对于日期类的转换可能就需要我们配置. 1.如果查询类使我们自己写,那么在属性前面加上@Date ...
- HDU 5311 Sequence
Hidden String Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...
- Java知识总结---整合SpringMVC+Mybatis+Spring（二）
在如今的Java Web开发过程中,各种各样框架层出不穷.在工作中,框架的使用也越来越频繁. 今天介绍一下如今比較流行的SpringMVC.Mybatis和Spring框架.学习一下怎样在项目中使用它 ...
- Meter Bus解析4：升压斩波电路
Meter Bus解析1(http://blog.csdn.net/qingwufeiyang12346/article/details/47767595),对Meter Bus进行 ...
- BMP图片的解析,关于压缩方式
在做一个显示bmp图片到lcd屏的时候,发现有些bmp图显示不对. 同样是16bit bmp却有差异. 就查了一下格式. bmp文件格式 位图文件的组成 结构名称 符号 位图文件头(bitmap-fi ...
- JavaScript Patterns 2.4 For-in loop
Principle Enumeration should be used to iterate over nonarray objects. It's important to use the met ...
- IDEA Spark Streaming 操作(RDD队列流)
import org.apache.spark.SparkConf import org.apache.spark.rdd.RDD import org.apache.spark.streaming. ...
- 【已解决】Makefile执行过程中出错：make: *** No rule to make target ` ‘, needed by xxx. Stop（转载)
转自: http://www.crifan.com/makefile_error_make_no_rule_to_make_target_needed_by_stop/ [问题] 有个已有的Makef ...
- maven的pom.xml文件错误
来自:http://www.cnblogs.com/shihujiang/p/3492864.html
- web自动化测试—selenium游览器下拉框操作
# coding=utf-8'''下拉框实战思路导包:from selenium.webdriver.support.select import Select #下拉框select from sele ...