Html Jekyll post特定样式(为某些段落添加图像、文本列等)

Html Jekyll post特定样式(为某些段落添加图像、文本列等),html,css,jekyll,Html,Css,Jekyll,我希望能够做到这一点: 我对杰基尔很陌生,在这里或任何地方都找不到对我有帮助的东西。我已经整理好了整个页面的标题,但似乎无法正确地在帖子(白色矩形)中设置样式。例如:顶部的引用与文章的其他部分有不同的css,文章的一些部分有两列的文本/图像布局,背景蓝色的轮廓图像位于文章的下方。如果有人能帮忙,那就太好了。谢谢。HTML结构应该是这样的: <!DOCTYPE html> <html> <head> <title>{{ page.title }}&l

我希望能够做到这一点:


我对杰基尔很陌生,在这里或任何地方都找不到对我有帮助的东西。我已经整理好了整个页面的标题,但似乎无法正确地在帖子(白色矩形)中设置样式。例如:顶部的引用与文章的其他部分有不同的css,文章的一些部分有两列的文本/图像布局,背景蓝色的轮廓图像位于文章的下方。如果有人能帮忙,那就太好了。谢谢。

HTML结构应该是这样的:

<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
{% include menu.html %}
<div class="title">{{ page.title }}</div>
<div class="subtitle">{{ page.title }}</div>
<div class="meta">Posted on {{ page.date }} by {{ page.author }}</div>
<div class="page">{{ content }}{% include footer.html %}</div>
</body>
</html>
----
title: 'Loyle Carner: Benjamin Coyle-Larner'
subtitle: 'Lorem ipsum dolor...'
date: 2016-02-27
author: 'Your Name'
----

Lorem ipsum dolor...

Sit amet.
body {
  background: white url(header_image.jpg) center top no-repeat;
  background-size: 100%;   /* set header image width */
  color: black;            /* set text color */
  text-align: center;      /* make sure everything is centered */
}
.page, .title, subtitle {
  background: white;       /* set background color on text */
  display: inline-block;   /* boxes that follow text-align: center; */
}
.page {
  width: 900px;            /* fixed width of the text */
  max-width: 100%;         /* make it responsive */
  text-align: left;        /* left align text in page */
}
.meta {color: white;}
您的CSS应该是这样的:

<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
{% include menu.html %}
<div class="title">{{ page.title }}</div>
<div class="subtitle">{{ page.title }}</div>
<div class="meta">Posted on {{ page.date }} by {{ page.author }}</div>
<div class="page">{{ content }}{% include footer.html %}</div>
</body>
</html>
----
title: 'Loyle Carner: Benjamin Coyle-Larner'
subtitle: 'Lorem ipsum dolor...'
date: 2016-02-27
author: 'Your Name'
----

Lorem ipsum dolor...

Sit amet.
body {
  background: white url(header_image.jpg) center top no-repeat;
  background-size: 100%;   /* set header image width */
  color: black;            /* set text color */
  text-align: center;      /* make sure everything is centered */
}
.page, .title, subtitle {
  background: white;       /* set background color on text */
  display: inline-block;   /* boxes that follow text-align: center; */
}
.page {
  width: 900px;            /* fixed width of the text */
  max-width: 100%;         /* make it responsive */
  text-align: left;        /* left align text in page */
}
.meta {color: white;}
我希望这能给你一个好的起点。

看看这篇文章:。这可能对你有帮助。