0

私の現在の出力：

ここに画像の説明を入力

この種の出力を作成したい：

ここに画像の説明を入力

どうすればいいですか？私は本当にこれについて何の考えも持っていません。

今のところ、私の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>
4

3 に答える 3

2

まず、2番目のクラスが間違った場所にあります。終了ではなく、開始段落タグに含める必要があります。

次に、次のことを試してください（クラスの配置が正しいと仮定します）。

.profile-pic {
    margin-top: -50px;
}​
于 2012-09-23T00:07:14.130 に答える
1

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-23T00:06:34.160 に答える
1

あなたの 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です。css に .profile-pic のサイズを配置します。

 <style type="text/css">
 .cover {display:block;}
 .profile-pic {position:relative; margin-top: -25px;height: 50px; width: 50px;}
 </style>
于 2012-09-23T00:39:40.567 に答える