簡單的左上角顯示“X”號,html和css代碼


需求:原生js在一個div右上角搞一個“x”號,可以刪除這個div,網上找的都不是很滿意,找的過程中發現網站的廣告彈框的“X”號效果可以,就竊取過來了,先留着,以后說不定能用到:
效果圖就像這樣
 

 

 

<div class='member-item'>
                <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 15 15"><path d="M3.25,3.25l8.5,8.5M11.75,3.25l-8.5,8.5"></path></svg>
                    <img class="medium-avatar img-circle" src="${headPath}"/>
                    <p class="real-name">${xss(peer.name)}</p>
      </div>
 
.member-item {
    display: block;
    width: 115px;
    height: 120px;
    position: relative;
    top:20px;
}
 
.member-item  svg{
    position: absolute;
    top: 0;
    right: 0;
    height: 15px;
    width: 15px;
    stroke: #00aecd;
    stroke-width: 1.25;
    cursor:pointer;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM