<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ghost Blog</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2964623_s4gx8whnxy.css">
<style>
</style>
</head>
<body>
<div class="head">
<img src="https://s6.jpg.cm/2021/11/25/LGHe9h.png" alt="">
</div>
<div class="nav">
<div class="menu-icon">
<label for="menu-input">
<i class="iconfont icon-hanbaocaidanzhedie"></i>
</label>
</div>
<input id="menu-input" type="checkbox">
<ul class="menu-items">
<li class="active">首页</li>
<li>论坛</li>
<li>快捷手册</li>
<li>中文文档</li>
<li>关于</li>
</ul>
</div>
<main>
<div class="articles">
<div class="article">
<h2>全新的 Ghost 文档上线</h2>
<div class="info">
<span>作者：王赛</span>•<span>2018年11月20日</span>
</div>
<p>我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost
作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-sucai"></i>
<span><a href="#">Android</a></span>,
<span><a href="#">客户端</a></span>
</section>
</div>
<div class="article">
<h2>全新的 Ghost 文档上线</h2>
<div class="info">
<span>作者：王赛</span>•<span>2018年11月20日</span>
</div>
<p>我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost
作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-sucai"></i>
<span><a href="#">Android</a></span>,
<span><a href="#">客户端</a></span>
</section>
</div>
<div class="article">
<h2>全新的 Ghost 文档上线</h2>
<div class="info">
<span>作者：王赛</span>•<span>2018年11月20日</span>
</div>
<p>我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost
作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-sucai"></i>
<span><a href="#">Android</a></span>,
<span><a href="#">客户端</a></span>
</section>
</div>
<div class="article">
<h2>全新的 Ghost 文档上线</h2>
<div class="info">
<span>作者：王赛</span>•<span>2018年11月20日</span>
</div>
<p>我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost
作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-sucai"></i>
<span><a href="#">Android</a></span>,
<span><a href="#">客户端</a></span>
</section>
</div>
</div>
<div class="others">
<div class="other statement">
<h2>声明</h2>
<p>Ghost 中文版不再继续维护，请去官方下载。</p>
</div>
<div class="other download">
<h2>下载</h2>
<button>Ghost最新版</button>
</div>
<div class="other tags">
<h2>标签云</h2>
<div class="button-wrapper">
<button>客户端</button>
<button>Android</button>
<button>jQuery</button>
<button>Ghost 0.7 版本</button>
<button>开源</button>
<button>助手函数</button>
<button>客户端</button>
<button>Android</button>
<button>jQuery</button>
<button>Ghost 0.7 版本</button>
<button>开源</button>
<button>助手函数</button>
<button>客户端</button>
<button>Android</button>
<button>jQuery</button>
<button>Ghost 0.7 版本</button>
<button>开源</button>
<button>助手函数</button>
</div>
</div>
</div>
</main>
<div class="links-wrapper">
<div class="links">
<div class="link-exchange">
<h2>友链</h2>
<ul>
<li><a href="#">Bootstrap中文网</a></li>
<li><a href="#">React</a></li>
<li><a href="#">Vue.js</a></li>
<li><a href="#">Svelte</a></li>
<li><a href="#">Preact</a></li>
<li><a href="#">Babel</a></li>
<li><a href="#">Webpack</a></li>
<li><a href="#">Bootstrap中文网</a></li>
<li><a href="#">React</a></li>
<li><a href="#">Vue.js</a></li>
<li><a href="#">Svelte</a></li>
<li><a href="#">Preact</a></li>
<li><a href="#">Babel</a></li>
<li><a href="#">Webpack</a></li>
</ul>
</div>
<div class="tag-cloud">
<h2>标签云</h2>
<ul>
<li><a href="#">客户端</a></li>
<li><a href="#">助手函数</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ghost 0.7 版本</a></li>
<li><a href="#">开源</a></li>
<li><a href="#">客户端</a></li>
<li><a href="#">助手函数</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ghost 0.7 版本</a></li>
<li><a href="#">开源</a></li>
</ul>
</div>
<div class="partner">
<h2>合作伙伴</h2>
<ul>
<li><a href="#">阿里云</a></li>
<li><a href="#">腾讯</a></li>
<li><a href="#">字节跳动</a></li>
</ul>
</div>
</div>
</div>
<footer>
<span>Copyright © Ghost中文网 | 京ICP备11008151号-11 | 京公网安备11010802014853</span>
</footer>
</body>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit
}
ul,
ol {
list-style: none;
}
body {
background: #ebebeb;
}
.head {
height: 190px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1px;
}
.head>img {
width: 200px;
}
.nav {
background: #fff;
border-bottom: 2px solid #e1e1e1;
padding: 0 16px;
}
.menu-icon {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-icon i {
cursor: pointer;
font-size: 20px;
}
.menu-items>li {
height: 56px;
padding: 0 20px;
line-height: 56px;
font-size: 14px;
}
.menu-items>li.active {
position: relative;
}
.menu-items>li.active::after {
content: '';
display: block;
height: 2px;
background: #e67e22;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.menu-items,
#menu-input {
display: none;
}
#menu-input:checked+.menu-items {
display: block;
}
main {
padding: 0 16px;
line-height: 1.5;
}
.article,
.other {
margin-top: 35px;
padding: 35px;
background: #fff;
}
.article>h2 {
font-size: 35px;
font-weight: 400;
text-align: center;
}
.info {
font-size: 14px;
color: #959595;
text-align: center;
}
.article>p {
margin-top: 25px;
font-size: 18px;
}
.article>button {
border: none;
background: #e67e22;
font-size: 14px;
padding: 10px;
color: white;
margin: 30px 0;
}
.article>section {
border-top: 1px solid #ebebeb;
font-size: 14px;
color: #505050;
padding-top: 20px;
}
.article>section>span {
margin-left: 6px;
}
.others h2 {
font-size: 20px;
font-weight: normal;
border-bottom: 1px solid #cccccc;
padding-bottom: 8px;
position: relative;
}
.others h2::after {
position: absolute;
content: '';
display: block;
left: 0;
bottom: -1px;
width: 100px;
height: 1px;
background: #e67e22;
}
.others p {
font-size: 14px;
margin-top: 30px;
}
.download>button {
width: 100%;
border: none;
background: #e67e22;
font-size: 14px;
padding: 10px;
color: white;
margin-top: 30px;
}
.button-wrapper {
padding-top: 20px;
}
.button-wrapper>button {
border: 1px solid #ebebeb;
color: #505050;
font-size: 14px;
line-height: 30px;
padding: 0 10px;
background: white;
margin: 10px 8px 0 0;
}
footer {
height: 80px;
font-size: 14px;
color: #555555;
display: flex;
align-items: center;
justify-content: center;
background: #111111;
}
.links-wrapper {
background: #202020;
margin-top: 35px;
}
.links {
padding: 30px;
color: #959595;
}
.links h2 {
font-size: 22px;
font-weight: 500;
color: white;
border-bottom: 1px solid #cccccc;
padding-bottom: 10px;
position: relative;
}
.links h2::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: -1px;
width: 100px;
height: 1px;
background: #e67e22;
}
.links ul {
padding: 5px 10px 0 10px;
font-size: 14px;
display: flex;
flex-wrap: wrap;
}
.links ul>li {
white-space: nowrap;
margin-right: 25px;
margin-top: 25px;
}
.links>div {
margin-top: 25px;
}
@media (min-width: 768px) {
.menu-icon {
display: none;
}
.menu-items {
display: flex !important;
justify-content: center;
}
}
@media (min-width: 992px) {
main {
display: grid;
grid-template-columns: repeat(12, 1fr);
max-width: 880px;
margin: 0 auto;
padding: 0;
column-gap: 30px;
}
main>.articles {
grid-area: auto/auto/auto/span 8;
}
main>.others {
grid-area: auto/auto/auto/span 4;
}
.links {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 30px;
max-width: 960px;
margin: 0 auto;
}
.link-exchange,
.partner,
.tag-cloud {
grid-area: auto/auto/auto/ span 4;
}
}
@media (min-width: 1200px) {
main {
max-width: 1100px;
}
.links {
max-width: 1200px;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.