Question

我想在我的卡的顶部中心设置Left Double Quote的样式，所以它看起来像一个标题（可以在笔here中看到）。我希望它看起来更大，并希望学习如何将它与字体分开设计。有人可以帮忙吗？

HTML（帕格）：

.main
  .container
    blockquote.quote Success is no accident. It is hardwork, perseverance, learning, studying, sacrifice, and most of all, love of what you are doing or learning to do.
      footer Pele

SCSS：

.main {
  height: 100vh;
  width: 100vw;
  background-color: mintcream;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
 position: relative;
 height: 270px;
 width: 600px;
 background-color: tomato;
 -webkit-box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);

   font-size: 24px;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  position: absolute;
  margin: 0 auto;

} 

.quote {
  position: absolute;
  top: 30px;
  font-family: 'Bitter', serif;
  color: white;
  font-size: 24px;
}

Answer 1

好吧，你可以随时应用基本的CSS文本样式，但是如果你想进一步改变外观（使它看起来与字体的引号不同），那么插入SVG或图标是可行的方法。 / p>

就个人而言，我只会search for a font，我喜欢左侧双引号，下载字体，然后使用像Inkscape这样的程序写入，将其转换为路径并从那里进行更改。

Answer 2

将样式添加到:: before，因为这是您要添加的元素

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="form-control" id="userFiles" name="userFiles[]" multiple/>

Answer 3

感谢您的所有想法！我尝试了一些简单的方法，它对我很有用：

＆＃13;

.main {
  height: 100vh;
  width: 100vw;
  background-color: mintcream;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  height: 270px;
  width: 600px;
  background-color: tomato;
  -webkit-box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);
  font-size: 24px;
}

span {
  position: absolute;
  left: 40%;
  font-size: 110px;
  margin: -30px;
  line-height: 0.6em;
  opacity: 0.4;
}

.quote {
  position: absolute;
  top: 30px;
  font-family: 'Bitter', serif;
  color: white;
  font-size: 24px;
}

＆＃13;

<div class="main">
  <div class="container">
    <blockquote class="quote"><span>&#10077; </span>
      <p>Success is no accident. It is hardwork, perseverance, learning, studying, sacrifice, and most of all, love of what you are doing or learning to do.</p>
      <footer>Pele</footer>
    </blockquote>
  </div>
</div>

＆＃13;

左双引号的CSS样式Unicode

3 个答案: