抽离分类css、创建留言模板
This commit is contained in:
xieYj
parent
fe5954e0a5
commit
c27f332cea
125
category.php
125
category.php
@ -10,129 +10,15 @@
|
||||
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
|
||||
$this->need('base/header.php');
|
||||
?>
|
||||
|
||||
<!--分类css-->
|
||||
<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('static/css/custom/category.css'); ?>">
|
||||
<main class="content" style="min-height: 49px;">
|
||||
<style>.chip-container .tag-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around
|
||||
}
|
||||
|
||||
.chip-container .tag-chips a {
|
||||
margin: 0 7px 10px
|
||||
}
|
||||
|
||||
.chip-container .chip {
|
||||
max-width: calc(100% / 4);
|
||||
min-width: 10em;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
transition: .5s linear;
|
||||
padding: 19px 0;
|
||||
line-height: 20px;
|
||||
z-index: 990;
|
||||
border-radius: 5px 15px 15px 5px;
|
||||
transform-origin: left center 0
|
||||
}
|
||||
|
||||
.chip-container .notebook-cover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: calc(100% + 2px);
|
||||
top: -1px;
|
||||
z-index: 100;
|
||||
border-radius: 2px;
|
||||
right: 25px;
|
||||
transition: 2s ease;
|
||||
background: linear-gradient(to right, #1e606e 0, #2e95aa 12%, #1e606e 25%, #2e95aa 37%, #1e606e 50%, #2e95aa 62%, #1e606e 75%, #2e95aa 87%, #1e606e 100%)
|
||||
}
|
||||
|
||||
.chip .notebook-skin {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background: #e8e8e0;
|
||||
margin-top: 42px;
|
||||
padding: 10px 32px 64px 10px;
|
||||
font-size: 19px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
color: #222;
|
||||
text-align: left;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2)
|
||||
}
|
||||
|
||||
.chip .notebook-skin:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #cddc39
|
||||
}
|
||||
|
||||
.notebook-cover {
|
||||
background: #cc4b48;
|
||||
height: 200px;
|
||||
width: 140px;
|
||||
position: absolute;
|
||||
border-radius: 5px 15px 15px 5px;
|
||||
z-index: 10;
|
||||
transition: .5s linear;
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: left center 0
|
||||
}
|
||||
|
||||
.moleskine-wrapper {
|
||||
max-width: calc(100% / 4);
|
||||
min-width: 10em
|
||||
}
|
||||
|
||||
.moleskine-notebook:hover .notebook-cover {
|
||||
transform: rotateY(-50deg);
|
||||
z-index: 99;
|
||||
box-shadow: 20px 10px 50px rgba(0, 0, 0, .2)
|
||||
}
|
||||
|
||||
.moleskine-notebook {
|
||||
height: 200px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
transition: .5s linear;
|
||||
border-radius: 5px 15px 15px 5px;
|
||||
transform-origin: left center 0
|
||||
}
|
||||
|
||||
.moleskine-notebook:hover {
|
||||
transform: rotateZ(-10deg)
|
||||
}
|
||||
|
||||
.notebook-page.dotted {
|
||||
background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
|
||||
background-size: 100% 10px
|
||||
}
|
||||
|
||||
.chip-container .chip:hover {
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.notebook-page {
|
||||
height: 100%;
|
||||
width: 140px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
background-color: #fbfae8;
|
||||
z-index: 0;
|
||||
border-radius: 5px 16px 16px 5px;
|
||||
overflow: hidden
|
||||
}</style>
|
||||
<div id="category-cloud" class="container chip-container">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="tag-chips"><a href="/categories/Linux/" class="wenzhs" title="Linux : 12">
|
||||
<div class="tag-chips">
|
||||
<a href="/categories/Linux/" class="wenzhs" title="Linux : 12">
|
||||
<div class="moleskine-wrapper">
|
||||
<div class="moleskine-notebook">
|
||||
<div class="chip notebook-cover center-align waves-effect waves-light chip-active"
|
||||
@ -142,7 +28,8 @@ $this->need('base/header.php');
|
||||
<div class="notebook-page dotted"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a><a href="/categories/SpringBoot/" class="wenzhs" title="SpringBoot : 15">
|
||||
</a>
|
||||
<a href="/categories/SpringBoot/" class="wenzhs" title="SpringBoot : 15">
|
||||
<div class="moleskine-wrapper">
|
||||
<div class="moleskine-notebook">
|
||||
<div class="chip notebook-cover center-align waves-effect waves-light chip-default"
|
||||
|
||||
3432
contact.php
Normal file
3432
contact.php
Normal file
File diff suppressed because it is too large
Load Diff
118
static/css/custom/category.css
Normal file
118
static/css/custom/category.css
Normal file
@ -0,0 +1,118 @@
|
||||
/*分类的css*/
|
||||
.chip-container .tag-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around
|
||||
}
|
||||
|
||||
.chip-container .tag-chips a {
|
||||
margin: 0 7px 10px
|
||||
}
|
||||
|
||||
.chip-container .chip {
|
||||
max-width: calc(100% / 4);
|
||||
min-width: 10em;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
transition: .5s linear;
|
||||
padding: 19px 0;
|
||||
line-height: 20px;
|
||||
z-index: 990;
|
||||
border-radius: 5px 15px 15px 5px;
|
||||
transform-origin: left center 0
|
||||
}
|
||||
|
||||
.chip-container .notebook-cover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: calc(100% + 2px);
|
||||
top: -1px;
|
||||
z-index: 100;
|
||||
border-radius: 2px;
|
||||
right: 25px;
|
||||
transition: 2s ease;
|
||||
background: linear-gradient(to right, #1e606e 0, #2e95aa 12%, #1e606e 25%, #2e95aa 37%, #1e606e 50%, #2e95aa 62%, #1e606e 75%, #2e95aa 87%, #1e606e 100%)
|
||||
}
|
||||
|
||||
.chip .notebook-skin {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background: #e8e8e0;
|
||||
margin-top: 42px;
|
||||
padding: 10px 32px 64px 10px;
|
||||
font-size: 19px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
color: #222;
|
||||
text-align: left;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2)
|
||||
}
|
||||
|
||||
.chip .notebook-skin:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #cddc39
|
||||
}
|
||||
|
||||
.notebook-cover {
|
||||
background: #cc4b48;
|
||||
height: 200px;
|
||||
width: 140px;
|
||||
position: absolute;
|
||||
border-radius: 5px 15px 15px 5px;
|
||||
z-index: 10;
|
||||
transition: .5s linear;
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: left center 0
|
||||
}
|
||||
|
||||
.moleskine-wrapper {
|
||||
max-width: calc(100% / 4);
|
||||
min-width: 10em
|
||||
}
|
||||
|
||||
.moleskine-notebook:hover .notebook-cover {
|
||||
transform: rotateY(-50deg);
|
||||
z-index: 99;
|
||||
box-shadow: 20px 10px 50px rgba(0, 0, 0, .2)
|
||||
}
|
||||
|
||||
.moleskine-notebook {
|
||||
height: 200px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
transition: .5s linear;
|
||||
border-radius: 5px 15px 15px 5px;
|
||||
transform-origin: left center 0
|
||||
}
|
||||
|
||||
.moleskine-notebook:hover {
|
||||
transform: rotateZ(-10deg)
|
||||
}
|
||||
|
||||
.notebook-page.dotted {
|
||||
background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
|
||||
background-size: 100% 10px
|
||||
}
|
||||
|
||||
.chip-container .chip:hover {
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.notebook-page {
|
||||
height: 100%;
|
||||
width: 140px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
background-color: #fbfae8;
|
||||
z-index: 0;
|
||||
border-radius: 5px 16px 16px 5px;
|
||||
overflow: hidden
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user