wordpress自适应标签页刷新一次变一次标签底色不负君虚拟资源分享部落

以下两个代码合一起，新建一个TAG标签页

1

<?php get_header(); ?>


<style>

.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}
.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;background-image:none;border-color:#204d74}
.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}
.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}
.btn-primary .badge{color:#337ab7;background-color:#fff}

.btn {
    align-items: center;
    background-color: #0006;
    color: #fff;
    display: flex;
    font-size: 18px;
    justify-content: center;
    transition: background-color .2s;
}

.btn {
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    border-radius: 6px;
}


.btn {
	display:inline-block;
	margin-bottom:0;
	padding:10px 15px 10px;
	border:0;
	vertical-align:middle;
	text-align:center;
	font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
	cursor:pointer
}

.sitecolor_1 {
	background-color:#32b9b5
}
.sitecolor_2 {
	background-color:#f79d2d
}
.sitecolor_3 {
	background-color:#63b931
}
.sitecolor_4 {
	background-color:#f37c3d
}
.sitecolor_5 {
	background-color:#01508a
}
.sitecolor_6 {
	background-color:#d6b572
}
.sitecolor_7 {
	background-color:#f46d78
}
.sitecolor_8 {
	background-color:#f70044
}
.sitecolor_9 {
	background-color:#1065e6
}
.sitecolor_10 {
	background-color:#11cd86
}
.sitecolor_11 {
	background-color:#066fa5
}
.sitecolor_12 {
	background-color:#1098f7
}
.sitecolor_13 {
	background-color:#f40076
}
.sitecolor_14 {
	background-color:#51c1f0
}



@media screen and (max-width: 600px) {
    .gird-8{
		grid-template-columns: repeat(2,[col-start] 1fr);
		grid-gap: 10px;
	}

}

@media screen and (min-width: 600px) {
    .gird-8{
		grid-template-columns: repeat(4,[col-start] 1fr);
		grid-gap: 10px;
	}

}


@media screen and (min-width: 900px) {
    .gird-8{
		grid-template-columns: repeat(6,[col-start] 1fr);
		grid-gap: 10px;
	}

}

@media screen and (min-width: 1200px) {
    .gird-8{
		grid-template-columns: repeat(8,[col-start] 1fr);
		grid-gap: 10px;
	}

}


.gird-6{
	grid-template-columns: repeat(6,[col-start] 1fr);
	grid-gap: 14px;
}


.tag-bg {
   background: #f3f3f3;
    color: #717171;
    font-size: 15px;
}

.gird-cover.tag-bg:hover {
    background: black;
    color:white;
}


.gird-a p {
    margin: 16px 0;
    padding: 0px 10px;
    font-size: 14px;
}



.gird {
    display: grid;
    padding-left: 12px;
    padding-right: 12px;
      margin-bottom: 0;
    margin-top: 0;
}



.gird-item{
display: flex; 
    flex-direction: column;
}

.gird-a {
  
    overflow: hidden;
}

.gird-a p{
        margin: 16px 0;
}

.gird-imgdiv {
    position: relative;
}

.gird-imgdiv {
    position: relative;
}

.gird-cover {
    align-items: center;
    background-color: #0006;
    color: #fff;
    display: flex;
    font-size: 18px;
    justify-content: center;
    transition: background-color .2s;
}

.gird-cover {
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    border-radius: 6px;
}

 .gird-img {
    height: 100%;
}

.gird-img {
    left: 0;
    position: absolute;
    width: 100%;
      border-radius: 6px;
}


.container-small{ width: 90%;margin:0 auto;}
.say {
    margin-top: 70px;
}

.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}
@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}
@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}
.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}
.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}
.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}
.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}

.container-title{
    padding:15px 0px;
}

</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

<?php get_header(); ?>

<style>

.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}

.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}

.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}

.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;background-image:none;border-color:#204d74}

.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}

.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}

.btn-primary .badge{color:#337ab7;background-color:#fff}

.btn {

align-items: center;

background-color: #0006;

color: #fff;

display: flex;

font-size: 18px;

justify-content: center;

transition: background-color .2s;

}

.btn {

height: 100%;

left: 0;

position: absolute;

right: 0;

top: 0;

width: 100%;

border-radius: 6px;

}

.btn {

display:inline-block;

margin-bottom:0;

padding:10px 15px 10px;

border:0;

vertical-align:middle;

text-align:center;

font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;

cursor:pointer

}

.sitecolor_1 {

background-color:#32b9b5

}

.sitecolor_2 {

background-color:#f79d2d

}

.sitecolor_3 {

background-color:#63b931

}

.sitecolor_4 {

background-color:#f37c3d

}

.sitecolor_5 {

background-color:#01508a

}

.sitecolor_6 {

background-color:#d6b572

}

.sitecolor_7 {

background-color:#f46d78

}

.sitecolor_8 {

background-color:#f70044

}

.sitecolor_9 {

background-color:#1065e6

}

.sitecolor_10 {

background-color:#11cd86

}

.sitecolor_11 {

background-color:#066fa5

}

.sitecolor_12 {

background-color:#1098f7

}

.sitecolor_13 {

background-color:#f40076

}

.sitecolor_14 {

background-color:#51c1f0

}

@media screen and (max-width: 600px) {

.gird-8{

grid-template-columns: repeat(2,[col-start] 1fr);

grid-gap: 10px;

}

@media screen and (min-width: 600px) {

.gird-8{

grid-template-columns: repeat(4,[col-start] 1fr);

grid-gap: 10px;

}

@media screen and (min-width: 900px) {

.gird-8{

grid-template-columns: repeat(6,[col-start] 1fr);

grid-gap: 10px;

}

@media screen and (min-width: 1200px) {

.gird-8{

grid-template-columns: repeat(8,[col-start] 1fr);

grid-gap: 10px;

}

.gird-6{

grid-template-columns: repeat(6,[col-start] 1fr);

grid-gap: 14px;

}

.tag-bg {

background: #f3f3f3;

color: #717171;

font-size: 15px;

}

.gird-cover.tag-bg:hover {

background: black;

color:white;

}

.gird-a p {

margin: 16px 0;

padding: 0px 10px;

font-size: 14px;

}

.gird {

display: grid;

padding-left: 12px;

padding-right: 12px;

margin-bottom: 0;

margin-top: 0;

}

.gird-item{

display: flex;

flex-direction: column;

}

.gird-a {

overflow: hidden;

}

.gird-a p{

margin: 16px 0;

}

.gird-imgdiv {

position: relative;

}

.gird-imgdiv {

position: relative;

}

.gird-cover {

align-items: center;

background-color: #0006;

color: #fff;

display: flex;

font-size: 18px;

justify-content: center;

transition: background-color .2s;

}

.gird-cover {

height: 100%;

left: 0;

position: absolute;

right: 0;

top: 0;

width: 100%;

border-radius: 6px;

}

.gird-img {

height: 100%;

}

.gird-img {

left: 0;

position: absolute;

width: 100%;

border-radius: 6px;

}

.container-small{ width: 90%;margin:0 auto;}

.say {

margin-top: 70px;

}

.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}

.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}

@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}

@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}

.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}

.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}

.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}

.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}

.container-title{

padding:15px 0px;

}

</style>

2

您需要先支付 10元 才能查看此处内容！立即支付

以下两个代码合一起，新建一个TAG标签页

1

2

效果