当前位置：网站首页>响应式布局实现ghost博客首页静态页面
响应式布局实现ghost博客首页静态页面
2022-04-21 09:22:00 【小白小白从不日白】
这个案例主要就是利用响应式框架 bootstrap 框架进行搭建的
最后的效果如下：
头部区域的实现：
这里主要就是一张logo图片，然后设置头部区域的高度为固定高度以及logo图片的宽度为固定宽度
再利用弹性布局（flex），并设置它的justify-content以及align-items为center，这样就可实现logo图片相对于头部区域水平垂直居中
header {
height: 190px;
background: #fff;
/*利用弹性布局，让logo能够水平垂直居中*/
display: flex;
justify-content: center;
align-items: center;
}
header a img {
width: 200px;
} <!-- 头部区域 -->
<header>
<a href="">
<img src="./img/ghost-logo.png" alt="">
</a>
</header>
导航区域：
对于导航区域主要分为点击的折叠图标按钮以及导航内容区域
导航的高度是由里面的内容自动撑开的
导航栏最开始高度也就是在大屏下的高度为56px，再利用弹性布局（flex），并设置它的justify-content以及align-items为center，这样就可实现折叠图标相对于导航区域水平垂直居中
导航里面的li的高度在这里也应该为导航栏最开始的56px
然后就是设置当点击折叠图标的时候控制导航内容的显示与隐藏，这里利用 :checked 属性进行设置，并使用 label 标签。具体的做法就是利用label标签嵌套折叠图标，然后再定义一个复选框，通过复选框的 :ckecked 来控制其选中与否，选中就显示，反之就隐藏
而复选框input我们要把它设置为display:none;因为这个其实没啥显示的价值，它只是为了能够控制导航列表而存在的
在移动端下：导航列表(nav-list)最开始的时候是隐藏起来的，当点击折叠按钮后才显示，这里就是利用 :checked 属性来完成的，当点击的时候nav-list为block
<!-- 导航区域 -->
<nav>
<!-- 导航图标 -->
<div class="nav-bar">
<label for="nav-toggle">
<i class="iconfont icon-zhedie"></i>
</label>
</div>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<!-- 导航内容区域 -->
<ul class="nav-list">
<li class="active"><a href="">首页</a></li>
<li><a href="">论坛</a></li>
<li><a href="">快捷手册</a></li>
<li><a href="">中文文档</a></li>
<li><a href="">关于</a></li>
</ul>
</nav>/*导航区域*/
nav {
border-top: 1px solid #ebebeb;
border-bottom: 2px solid #ebebeb;
background-color: #fff;
padding: 0 15px;
.nav-bar {
height: 56px;
/*利用弹性布局，让logo能够水平垂直居中*/
display: flex;
justify-content: center;
align-items: center;
i {
cursor: pointer;
}
}
.nav-toggle {
display: none;
&:checked + .nav-list {
display: block;
}
}
.nav-list {
display: none;
li {
height: 56px;
line-height: 56px;
position: relative;
padding: 0 21px;
&.active::after {
content: "";
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 2px;
background-color: #e67e22;
}
}
}
}到这里菜单的显示与隐藏就完成了，然后接着要做的就是加上响应式，因为在分辨率比较大的时候，导航要展开并且居中显示，这里就需要用到栅格
/*栅格*/
.row{
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.row>[class*="col"]{
grid-area: auto/auto/auto/span 12;
}
.row .col-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-12{
grid-area: auto/auto/auto/span 12;
}
@media (min-width: 576px){
.row .col-sm-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-sm-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-sm-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-sm-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-sm-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-sm-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-sm-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-sm-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-sm-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-sm-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-sm-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-sm-12{
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 768px){
.nav-bar{
display: none;
}
.nav-list{
display: flex !important;
justify-content: center;
justify-items: center;
}
.row .col-md-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-md-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-md-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-md-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-md-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-md-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-md-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-md-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-md-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-md-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-md-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-md-12{
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 992px){
:root{
--container: 940px;
}
.row>[class*="col"]{
padding: 0 15px;
}
.row .col-lg-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-lg-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-lg-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-lg-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-lg-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-lg-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-lg-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-lg-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-lg-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-lg-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-lg-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-lg-12{
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 1200px){
:root{
--container: 1160px;
}
.row>[class*="col"]{
padding: 0 15px;
}
.row .col-xl-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-xl-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-xl-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-xl-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-xl-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-xl-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-xl-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-xl-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-xl-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-xl-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-xl-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-xl-12{
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 1400px){
.row .col-xxl-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-xxl-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-xxl-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-xxl-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-xxl-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-xxl-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-xxl-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-xxl-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-xxl-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-xxl-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-xxl-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-xxl-12{
grid-area: auto/auto/auto/span 12;
}
}
最后效果如下：
文章列表（主体）区域：
这里对于结构和样式部分就省略介绍，直接上代码吧
<!-- 文章列表即主体内容部分 -->
<main>
<div class="main-article">
<h2>
全新的 Ghost 文档上线
</h2>
<div>
<span>作者：王赛</span> • <span>2018年11月20日</span>
</div>
<p>
我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>，
<a href="#">客户端</a>
</section>
</div>
<div class="main-article">
<h2>
全新的 Ghost 文档上线
</h2>
<div>
<span>作者：王赛</span> • <span>2018年11月20日</span>
</div>
<p>
我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>，
<a href="#">客户端</a>
</section>
</div>
<div class="main-article">
<h2>
全新的 Ghost 文档上线
</h2>
<div>
<span>作者：王赛</span> • <span>2018年11月20日</span>
</div>
<p>
我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>，
<a href="#">客户端</a>
</section>
</div>
</main>/*文章列表即主体内容部分*/
main {
padding: 0 15px;
}
main .main-article {
margin-top: 35px;
background-color: #fff;
padding: 35px;
line-height: 1.5;
}
main .main-article h2 {
font-size: 35px;
text-align: center;
font-weight: 400;
}
main .main-article div {
text-align: center;
line-height: 30px;
color: #959595;
}
main .main-article p {
font-size: 18px;
margin-top: 25px;
}
main .main-article button {
border: none;
background-color: #e67e22;
color: #fff;
padding: 10px;
cursor: pointer;
margin: 30px 0;
}
main .main-article section {
border-top: 1px solid #ebebeb;
padding-top: 20px;
}
main .main-article section i {
margin-right: 10px;
}写到这里，文章的主体部分也就是完了，但是这个时候它是不具备响应式的，也就是当它大于某一值的时候应该是占据栅格的某一部分而不是整行
这里就直接利用上面已经写好的栅格进行
<main class="row">
<div class="col-lg-8">
文章内容
</div>
</main>.....
页脚区域：
<!-- 页脚区域 -->
<div class="foot">
<div class="foot-wrapper row">
<div class="foot-item col-lg-4">
<h3>友链</h3>
<div>
<a href="#">Bootstrap中文网</a>
<a href="#">React</a>
<a href="#">Vue.js</a>
<a href="#">Svelte</a>
<a href="#">Preact</a>
<a href="#">Babel</a>
<a href="#">Webpack</a>
<a href="#">Rollup.js</a>
<a href="#">Bootstrap中文网</a>
<a href="#">React</a>
<a href="#">Vue.js</a>
<a href="#">Svelte</a>
<a href="#">Preact</a>
<a href="#">Babel</a>
<a href="#">Webpack</a>
<a href="#">Rollup.js</a>
</div>
</div>
<div class="foot-item col-lg-4">
<h3>标签云</h3>
<div>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">Ghost 0.7 版本</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">Ghost 0.7 版本</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
</div>
</div>
<div class="foot-item col-lg-4">
<h3>合作伙伴</h3>
<div>
<a href="#">腾讯</a>
<a href="#">阿里巴巴</a>
<a href="#">百度</a>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright Ghost中文网 | 京ICP备11008151号-11 | 京公网安备11010802014853</p>
</div>/*页脚区域*/
.foot {
background-color: #202020;
margin-top: 35px;
padding-top: 35px;
overflow: hidden;
.foot-wrapper {
width: $container;
margin: 0 auto;
.foot-item {
padding: 0 30px;
margin-bottom: 30px;
h3 {
color: #fff;
font-size: 22px;
padding-bottom: 10px;
border-bottom: 1px #ccc solid;
position: relative;
&::after {
position: absolute;
left: 0;
bottom: -1px;
content: "";
width: 90px;
height: 1px;
background-color: #e67e22;
}
}
div {
margin-top: 20px;
a {
margin: 10px;
display: inline-block;
color: #959595;
}
}
}
}
}
.copyright {
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
color: #555;
}效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 头部区域 -->
<header>
<a href="">
<img src="./img/ghost-logo.png" alt="">
</a>
</header>
<!-- 导航区域 -->
<nav>
<!-- 导航图标 -->
<div class="nav-bar">
<label for="nav-toggle">
<i class="iconfont icon-zhedie"></i>
</label>
</div>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<!-- 导航内容区域 -->
<ul class="nav-list">
<li class="active"><a href="">首页</a></li>
<li><a href="">论坛</a></li>
<li><a href="">快捷手册</a></li>
<li><a href="">中文文档</a></li>
<li><a href="">关于</a></li>
</ul>
</nav>
<!-- 文章列表即主体内容部分 -->
<main class="row">
<div class="col-lg-8">
<div class="main-article">
<h2>
全新的 Ghost 文档上线
</h2>
<div>
<span>作者：王赛</span> • <span>2018年11月20日</span>
</div>
<p>
我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>，
<a href="#">客户端</a>
</section>
</div>
<div class="main-article">
<h2>
全新的 Ghost 文档上线
</h2>
<div>
<span>作者：王赛</span> • <span>2018年11月20日</span>
</div>
<p>
我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>，
<a href="#">客户端</a>
</section>
</div>
<div class="main-article">
<h2>
全新的 Ghost 文档上线
</h2>
<div>
<span>作者：王赛</span> • <span>2018年11月20日</span>
</div>
<p>
我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>，
<a href="#">客户端</a>
</section>
</div>
</div>
<!-- 侧边栏 -->
<div class="col-lg-4">
<div class="main-aside">
<h3>声明</h3>
<p>Ghost 中文版不再继续维护，请去官方下载。</p>
</div>
<div class="main-aside">
<h3>下载</h3>
<button>Ghost最新版</button>
</div>
<div class="main-aside">
<h3>标签云</h3>
<div>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">Ghost 0.7 版本</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">Ghost 0.7 版本</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
</div>
</div>
</div>
</main>
<!-- 页脚区域 -->
<div class="foot">
<div class="foot-wrapper row">
<div class="foot-item col-lg-4">
<h3>友链</h3>
<div>
<a href="#">Bootstrap中文网</a>
<a href="#">React</a>
<a href="#">Vue.js</a>
<a href="#">Svelte</a>
<a href="#">Preact</a>
<a href="#">Babel</a>
<a href="#">Webpack</a>
<a href="#">Rollup.js</a>
<a href="#">Bootstrap中文网</a>
<a href="#">React</a>
<a href="#">Vue.js</a>
<a href="#">Svelte</a>
<a href="#">Preact</a>
<a href="#">Babel</a>
<a href="#">Webpack</a>
<a href="#">Rollup.js</a>
</div>
</div>
<div class="foot-item col-lg-4">
<h3>标签云</h3>
<div>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">Ghost 0.7 版本</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">Ghost 0.7 版本</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
</div>
</div>
<div class="foot-item col-lg-4">
<h3>合作伙伴</h3>
<div>
<a href="#">腾讯</a>
<a href="#">阿里巴巴</a>
<a href="#">百度</a>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright Ghost中文网 | 京ICP备11008151号-11 | 京公网安备11010802014853</p>
</div>
</body>
</html>@charset "utf-8";
/* --------------------重置样式-------------------------------- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {
margin : 0;
padding: 0
}
/*设置默认字体*/
body {
font-size : 14px;
font-style : normal;
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}
/*字体太小用户体检不好，让small恢复12px*/
small {
font-size: 12px
}
h1 {
font-size: 18px
}
h2 {
font-size: 16px
}
h3 {
font-size: 14px
}
h4,
h5,
h6 {
font-size: 100%
}
ul,
ol {
list-style: none
}
a {
text-decoration : none;
background-color: transparent
}
a:hover,
a:active {
outline-width : 0;
text-decoration: none
}
/*重置表格*/
table {
border-collapse: collapse;
border-spacing : 0
}
/*重置hr*/
hr {
border: 0;
height: 1px
}
/*图形图片*/
img {
border-style: none
}
img:not([src]) {
display: none
}
svg:not(:root) {
overflow: hidden
}
/*下面的操作是针对于html5页面布局准备的，不支持ie6~8以及其他低版本的浏览器*/
html {
/*禁用系统默认菜单*/
-webkit-touch-callout : none;
/*关闭iphone & Android的浏览器纵向和横向模式中自动调整字体大小的功能*/
-webkit-text-size-adjust: 100%
}
input,
textarea,
button,
a {
/*表单或者a标签在手机点击时会出现边框或彩色的背景区域，意思是去除点击背景框*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
/*重置html5元素的默认样式*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block
}
audio:not([controls]),
video:not([controls]) {
display: none;
height : 0
}
progress {
vertical-align: baseline
}
mark {
background-color: #ff0;
color : #000
}
sub,
sup {
position : relative;
font-size : 75%;
line-height : 0;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
button,
input,
select,
textarea {
font-size: 100%;
outline : 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
textarea {
overflow: auto
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding : 0
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding : 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset : -2px
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color : inherit;
opacity: .54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font : inherit
}@charset "UTF-8";
body {
background-color: #ebebeb;
}
a {
color: #505050;
}
/*栅格*/
.row {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.row > [class*="col"] {
grid-area: auto/auto/auto/span 12;
}
.row .col-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-12 {
grid-area: auto/auto/auto/span 12;
}
@media (min-width: 576px) {
.row .col-sm-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-sm-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-sm-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-sm-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-sm-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-sm-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-sm-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-sm-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-sm-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-sm-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-sm-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-sm-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 768px) {
.nav-bar {
display: none;
}
.nav-list {
display: flex !important;
justify-content: center;
justify-items: center;
}
.row .col-md-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-md-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-md-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-md-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-md-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-md-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-md-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-md-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-md-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-md-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-md-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-md-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 992px) {
.row > [class*="col"] {
padding: 0 15px;
}
.row .col-lg-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-lg-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-lg-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-lg-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-lg-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-lg-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-lg-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-lg-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-lg-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-lg-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-lg-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-lg-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 1200px) {
.row > [class*="col"] {
padding: 0 15px;
}
.row .col-xl-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-xl-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-xl-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-xl-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-xl-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-xl-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-xl-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-xl-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-xl-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-xl-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-xl-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-xl-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 1400px) {
.row .col-xxl-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-xxl-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-xxl-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-xxl-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-xxl-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-xxl-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-xxl-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-xxl-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-xxl-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-xxl-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-xxl-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-xxl-12 {
grid-area: auto/auto/auto/span 12;
}
}
/*头部区域*/
header {
height: 190px;
background: #fff;
/*利用弹性布局，让logo能够水平垂直居中*/
display: flex;
justify-content: center;
align-items: center;
}
header a img {
width: 200px;
}
/*导航区域*/
nav {
border-top: 1px solid #ebebeb;
border-bottom: 2px solid #ebebeb;
background-color: #fff;
padding: 0 15px;
}
nav .nav-bar {
height: 56px;
/*利用弹性布局，让导航能够水平垂直居中*/
display: flex;
justify-content: center;
align-items: center;
}
nav .nav-bar i {
cursor: pointer;
}
nav .nav-toggle {
display: none;
}
nav .nav-toggle:checked + .nav-list {
display: block;
}
nav .nav-list {
display: none;
}
nav .nav-list li {
height: 56px;
line-height: 56px;
padding: 0 21px;
position: relative;
}
nav .nav-list li.active::after {
content: "";
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 2px;
background-color: #e67e22;
}
/*文章列表即主体内容部分*/
main {
padding: 0 15px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
/*侧边栏*/
}
main .main-article {
margin-top: 35px;
background-color: #fff;
padding: 35px;
line-height: 1.5;
}
main .main-article h2 {
font-size: 35px;
text-align: center;
font-weight: 400;
}
main .main-article div {
text-align: center;
line-height: 30px;
color: #959595;
}
main .main-article p {
font-size: 18px;
margin-top: 25px;
}
main .main-article button {
border: none;
background-color: #e67e22;
color: #fff;
padding: 10px;
cursor: pointer;
margin: 30px 0;
}
main .main-article section {
border-top: 1px solid #ebebeb;
padding-top: 20px;
}
main .main-article section i {
margin-right: 10px;
}
main .main-aside {
margin-top: 35px;
padding: 35px;
background-color: #fff;
}
main .main-aside h3 {
font-size: 20px;
font-weight: 400;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
position: relative;
}
main .main-aside h3::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 90px;
height: 1px;
background-color: #e67e22;
}
main .main-aside p {
margin-top: 30px;
}
main .main-aside button {
width: 100%;
border: none;
background: #e67e22;
color: #fff;
padding: 10px;
cursor: pointer;
margin-top: 30px;
}
main .main-aside div {
margin-top: 20px;
}
main .main-aside div a {
border: 1px solid #ebebeb;
display: inline-block;
margin: 11px 7px 0 0;
padding: 5px 10px;
}
/*页脚区域*/
.foot {
background-color: #202020;
margin-top: 35px;
padding-top: 35px;
overflow: hidden;
}
.foot .foot-wrapper {
width: 100%;
margin: 0 auto;
}
.foot .foot-wrapper .foot-item {
padding: 0 30px;
margin-bottom: 30px;
}
.foot .foot-wrapper .foot-item h3 {
color: #fff;
font-size: 22px;
padding-bottom: 10px;
border-bottom: 1px #ccc solid;
position: relative;
}
.foot .foot-wrapper .foot-item h3::after {
position: absolute;
left: 0;
bottom: -1px;
content: "";
width: 90px;
height: 1px;
background-color: #e67e22;
}
.foot .foot-wrapper .foot-item div {
margin-top: 20px;
}
.foot .foot-wrapper .foot-item div a {
margin: 10px;
display: inline-block;
color: #959595;
}
.copyright {
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
color: #555;
}
:root{
--container: 100%;
}
body{
background: #ebebeb;
}
a{
color: #505050;
}
.head{
height: 190px;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.head-logo{
width: 200px;
}
.nav{
border-top: 1px #ebebeb solid;
border-bottom: 2px #e1e1e1 solid;
background: white;
padding: 0 15px;
}
.nav-bar{
height: 56px;
display: flex;
justify-content: center;
align-items: center;
}
.nav-bar i{
cursor: pointer;
}
.nav-list{
display: none;
}
.nav-list li{
height: 56px;
line-height: 56px;
position: relative;
padding:0 21px;
}
.nav-list li.active::after{
content: "";
position: absolute;
left:0;
bottom:0;
width: 100%;
height: 2px;
background: #e67e22;
}
.nav-toggle{
display: none;
}
.nav-toggle:checked + .nav-list{
display: block;
}
.main{
padding: 0 15px;
width: var(--container);
margin: 0 auto;
box-sizing: border-box;
}
.main-article{
margin-top: 35px;
background: white;
padding: 35px;
line-height: 1.5;
}
.main-article h2{
font-size: 35px;
text-align: center;
font-weight: 400;
}
.main-article div{
text-align: center;
color: #959595;
}
.main-article p{
margin-top:25px;
font-size:18px;
}
.main-article button{
border:none;
background: #e67e22;
color: white;
padding:10px;
cursor: pointer;
margin: 30px 0;
}
.main-article section{
border-top:1px #ebebeb solid;
padding-top:20px;
}
.main-article section i{
margin-right: 10px;
}
.main-aside{
background: white;
padding:35px;
margin-top:35px;
}
.main-aside h3{
font-size: 20px;
font-weight: 400;
padding-bottom: 10px;
border-bottom: 1px #cccccc solid;
position: relative;
}
.main-aside h3::after{
content:"";
position: absolute;
left:0;
bottom:-1px;
width: 90px;
height: 1px;
background: #e67e22;
}
.main-aside p{
margin-top:30px;
}
.main-aside button{
border:none;
background: #e67e22;
color: white;
padding:10px;
cursor: pointer;
margin-top: 30px;
width: 100%;
}
.main-aside div {
margin-top: 20px;
}
.main-aside div a{
border:1px #ebebeb solid;
display: inline-block;
margin:11px 7px 0 0;
padding:5px 10px;
}
.foot{
margin-top: 35px;
padding-top:35px;
background: #202020;
overflow: hidden;
}
.foot-wrapper{
width: var(--container);
margin: 0 auto;
}
.foot-item{
padding:0 30px;
margin-bottom: 30px;
}
.foot-item h3{
color: white;
font-size: 22px;
font-weight: 400;
padding-bottom: 10px;
border-bottom: 1px #cccccc solid;
position: relative;
}
.foot-item h3::after{
content:"";
position: absolute;
left:0;
bottom:-1px;
width: 90px;
height: 1px;
background: #e67e22;
}
.foot-item div{
margin-top: 20px;
}
.foot-item div a{
margin:10px;
display: inline-block;
color: #959595;
}
.copyright{
background: #111111;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
color: #555555;
}
.row{
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.row>[class*="col"]{
grid-area: auto/auto/auto/span 12;
}
.row .col-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-12{
grid-area: auto/auto/auto/span 12;
}
@media (min-width: 576px){
.row .col-sm-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-sm-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-sm-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-sm-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-sm-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-sm-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-sm-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-sm-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-sm-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-sm-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-sm-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-sm-12{
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 768px){
.nav-bar{
display: none;
}
.nav-list{
display: flex !important;
justify-content: center;
justify-items: center;
}
.row .col-md-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-md-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-md-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-md-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-md-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-md-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-md-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-md-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-md-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-md-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-md-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-md-12{
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 992px){
:root{
--container: 940px;
}
.row>[class*="col"]{
padding: 0 15px;
}
.row .col-lg-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-lg-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-lg-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-lg-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-lg-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-lg-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-lg-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-lg-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-lg-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-lg-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-lg-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-lg-12{
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 1200px){
:root{
--container: 1160px;
}
.row>[class*="col"]{
padding: 0 15px;
}
.row .col-xl-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-xl-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-xl-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-xl-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-xl-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-xl-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-xl-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-xl-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-xl-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-xl-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-xl-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-xl-12{
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width: 1400px){
.row .col-xxl-1{
grid-area: auto/auto/auto/span 1;
}
.row .col-xxl-2{
grid-area: auto/auto/auto/span 2;
}
.row .col-xxl-3{
grid-area: auto/auto/auto/span 3;
}
.row .col-xxl-4{
grid-area: auto/auto/auto/span 4;
}
.row .col-xxl-5{
grid-area: auto/auto/auto/span 5;
}
.row .col-xxl-6{
grid-area: auto/auto/auto/span 6;
}
.row .col-xxl-7{
grid-area: auto/auto/auto/span 7;
}
.row .col-xxl-8{
grid-area: auto/auto/auto/span 8;
}
.row .col-xxl-9{
grid-area: auto/auto/auto/span 9;
}
.row .col-xxl-10{
grid-area: auto/auto/auto/span 10;
}
.row .col-xxl-11{
grid-area: auto/auto/auto/span 11;
}
.row .col-xxl-12{
grid-area: auto/auto/auto/span 12;
}
}版权声明
本文为[小白小白从不日白]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_43285360/article/details/124184339
边栏推荐
- CC10000. CloudJenkins—————————————
- Implementation of pure student information linked list system in C Have you learned
- Surfaceview high performance rendering (V) code practice - let the drawn picture move
- Integrating sdl2 with ffmpeg to realize texture rendering of random blocks
- Map Object WeakMap
- Add log4j log function
- 1150: 数数多少个整数
- Handler asynchronous message passing mechanism (2) create handler in sub thread
- [paper reading] [iccv 2021] rpnet: learning inner group relations on point clouds
- 1169: large integer (pointer)
猜你喜欢
Ue5 little knowledge point animation blueprint interface cannot copy new in editor
事务的隔离级别与MVCC
CC00000. CloudJenkins—————————————
【ACM】131. 分割回文串
![BUUCTF[HCTF 2018]WarmUp](/img/89/5d7d147dfb8e2bc10a2ff0bb68debe.png)
BUUCTF[HCTF 2018]WarmUp
Open3d读写ply点云文件
2022 tea artist (primary) examination questions and online simulation examination
2022 t elevator repair test questions and online simulation test
Open3d reads and writes ply point cloud files
Binary tree knowledge
随机推荐
Integrating sdl2 with ffmpeg to realize texture rendering of random blocks
SurfaceView高性能绘制（五）代码实践篇-让绘制的图片运动
Multithreaded copy set (New 4)
1146: eat candy
2017我也开始真正写CSDN博客（新浪网易转战CSDN）
Characteristics of interactive multimedia applications
Penetration test - get the system fofa keyword to brush the hole
Worker man passes parameters to the method in timer
编程如何提高自己的水平能力？学编程最重要的是什么？请看凡人浅谈如何学C
Remove linked list elements ＜ difficulty coefficient ＞
数据库有张表，其中一个字段存的是json数据，我需要在这张表有更新的时候，解析这个字符串，然后把解析的json数据更新到另外一个表，有什么好的建议？
1157: n consecutive ones
【ACM】131. Split palindrome string
[CTF. Show. Reverse] reverse AK race easydse
1147: 查找子数组
Pipy MQTT 代理之（三）Logging
ShardingSphere简介
Pys1: Overview
Opencv -- separate color channel, image contrast, brightness adjustment, discrete Fourier transform (10)
1164: string encryption