毕业设计(二十三)---空间大致布局 简画

 

 

 

左侧为个人资料 的小的导航, [具体各项还没有需改]

点击分别在右侧显示内容

个人空间主页的时候 默认在中间区域显示好友动态或者全站动态

 

 

<div id="wai" >    <div id='ad2' >  <a href="${zonead_link }" target='_blank'><img src="<%=basePath%>${zonead_picAdd }" width="950" height="100" border="0" /></a>  </div>        <div id="gerenziliao" >    <span style="font-size:20px" >${user.zonetitle }</span>    <div id="touxiang" >    <s:if test="#session.user.headImage!=null">    <img src="<%=basePath %>${ user.headImage}" width="120px" height="120px"  /></s:if><s:else><img src="<%=basePath%>public/image/morentouxiang.png" width="120px" height="120px"  /></s:else><br/><a href="javascript:void(0);" onclick="tanchuChangeHeadImage();" >更换头像</a>    <a href="myzone!xiugaiziliaoPre.action"  >修改资料</a>    </div>        <ul id="nav2"><li><a href="#">home</a></li><li><a href="#">about</a></li><li><a href="#">news</a></li><li><a href="#">products</a></li><li><a href="#">services</a></li><li><a href="#">clients</a></li><li><a href="#">blog</a></li></ul>            </div>    <div id="mk" >    <div id="haoyoudongtai" >sdfdsfddddddddddddd</div>    <div id="wodeguanzhu" ></div>    </div>   </div>

 

#wai {position: relative; margin : 0px auto;width: 950px;}#ad2{position: relative;margin: 0px auto;top: 27px;width: auto;height: 100px;border: 1px solid red;}#mk{position: absolute;left: 180px;top:135px;width: 770px;border: 1px solid black;text-align: center;}#gerenziliao{top: 135px;position: absolute;border: 1px solid blue;width:180px;height:450px;background-color: #EBF1F4;}#mk #haoyoudongtai{position: absolute;border: 1px solid blue;left: 0px;width:520px;height:900px;}#mk #wodeguanzhu{position: absolute;border: 1px solid blue;left:520px;width:250px;height:450px;}