头部内嵌布局效果-html代码-BFW代码库

头部内嵌布局效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@charset "UTF-8";
:root {
  --c-main: #ffffff;
  --bg-main: #dd0095;
  --bg-secondary: #1d122f;
}

body {
  color: var(--c-main);
  --color-text: var(--c-main);
  background-color: var(--bg-secondary);
  --color-bg: var(--bg-secondary);
}

.content {
  max-width: 40rem;
  margin: 2rem auto;
}

.flow > * + * {
  margin-top: 2rem;
}

.callout {
  position: relative;
}
.callout::before {
  content: "\00a0\00a0Note\00a0\00a0";
}
.callout[data-callout]::before {
  content: "  " attr(data-callout) "  ";
}
.callout::before {
  position: absolute;
  left: 0.5rem;
  top: .02em;
  display: inline-block;
  padding: 1px;
  font-size: .625em;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  text-transform: uppercase;
  border-radius: inherit;
  color: var(--color-text);
  background-color: var(--color-bg);
  background: linear-gradient(var(--color-bg),.........完整代码请登录后点击上方下载按钮下载查看