overflow:hidden}/*超出部分隐藏*/
.list_ul figcaption p{/*html代码中没有*/
font-size:12px
color:#aaa
}
.imgtest figure div{ /*设置图片外面包裹的样式*/
display:inline-block/*设置行内块元素，可以设置宽高的，但是这个div又不会独占一行*/
margin:5px auto/*设置外边距*/
width:100px/*宽高一样设置成正方形*/
height:100px/*宽高一样设置成正方形*/
border-radius:100px/*设置圆角100px，设置边角为圆角*/
border:2px solid #fff/*设置div边框宽度为2，solid实线，颜色为#fff白色*/
overflow:hidden/*超出部分隐藏*/
-webkit-box-shadow:0 0 3px #ccc/*设置阴影，兼容谷歌浏览器*/
box-shadow:0 0 3px #ccc/*设置阴影*/
}
.imgtest img{width:100%/*设置图片相对于父级div的宽度*/
min-height:100%text-align:center}/*最小高度，和居中对齐样式*/
具体如果不明白可以看一下菜鸟教程，很不错的
根据你的图片里面的代码我重新写了一遍并做了一些修改，代码如下：
<style type="text/css">body{ margin:0 padding:0 background:url(images/E4%B8%9C%E9%98%B2%E.png) no-repeat font:12px/40px "Stout Deco" color:#fff}
#zongti{ width:1400px}
#boo{ float:left margin:0 padding:0 list-style-type:none}
#boo li{ float:left}
#boo li.booimg{ margin:10px 10px 0px 10px}
.aoo{ float:right margin:0 padding:0 list-style-type:none}
.aoo li{ float:right margin-right:15px}
#boo a,.aoo a{ text-decoration:none color:#fff}
</style>
</head>
<body>
<div id="zongti">
<ul id="bobo">
<li><a href="#"><img src="images/头像.png" width="36" height="36" /></a></li>
<li><a href="#">Username</a></li>
</ul>
<ul class="aoo">
<li><a href="#"><img src="images/其他.png" width="36" height="36" /></a></li>
<li><a href="#">Conloct</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
</ul>
</div>
</body>
先指出你一个很明显的错误，就是id重复调用了，如果你不了解id是怎么回事那就老老实实用class好了；我这里也大概写了一个参照例子，你自己注意一下，其他问题就不多说了，都是些小问题，以后学习过程中一般都能改过来，至于控制左上角图片位置也不是很难，最简单的就是调整#boo li.booimg{ margin:10px 10px 0px 10px} 这段样式的值就好了
其实，如果你刚学不久的话对样式使用不熟悉，那就干脆用绝对定位 position:absolute把位置定死好了，而且绝对定位你想怎么调整位置就怎么调整，出错率并不大，只不过对页面调整性差了点而已，但是这对于新手而言问题不大
