自适应自带暗黑模式的单页面布局效果-html代码-BFW代码库

代码语言：html

代码描述：自适应自带暗黑模式的单页面布局效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.css">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/material-icons.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
body {
  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  background-color: #eaeaea;
  color: #333;
  -webkit-transition: background-color 800ms ease;
  transition: background-color 800ms ease;
}
body.dark {
  background-color: #222;
  color: #eaeaea;
}
body.dark .masthead,
body.dark .footer {
  background-color: #121212;
}
body.dark img {
  -webkit-filter: brightness(70%);
          filter: brightness(70%);
}

h2 {
  font-size: 3rem;
  line-height: 1.2;
}

img {
  width: 100%;
}
img.small {
  width: 60%;
  float: right;
  padding: 1rem;
}

.masthead,
.footer {
  padding: 0 1rem;
  background-color: #ddd;
  -webkit-transition: background-color 800ms ease;
  transition: background-color 800ms ease;
}

.masthead-inner,
.footer-inner {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  max-width: 900px;
  margin: auto;
}

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  border: 1px solid #333;
  padding: 0.5rem;
  background: #333;
  border-radius: 5px;
  -webkit-transition: background 200ms ease;
  transition: background 200ms ease;
  color: #eaeaea;
}
button:hover {
  background: rgba(51, 51, 51, 0.8);
}

.dark-button i {
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  margin-left: 0.3rem;
}

main {
  padding: 1rem;
  max-width: 900px;
  margin: auto;
}
</style>

</head>
<body translate="no">
<header class="masthead">
<div class="masthead-inner">
<h1 class="logo">Logo</h1>
<nav class="nav">
<ul>
<li>
<button class="dark-button">Dark <i class="zmdi zmdi-brightness-2 zmdi-hc-fw"></i> </button>
</li>
<li>
<button class="light-button" hidden="hidden">Light <i class="zmdi zmdi-sun zmdi-hc-fw"></i></button>
</li>
</ul>
</nav>
</div>
</header>
<main>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, non.</h2><img src="http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_300,/quality,q_90" />
<p>Marley was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge’s name was good upon ’Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.</p>
<p>Mind! I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail. I might have been inclined, myself, to regard a coffin-nail as the deadest piece of ironmongery in the trade. But the wisdom of our ancestors is in the simile; and my unhallowed hands shall not disturb it, or the Country’s done for. You will therefore permit me to repeat, emphatically, that Marley was as dead as a door-nail.</p>
<p>Scrooge knew he was dead? Of course he did. How could it be otherwise? Scrooge and he were partners for I don’t know how many years. Scrooge was his sole executor, his sole administrator, his sole assign, his sole residuary legatee, his sole friend, and sole mourner. And even Scrooge was not so dreadfully cut up by the sad event, but that he was an excellent man of business on the very day of the funeral, and solemnised it with an undoubted bargain.</p>
<p>The mention of Marley’s funeral brings me back to the point I started from. There is no doubt that Marley was dead. This must be distinctly.........完整代码请登录后点击上方下载按钮下载查看