在左侧放置一张照片，在右侧放置带有"关于我"按钮的描述

Question

我的代码有问题。

当我纠正它时，我左边的照片消失了，描述和关于我按钮的格式也没有出现

所以我的问题是：

代码如下：

<div class="image">
<img src="images/photo ze.jpg" alt="">
</div>

<div class="content">
<h1>My name is José Moreira, I am
<span
class="txt-rotate"
date-period="2000"
data-rotate='[ "Graphic Design.", "Photographer.", "Web developer.",]'></span>
</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Who, error?</p>
<a href="#about" class="btn">about me</a>
</div>

完整的代码位于：

https://jsfiddle.net/Quencyjones79/zrp9e12g/1/

https://codepen.io/Quencyjones79/pen/GRyZQeG

我非常感谢你的帮助。

Answer 1

在CSS中，设置了以下img属性。将display: none;应用于img选择器时，页面上的图像将不可见，除非您用另一个更具体的CSS规则覆盖该规则。

img{
position: relative;
width: 100%;
display: none;
}

让您关心的图像出现的一种方法是将display: inline添加到.home .image img{}选择器中。我并不是说这是最好的方法，但它展示了如何针对您关心的特定图像并更改其显示属性。您也可以从img中删除display: none属性。

如果您感兴趣，请学习如何使用开发人员工具调试CSS。