css布局有关问题-HTML教程-爱易网页

css布局有关问题

日期：2014-05-17　浏览次数：20937 次

css布局问题
最近在修改项目前端页面，想实现在一个张230*230图片的右下角添加另一个64*64小图片
写了css但是在不同分辨率的机器上显示不正常。
css文件

Assembly code


#aside-userSpace .userPhoto{
  margin-top: 21px;
  padding: 10px;
  border-radius: 7px 7px 0px 0px;
}
.userPhoto img{
  width: 230px;
  height:230px;
}


.addnew {
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
}

.blue-button-addnew{
    cursor: pointer;
    background: url("../images/blue-button.png") repeat-x scroll 0 0 transparent; 
    display: block;
    height:20px;
    width:10px;
    line-height:20px;
    border: 1px solid #006DAB; 
    color: #ffffff; 
    padding: 0 8px 0 6px;
    position: absolute;
    top: 404px;
    right:192px;
    border-radius: 4px 4px 4px 4px;
}

页面代码：

HTML code



<div class="userInfo">
                  <div class="userPhoto">
                     <a href="#" namecard="true" uid="${user.uid}">

                                         <img alt="" src="${RESOUCE_STATIC_URL}/images/avatar_64_64.png">
                                  
                                        <img alt=""src="${RESOUCE_UPLOAD_URL}/${user.mugshot256}">    
                                        
                                    
                                      <a class="follow-action blue-button-addnew" title="加关注" style="${styleFollow}" uid="${user.uid}" ><span class="addnew">+</span></a>
                     </a>
                  </div>

请高手指点一下！

------解决方案--------------------

CSS code


#aside-userSpace .userPhoto{
  margin-top: 21px;
  padding: 10px;
  border-radius: 7px 7px 0px 0px;
  position:relative;
}
.userPhoto img{
  width: 230px;
  height:230px;
}


.addnew {
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
}

.blue-button-addnew{
    cursor: pointer;
    background: url("../images/blue-button.png") repeat-x scroll 0 0 transparent; 
    display: block;
    height:20px;
    width:10px;
    line-height:20px;
    border: 1px solid #006DAB; 
    color: #ffffff; 
    padding: 0 8px 0 6px;
    position: absolute;
    bottom: 0;
    right:0;
    border-radius: 4px 4px 4px 4px;
}

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

css布局有关问题

相关资料更多>

推荐阅读更多>