头部内嵌布局效果-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), var(--color-bg)) content-box, linear-gradient(180deg, var(--color-bg) calc(50% - 1px), currentColor calc(50% - 1px)) padding-box;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.callout[data-callout-position="center"]::before {
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.callout[data-callout-position="end"]::before {
  left: unset;
  right: 0.5rem;
}
.callout > * {
  margin: 0.5rem 0;
}

.u-padding {
  p.........完整代码请登录后点击上方下载按钮下载查看