不顯示BLOCKQUOTE和背景中的HTML

Question

我想創建HTML的SNIPPIT它看起來像這樣：

我已經寫了一些代碼，但背景，斜體，以及左側報價顯示不正確。以下是我已經試過：

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> 
 
\t

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 { 
 
    \t display: block; 
 
/*   \t background-image: url(images/openquote1.gif);*/ 
 
    \t background-repeat: no-repeat; 
 
    \t background-position: bottom right; 
 
    \t }

<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 2

現在不使用這個

.mission blockquote.style1 span 

，根據你的HTML中使用這個

.mission blockquote .style1 span 

.class-1.class-2手段<div class="class-1 class-2"></div>

.class-1 .class-2裝置<div class="class-1"> <div class=".class2"></div>

=================================== ===========

.mission blockquote .style1 { 
 
    font: 14px/20px italic; 
 
    padding: 8px; 
 
    background-color: #eee; 
 
    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 { 
 
    \t display: block; 
 
    \t background-image: url(images/openquote1.gif); 
 
    \t background-repeat: no-repeat; 
 
    \t background-position: bottom right; 
 
    \t }

<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> 
 
\t

Answer 3

對CSS規則添加適當的空間。

.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 { 
 
    \t display: block; 
 
    \t background-image: url(images/openquote1.gif); 
 
    \t background-repeat: no-repeat; 
 
    \t background-position: bottom right; 
 
    \t }

<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 4

你需要給.mission blockquote.style1之間的空間，如果你不使用.style1類標籤是這樣的：Demo

.mission blockquote .style1 {..} 
.mission blockquote .style1 span {..} 

以其他方式改變你的HTML結構是這樣：

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