html - 不在 html 中显示 block 引用和背景

Question

我正在尝试创建一个如下所示的 HTML 片段:

我写了一些代码，但背景、斜体和左侧引号显示不正确。这是我尝试过的:

mission blockquote.style1 {
    font: 14px/20px italic;
    padding: 8px;
    background-color: #000000;
    border-top: 1px solid #e1cc89;
    border-bottom: 1px solid #e1cc89;
    margin: 5px;
    background-image: url(../images/openquote1.gif);
    background-position: top left;
    background-repeat: no-repeat;
    text-indent: 23px;
}

.mission blockquote.style1 span {
    display: block;
    background-image: url(images/openquote1.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}

<div class=""mission>
    <h2>Mission</h2>
    <hr>
    <blockquote>
        <p class="style1">
            <span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span>
        </p>
    </blockquote>
</div>
	

Answer 1

CSS 有规则和标准，如果你不遵守它们，你就不能指望“魔法”会发生。

你没有:

1. 遵循正确的选择器规则(mission blockquote.style1 与 .mission blockquote .style1 不同)
2. 遵循正确的font属性规则(必须有字体系列，必须以正确的顺序排列)
3. 使用正确的 html 结构(class=""mission 完全错误)

最重要的是:

1. 如果您需要引号，则需要将它们放在 HTML 中
2. 如果你设置了全黑背景，你将看不到任何东西

长话短说:花点时间编写正确的代码。

.mission blockquote .style1 {
  font: italic 14px/20px serif;
  padding: 8px;
/*      background-color: #000000;*/
  border-top: 1px solid #e1cc89;
  border-bottom: 1px solid #e1cc89;
  margin: 5px;
/*      background-image: url(../images/openquote1.gif);*/
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 23px;
  }
.mission blockquote .style1 span {
    	display: block;
/*        	background-image: url(images/openquote1.gif);*/
    	background-repeat: no-repeat;
    	background-position: bottom right;
  	}

<div class="mission">
<h2>Mission</h2>
<hr>
<blockquote><p class="style1"><span>Our mission is to grow with our customers by providing quality products,timely delievery & personalised services</span></p></blockquote>
</div>