这种输出的css方法有什么用？

Question

我目前的输出：

我想做出这种输出：

我该怎么做？我真的对此没有任何想法。

截至目前，这是我的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>

Answer 1

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

其次，尝试以下方法（假设您的课程安排正确）：

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

Answer 2

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;
}

Answer 3

您的html对于放置在结束标记中的类无效。 有很多方法可以做到这一点。这是一个清理你的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>