這種輸出的好css方法是什麼？

enter image description here

我想做出這種輸出：

enter image description here

我應該怎樣做呢？我對此沒有任何想法。

截至目前，這裏是我的html代碼：

<div id="Profile"> 
    <p class="cover"> 
     <img src="resources/default-cover.png" alt=""> 
    </p> 
    <p class="profile-pic"> 
     <a href="#"><img src="resources/default-male.png" alt="Male"></a> 
    </p> 
</div>

來源

2012-09-23 Brained Washed

首先，你的第二類是放錯了地方;它應該在開始段落標記中，而不是結束。

其次，請嘗試以下（假設你的分班是正確的）：

.profile-pic { 
    margin-top: -50px; 
}

來源

2012-09-23 00:07:14 Daedalus

在3分鐘內，如果我已經設置背景邊框的兩個設置IMG我發現我仍然可以看到背後的個人資料，PIC I類如何可以將其隱藏邊框的只是一件事？ –

@BrainedWashed我不確定我是否理解你的問題，你可以拍一個截圖，或者做一個[jsfiddle]（http://www.jsfiddle.net） – Daedalus

[jsfiddle]（http：// jsfiddle。 net/RGCgD /），我想在我的個人資料中隱藏該邊框線-pic –

HTML

<div id="Profile"> 
<p class="cover"> 
    <img src="resources/default-cover.png" alt=""> 
</p> 
<p class="profile-pic"> 
    <a href="#"><img src="resources/default-male.png" alt="Male"></a> 
</p> 
</div>

CSS

.profile-pic{ 
margin-top: -20px; 
border-bottom: 40px solid white; 
}

來源

2012-09-23 00:06:34 Ozerich

你的HTML是不置於關閉p標籤類有效。有很多方法可以做到這一點。這是一個清理你的HTML。我通常儘量避免使用p標籤，除非其中有大塊文字。

<div id="Profile"> 

<img src="resources/default-cover.png" alt="" class="cover"> 

<a href="#"><img src="resources/default-male.png" alt="Male" class="profile-pic"></a> 

</div>

這裏是CSS來實現的效果。將你的.profile-pic的大小放在css中。

<style type="text/css"> 
.cover {display:block;} 
.profile-pic {position:relative; margin-top: -25px;height: 50px; width: 50px;} 
</style>

來源

2012-09-23 00:39:40 Marsbar

這種輸出的好css方法是什麼？

回答

相關問題