html wp主题,WordPress主题 B2 美化Html引导卡片

B2主题柒比贰主题美化Html引导卡片,底部客服引导样式。

效果如图：

使用方法：首页新建广告位模块，将代码直接复制进去即可！

几分钟，让您属于自己的站点

发现优质源码，路人丁网欢迎您的加入！

• 主题咨询

• 成为会员

如果点击咨询购买按钮无法唤起QQ(请注明主题咨询)

.buy-container {

color: #ccc;

padding: 60px 40px 50px 40px;

margin: 0 auto;

background: rgb(224,32,140);

/*下述两行代码为兼容浏览器用，建议同步修改，亦可删除(不建议)*/

background: -moz-linear-gradient(left, rgb(224,32,140) 0%, rgb(250,100,0) 100%);

background: -webkit-linear-gradient(left, rgb(224,32,140) 0%,rgb(250,100,0) 100%);

/*请更改此行代码，颜色为rgb模式*/

background: linear-gradient(to right, rgb(224,32,140) 0%, rgb(250,100,0) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;

}

.buy-container .buy-box {

display: -webkit-box;

display: flex;

-webkit-box-pack: justify;

justify-content: space-between;

-webkit-box-align: center;

align-items: center;

max-width: 900px;

margin: 0 auto;

}

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

.buy-container .buy-box {

display: block;

text-align: center;

}

.buy-container .buy-box .slogan {

margin-bottom: 30px;

}

}

.buy-container .buy-box .slogan h3 {

color: #fff;

font-size: 26px;

margin: 0 0 10px 0;

}

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

.buy-container .buy-box .slogan h3 {

font-size: 24px;

}

}

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

.buy-container .buy-box .slogan h3 {

font-size: 20px;

}

}

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

.buy-container .buy-box .slogan h3 {

font-size: 18px;

}

}

.buy-container .buy-box .slogan p {

color: #fff;

font-size: 14px;

font-weight: bold;

margin: 10px 0;

}

.buy-container .buy-box .actions {

display: -webkit-box;

display: flex;

-webkit-box-align: center;

align-items: center;

list-style-type: none;

margin: 0;

padding: 0;

}

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

.buy-container .buy-box .actions {

-webkit-box-pack: justify;

justify-content: center;

}

}

.buy-container .buy-box .actions li {

margin: 0;

}

.buy-container .buy-box .actions li:last-child {

margin-left: 10px;

}

.buy-container .buy-box .actions li a {

position: relative;

color: #fff !important;

font-size: 14px;

font-weight: bold;

line-height: 1;

text-decoration: none;

padding: 10px 20px;

background-color: rgba(255, 255, 255, .1);

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-o-border-radius: 4px;

border-radius: 4px;

-webkit-transition: .2s;

-moz-transition: .2s;

-o-transition: .2s;

transition: .2s;

}

.buy-container .buy-box .actions li a:hover {

-webkit-transform: translateY(-2px);

-moz-transform: translateY(-2px);

-o-transform: translateY(-2px);

transform: translateY(-2px);

-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);

-moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);

-o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);

box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);

opacity: 1 !important;

}

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

.buy-container .buy-box .actions li a {

font-size: 12px;

}

}

.buy-container .buy-box .actions li a:not(.primary):before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

-webkit-box-shadow: inset 0 0 0 1px currentColor;

-moz-box-shadow: inset 0 0 0 1px currentColor;

-o-box-shadow: inset 0 0 0 1px currentColor;

box-shadow: inset 0 0 0 1px currentColor;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-o-border-radius: 4px;

border-radius: 4px;

-khtml-opacity: .3;

-moz-opacity: .3;

opacity: .3;

}

.buy-container .buy-box .actions li a:after {

display: none;

}

.buy-container .buy-box .actions li a.primary {

color: #ff3b30 !important;

background-color: #fff;

}

.buy-container .tips {

border-top: 1px solid rgba(255, 255, 255, .1);

display: block;

color: #fff;

font-size: 12px;

text-align: center;

max-width: 900px;

margin: 30px auto 0 auto;

padding-top: 30px;

}