柒比贰美化-首页cms布局的样式修改代码

<span class="hljs-comment">/*buju*/</span>
&nbsp;
@<span class="hljs-keyword">media</span> (min-width: <span class="hljs-number">992px</span>) {
    .post-list.content-card .cart-list {
        <span class="hljs-attribute">-webkit-transition</span>: all <span class="hljs-number">0.3s</span> ease;
        <span class="hljs-attribute">-moz-transition</span>: all <span class="hljs-number">0.3s</span> ease;
        <span class="hljs-attribute">-o-transition</span>: all <span class="hljs-number">0.3s</span> ease;
        <span class="hljs-attribute">transition</span>: all <span class="hljs-number">0.3s</span> ease;
    }
    .post-list.content-card .cart-list:hover {
        <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(-6px);
        <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">translateY</span>(-6px);
        <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">translateY</span>(-6px);
        <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">26px</span> <span class="hljs-number">40px</span> -<span class="hljs-number">24px</span> <span class="hljs-built_in">rgba</span>(0, 36, 100, 0.3);
        <span class="hljs-attribute">-webkit-box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">26px</span> <span class="hljs-number">40px</span> -<span class="hljs-number">24px</span> <span class="hljs-built_in">rgba</span>(0, 36, 100, 0.3);
        <span class="hljs-attribute">-moz-box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">26px</span> <span class="hljs-number">40px</span> -<span class="hljs-number">24px</span> <span class="hljs-built_in">rgba</span>(0, 36, 100, 0.3);
        <span class="hljs-attribute">-webkit-transition</span>: all <span class="hljs-number">0.3s</span> ease;
        <span class="hljs-attribute">-moz-transition</span>: all <span class="hljs-number">0.3s</span> ease;
        <span class="hljs-attribute">-o-transition</span>: all <span class="hljs-number">0.3s</span> ease;
        <span class="hljs-attribute">transition</span>: all <span class="hljs-number">0.3s</span> ease;
    }
}
&nbsp;
.content-card .post-info {
    <span class="hljs-attribute">margin-left</span>: -<span class="hljs-number">2px</span>;
}
&nbsp;
.post-list.content-card .cart-list:hover {
    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">15px</span> <span class="hljs-number">#ddd</span>;
    <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(-5px)
}
&nbsp;
.home_title {
    <span class="hljs-attribute">display</span>: -moz-flex;
    <span class="hljs-attribute">display</span>: -ms-flex;
    <span class="hljs-attribute">display</span>: -o-flex;
    <span class="hljs-attribute">display</span>: -webkit-box;
    <span class="hljs-attribute">display</span>: -ms-flexbox;
    <span class="hljs-attribute">display</span>: flex;
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">16px</span> <span class="hljs-number">20px</span>;
    <span class="hljs-attribute">white-space</span>: nowrap;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">10px</span> solid <span class="hljs-number">#e7e7e7</span>;
    <span class="hljs-attribute">background</span>: white;
}
&nbsp;
.home_title&gt;section {
    <span class="hljs-attribute">-webkit-box-align</span>: center;
    <span class="hljs-attribute">-ms-flex-align</span>: center;
    <span class="hljs-attribute">align-items</span>: center
}
&nbsp;
.home_title .title {
    <span class="hljs-attribute">display</span>: -o-flex;
    <span class="hljs-attribute">display</span>: -webkit-box;
    <span class="hljs-attribute">display</span>: -ms-flexbox;
    <span class="hljs-attribute">display</span>: flex;
    <span class="hljs-attribute">-webkit-box-flex</span>: <span class="hljs-number">1</span>;
    <span class="hljs-attribute">-ms-flex-positive</span>: <span class="hljs-number">1</span>;
    <span class="hljs-attribute">flex-grow</span>: <span class="hljs-number">1</span>;
    <span class="hljs-attribute">padding-right</span>: <span class="hljs-number">20px</span>;
    <span class="hljs-attribute">display</span>: block;
    <span class="hljs-attribute">white-space</span>: nowrap;
    <span class="hljs-attribute">text-overflow</span>: ellipsis;
    <span class="hljs-attribute">overflow</span>: hidden;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-built_in">calc</span>(100% - 48px);
}
&nbsp;
.home_title .title h3 {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">18px</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#333</span>;
    <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">8px</span>;
    <span class="hljs-attribute">display</span>: inline-block;
    <span class="hljs-attribute">vertical-align</span>: bottom
}
&nbsp;
.home_title .title span {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#999</span>;
    <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">300</span>
}
&nbsp;
.home_title .title span b {
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#2C74E6</span>;
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">4px</span>
}
&nbsp;
.syfl .grid-bor {
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">14px</span>;
    <span class="hljs-attribute">background</span>: white;
}
&nbsp;
.syfl .grid-bor .cart-list {
    <span class="hljs-attribute">box-shadow</span>: none;
}
&nbsp;
@<span class="hljs-keyword">media</span> screen and (max-width:<span class="hljs-number">873px</span>) {
    .home_title {
        <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">3px</span> solid <span class="hljs-number">#e7e7e7</span>;
    }
    .syfl {
        <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span>;
    }
    .content-card .post-info {
        <span class="hljs-attribute">margin-left</span>: -<span class="hljs-number">6px</span>;
    }
}
&nbsp;
<span class="hljs-comment">/*?¨??3?*/</span>
&nbsp;
.blur {
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">-webkit-filter</span>: <span class="hljs-built_in">blur</span>(2px);
    <span class="hljs-attribute">-moz-filter</span>: <span class="hljs-built_in">blur</span>(2px);
    <span class="hljs-attribute">-ms-filter</span>: <span class="hljs-built_in">blur</span>(2px);
    <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">blur</span>(2px);
}
&nbsp;
.blur:before {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">display</span>: block;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">1</span>;
}

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

/*buju*/

@media (min-width: 992px) {

.post-list.content-card .cart-list {

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

transition: all 0.3s ease;

}

.post-list.content-card .cart-list:hover {

transform: translateY(-6px);

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

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

box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);

-webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);

-moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

transition: all 0.3s ease;

}

.content-card .post-info {

margin-left: -2px;

}

.post-list.content-card .cart-list:hover {

box-shadow: 0 0 15px #ddd;

transform: translateY(-5px)

}

.home_title {

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

padding: 16px 20px;

white-space: nowrap;

border-bottom: 10px solid #e7e7e7;

background: white;

}

.home_title>section {

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center

}

.home_title .title {

display: -o-flex;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 1;

-ms-flex-positive: 1;

flex-grow: 1;

padding-right: 20px;

display: block;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

width: 100%;

width: calc(100% - 48px);

}

.home_title .title h3 {

font-size: 18px;

color: #333;

margin-right: 8px;

display: inline-block;

vertical-align: bottom

}

.home_title .title span {

font-size: 12px;

color: #999;

font-weight: 300

}

.home_title .title span b {

color: #2C74E6;

margin: 0 4px

}

.syfl .grid-bor {

padding: 14px;

background: white;

}

.syfl .grid-bor .cart-list {

box-shadow: none;

}

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

.home_title {

border-bottom: 3px solid #e7e7e7;

}

.syfl {

margin-top: 10px;

}

.content-card .post-info {

margin-left: -6px;

}

/*?¨??3?*/

.blur {

position: relative;

-webkit-filter: blur(2px);

-moz-filter: blur(2px);

-ms-filter: blur(2px);

filter: blur(2px);

}

.blur:before {

content: "";

position: absolute;

display: block;

height: 100%;

width: 100%;

left: 0;

right: 0;

top: 0;

bottom: 0;

z-index: 1;

}

改首页文件，划重点。。首页文件位置在seven主题目录下的index.php文件，然后打开之后找到<main></main>之间的代码全部干掉！！！

<span class="hljs-comment">&lt;!--分类项目--&gt;</span>   
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"syfl"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"home_title"</span>&gt;&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>&gt;&lt;<span class="hljs-name">h3</span>&gt;&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon"</span>&gt;&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#iconfolder"</span>&gt;&lt;/<span class="hljs-name">use</span>&gt;&lt;/<span class="hljs-name">svg</span>&gt;</span>服务器推荐<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;&lt;/<span class="hljs-name">section</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: right; background-color: rgb(255, 255, 255); padding-left: 20px;"</span>&gt;&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/category/resource-area/server-recommendation"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"查看更多"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"top: 5px; position: relative; color: rgb(51, 51, 51); font-size: 14px; font-weight: 300;"</span>&gt;</span>更多<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"iconfont zrz-icon-font-more"</span>&gt;&lt;/<span class="hljs-name">i</span>&gt;&lt;/<span class="hljs-name">a</span>&gt;&lt;/<span class="hljs-name">section</span>&gt;&lt;/<span class="hljs-name">section</span>&gt;</span>
	<span class="hljs-meta">&lt;?php</span>
	<span class="hljs-keyword">if</span> ( have_posts() ) :
		$args = <span class="hljs-string">'cat=1&amp;posts_per_page=4'</span>; <span class="hljs-comment">//指定文章和数量</span>
		query_posts( $args ); 
		<span class="hljs-keyword">echo</span> <span class="hljs-string">'&lt;div ref="postList" class="'</span>.(zrz_get_theme_style() === <span class="hljs-string">'pinterest'</span> ? <span class="hljs-string">'grid-bor'</span> : <span class="hljs-string">''</span>).<span class="hljs-string">'"&gt;'</span>;
		<span class="hljs-comment">/* Start the Loop */</span>
		<span class="hljs-keyword">while</span> ( have_posts() ) : the_post();
			get_template_part( <span class="hljs-string">'formats/content'</span>);
		<span class="hljs-keyword">endwhile</span>;
		<span class="hljs-keyword">echo</span> <span class="hljs-string">'&lt;/div&gt;'</span>;
	<span class="hljs-keyword">else</span> :
		get_template_part( <span class="hljs-string">'template-parts/content'</span>, <span class="hljs-string">'none'</span> );
	<span class="hljs-keyword">endif</span>; <span class="hljs-meta">?&gt;</span>

<section class="home_title"><section class="title"><h3><svg aria-hidden="true" class="icon"><use xlink:href="#iconfolder"></use></svg>服务器推荐</h3></section> <section style="text-align: right; background-color: rgb(255, 255, 255); padding-left: 20px;"><a href="/category/resource-area/server-recommendation" title="查看更多" target="_blank" style="top: 5px; position: relative; color: rgb(51, 51, 51); font-size: 14px; font-weight: 300;">更多<i class="iconfont zrz-icon-font-more"></i></a></section></section>

<?php

if ( have_posts() ) :

$args = 'cat=1&posts_per_page=4'; //指定文章和数量

query_posts( $args );

echo '<div ref="postList" class="'.(zrz_get_theme_style() === 'pinterest' ? 'grid-bor' : '').'">';

/* Start the Loop */

while ( have_posts() ) : the_post();

get_template_part( 'formats/content');

endwhile;

echo '</div>';

else :

get_template_part( 'template-parts/content', 'none' );

endif; ?>

柒比贰美化-首页cms布局的样式修改代码

感觉很棒！可以赞赏支持我们~

The Next Mag 5.1 汉化版 WORDPRESS主题分享

7B2主题美化之菜单的修改

参与评论

柒比贰美化-首页cms布局的样式修改代码

感觉很棒！可以赞赏支持我们~

分享本文海报

The Next Mag 5.1 汉化版 WORDPRESS主题分享

7B2主题美化之菜单的修改

参与评论

相关文章

登录