由于采用的是流体布局，所以head部分需要加入这句声明

//声明宽度等于设备宽度，禁止用户缩放

//禁止百度转码

//禁止百度转码

这时候的效果如下

Paste_Image.png

对于头部：

我们需要做的是：文字居中，方法是将文字用p标签标记起来，设置text-align在水平方向居中,通过调整line-height在竖直方向上居中，给予背景色，这里使用的是em单位，1em=16px，这是方便做流体布局的时候缩放计算的。对于配色整体的思路是一个底色，各个部分设置solid 的borde来形成扁平化的效果。

css代码如下：

header{

width: 100%;

height: 3em;

background-color: #00A2CA;

}

header p{

text-align: center;

line-height:3em;

}

主体：

首先应该先把边距都清掉，即body的margin和padding都为零，

然后主体用一个容器div包容起来(content)，这是之前很老的写法了。当然了没有这个也可以。然后个人信息部分，这里是重点，如何让头像固定的情况下让头像div和信息div在同一行，使用浮动或者定位的话会导致当个人信息的文字多了以后，会超出div容器，这时候如果设置detail的heig为auto的话是无效的，它没法把他撑开的。原因是浮动和定位都会导致该元素脱离文档流。除了一种情况，相对定位。

解决方法如下：

对ul个人信息部分：display：inline-block

调整margn-left使它不遮挡住img，然后img浮动或者定位都可以。主要是要保证ul在容器内。

另外，ing不能被缩放，对其设置固定宽高即可。

完整CSS代码如下：

@charset "utf-8";

body{

margin: 0;

padding: 0;

background-color: #EEEEEE;

font-family: 微软雅黑;

}

ul{

list-style: none;

margin: 0 0 0 7.5em;

padding: 0;

}

header{

width: 100%;

height: 3em;

background-color: #00A2CA;

}

header p{

text-align: center;

line-height:3em;

}

.content{

width: 100%;

background-color: #EEEEEE;

}

.detail{

background-color: #FFFFFF;

height: auto;

margin-top:1em;

padding: 10px;

position: relative;

}

.edit{

background-color: #FFFFFF;

height: 2em;

width: 100%;

margin-top:1em;

clear: both;

}

.login-out{

background-color: #FFFFFF;

height: 2em;

width: 100%;

margin-top:0.1em;

margin-bottom: 0.5em;

}

.footer{

width: 100%;

height:2em;

background-color: rgb(75,75,75);

}

img{

width: 100%;

height: 100%;

height: 7em;

width: 7em;

border: 1px solid grey;

position: absolute;

top: 0.5em;

left: 0.5em;

}

a{

text-decoration: none;

display: inline-block;

height: 2em;

text-align: center;

width: 100%;

line-height: 2em;

color: black;

}

.block{

display: inline-block;

height: auto;

word-wrap:break-word;

width: 50%;

}