MDN-CSS-创建精美的信纸

最新推荐文章于 2023-07-16 17:23:21 发布

Dreamzz2

最新推荐文章于 2023-07-16 17:23:21 发布

阅读量543

点赞数 1

文章标签： css html 前端

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

版权

这篇博客展示了如何使用HTML和CSS来创建一款带有公司名称和地址的精美信头纸设计。HTML代码定义了页面结构，包括公司名称和地址，而CSS则用于设置布局、背景图像、渐变效果、边框以及文字阴影等视觉元素，从而实现专业且有特色的信头设计。

摘要由CSDN通过智能技术生成

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>Fancy letterheaded paper</title>
  </head>
  <body>
    <article>
      <h1>Awesome<br />Company</h1>
      <address>
        <p>The Awesome Company</p>
        <p>
          102-112 Frail Bend Bridge<br />
          The Dwindlings<br />
          Little Hornet<br />
          HX3 9ZQ<br />
          UK
        </p>
      </address>
    </article>
  </body>
</html>

CSS：

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
  background: #ccc;
}

article {
  width: 210mm;
  height: 297mm;
  margin: 20px auto;
  position: relative;
}

address {
  position: absolute;
  bottom: 8mm;
  right: 20mm;
}

h1 {
  position: absolute;
  top: 12mm;
  left: 20mm;
  width: 128px;
  height: 128px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  padding: 44px 0;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Your CSS below here */

article {
  background: url(top-image.png) no-repeat left top;
  background: linear-gradient(
      180edg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0) 20%,
      rgba(0, 0, 0, 0) 80%,
      rgba(0, 0, 0, 0.2)
    ),
    url(top-image.png) no-repeat left top,
    url(bottom-image.png) no-repeat left bottom;
  background-color: white;
  border-top: 1mm solid red;
  border-bottom: 1mm solid red;
}

h1 {
  background-image: url(logo.png);
  /* -webkit-filter: drop-shadow(3px 3px 3px black); */
  /* filter: drop-shadow(3px 3px 3px black); */
  border-radius: 64px;
  box-shadow: 3px 3px 3px black;
}