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

首先，您的第二堂课在错误的地方；它应该在开头段落标签中，而不是结尾。

其次，尝试以下方法（假设您的班级布置正确）：

.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。将 .profile-pic 的大小放在 css 中。

 <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 回答