技术博客卡片功能介绍

应用场景介绍

本卡片功能适用于需要在技术博客中展示文章内容的场景，提供了一种简洁直观的展示方式，帮助用户快速了解文章要点。

基本功能介绍

• **标题展示：**卡片顶部显示文章标题，字号较大，醒目突出。
• **摘要展示：**卡片中间部分显示文章摘要，字号适中，内容简洁，吸引用户点击阅读全文。
• **作者信息：**卡片底部显示文章作者名称，并提供链接，方便用户了解作者信息。
• **标签展示：**卡片底部显示文章标签，帮助用户快速了解文章主题。
• **阅读全文按钮：**卡片底部提供“阅读全文”按钮，引导用户点击进入文章详情页。

功能实现步骤及关键代码分析说明

1. HTML结构搭建

<div class="dcs">
  <div class="container">
    <form>
      <div class="form-row">
        <div class="form-group col-sm">
          <label for="name">Name</label>
          <input type="text" class="form-control" id="name" />
        </div>

        <div class="form-group col-sm">
          <label for="email">Email address</label>
          <input type="email" class="form-control" id="email" />
          <small id="emailHelp" class="form-text text-muted"
            >We'll never share your email with anyone else.</small
          >
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-sm">
          <label for="email">Describe your issue in detail</label>
          <textarea id="premiumskinsandicons-bootstrap"></textarea>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-sm">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck" />
            <label class="form-check-label" for="gridCheck"
              >I agree to the <a href="#">terms and conditions</a></label
            >
          </div>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-sm">
          <button type="button" class="btn btn-primary">Submit</button>
          <button type="button" class="btn btn-secondary">Save Draft</button>
        </div>
      </div>
    </form>
  </div>
</div>

2. CSS样式

/* Override docs button styles */
.dcs button {
  display: unset;
  min-width: unset;
  height: unset;
  line-height: unset;
  border-radius: unset;
  cursor: unset;
  font-size: unset;
  padding: unset;
  text-align: unset;
}

/*!
 * README
 * This demo uses a subset of Bootstrap.
 * Just 2000+ lines of code to style some buttons and input fields
 * Sigh...
 */

/* Override docs button styles */

.dcs hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

.dcs hr:not([size]) {
  height: 1px;
}

.dcs h1,
.dcs .h1,
.dcs h2,
.dcs .h2,
.dcs h3,
.dcs .h3,
.dcs h4,
.dcs .h4,
.dcs h5,
.dcs .h5,
.dcs h6,
.dcs .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.dcs h1,
.dcs .h1 {
  font-size: 2.5rem;
}

.dcs h2,
.dcs .h2 {
  font-size: 2rem;
}

.dcs h3,
.dcs .h3 {
  font-size: 1.75rem;
}

.dcs h4,
.dcs .h4 {
  font-size: 1.5rem;
}

.dcs h5,
.dcs .h5 {
  font-size: 1.25rem;
}

.dcs h6,
.dcs .h6 {
  font-size: 1rem;
}

.dcs p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.dcs abbr[title],
.dcs abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

.dcs address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

.dcs ol,
.dcs ul,
.dcs dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

.dcs ol ol,
.dcs ul ul,
.dcs ol ul,
.dcs ul ol {
  margin-bottom: 0;
}

.dcs dt {
  font-weight: 700;
}

.dcs dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

.dcs blockquote {
  margin: 0 0 1rem;
}

.dcs b,
.dcs strong {
  font-weight: bolder;
}

.dcs small,
.dcs .small {
  font-size: 80%;
}

.dcs sub,
.dcs sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

.dcs sub {
  bottom: -0.25em;
}

.dcs sup {
  top: -0.5em;
}

.dcs a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

.dcs a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.dcs a:not([href]):not([tabindex]),
.dcs a:not([href]):not([tabindex]):hover,
.dcs a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
  outline: 0;
}

.dcs pre,
.dcs code,
.dcs kbd,
.dcs samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 1em;
}

.dcs pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

.dcs figure {
  margin: 0 0 1rem;
}

.dcs img {
  vertical-align: middle;
  border-style: none;
}

.dcs svg {
  overflow: hidden;
  vertical-align: middle;
}

.dcs table {
  border-collapse: collapse;
}

.dcs caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

.dcs th {
  text-align: inherit;
}

.dcs label {
  display: inline-block;
  margin-bottom: 0;
}

.dcs button {
  border-radius: 0;
}

.dcs button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

.dcs input