1

我正在尝试创建一个如下所示的 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>

4

4 回答 4

1

为 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 {
    	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>

于 2015-07-13T05:53:06.927 回答
1

现在不习惯这个

.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 {
    	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>

于 2015-07-13T05:49:45.993 回答
1

.mission blockquote.style1如果您没有在标签中使用.style1类，则需要在之间留出空格，如下所示： Demoblockquote

.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>
于 2015-07-13T05:55:25.893 回答
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>

于 2015-07-13T06:01:04.643 回答