MDN-CSS练习-卡片

Dreamzz2

已于 2022-08-06 14:53:51 修改

阅读量162

点赞数

文章标签： css 前端 html

于 2022-08-06 14:51:24 首次发布

本文链接：https://blog.csdn.net/Dreamzz2/article/details/126194861

版权

效果图：

HTML：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="index.css" />
    <title>Fundamental CSS comprehension</title>
  </head>
  <body>
    <section class="card">
      <header>
        <h2>Chris Mills</h2>
      </header>
      <article>
        <img
          src="chris.jpg"
          alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat"
        />
        <p>
          50 My Street<br />
          The Town<br />
          Gray Peach<br />
          UK<br />
          ZO50 1MU<br />
          <strong>Tel</strong>: 01234 567 890<br />
          <strong>Mail</strong>: chris@nothere.com
        </p>
      </article>
      <footer>
        <p>Editing, writing, and web development services</p>
      </footer>
    </section>
  </body>
</html>

CSS：

/* General styles - put these straight into your stylesheet */

body {
  margin: 0;
}

html {
  font-family: "Helvetica neue", Arial, "sans serif";
  font-size: 10px;
  background-color: #ccc;
}

/* 编写一个同时面向 card header 和 card footer 的规则集，
使它们计算的总高度为 50px（包括 30px 的内容高度和 10px 的 padding）但用 em 来表示。 */
.card header,
.card footer {
  height: 3em;
  padding: 1em;
}

/* 浏览器会为<h2> 和 <p>元素应用默认的 margin，
这会影响我们的设计，所以编写一个规则集：margin 设置为 0。 */
.card h2,
.card p {
  margin: 0;
}

/* 为了阻止图像溢出名片的主要内容 ( <article> 元素)，我们需要给它设置一个明确的高度。
设置 <article>的高度为 120px，但是使用 em来表示。还要给它一个半透明黑色的背景颜色，
产生一个稍暗一点的阴影，能让红色的背景稍微透过。 */
.card article {
  height: 12em;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 编写一个规则集，使 <h2> 有效的字体大小为 20px (使用 em表达) 
以及一个适当的行高将其放置在标题的内容框的中央。回想起来，内容框高度应该是 30px，
你所有需要的数字都已经给你了，所以可以计算出行高。 
   为页脚中的 <p> 编写一个规则集，使它的有效字体大小为 15px (使用 em表达) 
以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是 30px，
你所有需要的数字都已经给你了，所以可以计算出行高。 */
.card header h2 {
  font-size: 2em;
}

.card footer p {
  font-size: 1.5em;
}

.card header,
.card footer {
  line-height: 3em;
}

/* 最为最后一步，为 <article> 中的段落设置一个合适的 padding 值，
让它和 <h2> 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。 */
.card article p {
  padding: 1em;
}

/* ||卡片容器 */
.card {
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

/* ||卡片头部 */
.card header {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0)
  );
  border-radius: 1.5em 1.5em 0 0;
}

/* ||卡片底部 */
.card footer {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.1)
  );
  border-radius: 0 0 1.5em 1.5em;
}

/* ||卡片图片 */
.card article img {
  max-height: 100%;
  float: right;
}