b2美化之首页四格

效果

头部自定义HTML

<script type="text/javascript" src="//at.alicdn.com/t/font_3187889_jk0nugfzkgd.js"></script>

首页模块自定义HTML

<div class="home-first">
                    <div class="aibkcontainer hide_sm">
                        <div class="row">
                            <div class="col-1-4">
                                <div class="hf-widget hf-widget-1 hf-widget-

software">
                                    <h3 class="hf-widget-title"> <svg class="libs1" 

aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>副业赚钱<span>网络

兼职副业赚钱项目教程</span>
                                        </h3>
                                    <div class="hf-widget-content">
                                        <div class="scroll-h">
                                            <ul>
                                                <li><a href="/xmszzq/dsmh" 

target=_blank><svg class="lib sixin" aria-hidden="true"><use xlink:href="#bd-

yinliugongju"></use></svg><span>电商卖货</span></a></li>
                                                <li><a href="/xmszzq/dspbx" 

target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-

zhibo"></use></svg><span>视频变现</span></a></li>
                                                <li><a href="/xmszzq/ylbx" 

target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-

xiangmusuohuotisheng"></use></svg><span>引流变现</span></a></li>
                                                <li><a href="/xmszzq/sczqxm" 

target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-

cunqianguan-copy"></use></svg><span>实操赚钱</span></a></li>
                                            </ul>
                                    
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-1-4">
                                <div class="hf-widget hf-widget-2">
                                    <h3 class="hf-widget-title"> <svg class="libs1" 

aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>热门推荐<span>最受

大家欢迎的链接</span> </h3>
                                    <div class="hf-widget-content">
                                        <div class="no-scroll hf-tags">
                                            <a class="style_orange" href="#" 

target="_blank"><span>链接一</span></a>
                                            <a class="" href="#" 

target="_blank"><span>链接二</span></a>
											

<a class="style_orange" href="#" target="_blank"><span>链接三</span></a>
                                            <a class="" href="#" 

target="_blank"><span>链接四</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-1-4">
                                <div class="hf-widget hf-widget-1 hf-widget-hot-

cats">
                                    <h3 class="hf-widget-title"><svg class="libs1" 

aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>知识学习<span>全网

知识课程学习+代理</span> </h3>
                                    <div class="hf-widget-content">
                                        <div class="scroll-h">
                                            <ul>
                                                <li><a href="/jfdhkc" 

target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-

kepujiaoyu"></use></svg><span>积分课程</span></a></li>
                                                <li><a href="/cydd" 

target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-

chuangyequ"></use></svg><span>创业导读</span></a></li>
                                                <li><a href="/vips" 

target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-ic-

vip"></use></svg><span>VIP会员</span></a></li>
                                                <li><a href="/vips" 

target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-

hezuo"></use></svg><span>网站合作</span></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-1-4">
                                <div class="hf-widget hf-widget-4">
                                    <h3 class="hf-widget-title"> <svg class="libs1" 

aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>网站公告<span>发布

最新的活动信息</span>
                                        </h3>
                                    <div class="hf-widget-content">
                                        <div class="scroll-h">
                                            <ul>
                                                <li><h3><a href="/vips" 

target="_blank"> <i class="icon-time"></i> <span>赞助贵宾会员限时优惠</span><em>点

击查看详情</em></a></h3></li>
                                                <li><h3><a href="/vips" 

target="_blank"> <i class="icon-time"></i> <span>现在开通终身会员只需要128元

</span></a></h3></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
          

子主题style.css

/*首页四格开始*/
.libs1 {
	width: 1.3em;
	height: 1.3em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;

    margin-right: 3px;
  }   
.libs {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
  }    
.lib {
	width: 3em;
	height: 3em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
  }
@media screen and (max-width: 768px){
	.home-first .hf-widget-4 .hf-widget-content ul li{padding-left:12px;}
}
.home-first {
	margin-bottom: 0px
}
.home-first .sixin{
    width: 2.8em;
}
.home-first .tese{
    width: 1.1em;
}
@media (min-width:1024px) {
	.home-first {
		/*background: #fcfcfc*/
	}
}

.home-first .aibkcontainer {
	padding-top: 0
}

.home-first .vitara_slide_in {
	margin-top: 15px;
	margin-bottom: 15px;
	border-radius: 3px
}

@media (min-width:1024px) {
	.home-first .vitara_slide_in {
		margin-top: 0;
		margin-bottom: 0
	}
}

.home-first .h-images {
	box-sizing: content-box;
	margin: 0;
	padding: 0
}

.home-first .h-images:after,.home-first .h-images:before {
	clear: both;
	display: block;
	visibility: none;
	height: 0;
	content: "";
	line-height: 0
}

.home-first .h-images:after {
	display: block;
	margin: 0 -15px;
	height: 0;
	border-bottom: 15px solid #f2f2f2;
	content: ''
}

@media (min-width:768px) {
	.home-first .h-images:after {
		display: none
	}
}

@media (min-width:768px) {
	.home-first .h-images {
		display: box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		justify-content: space-between
	}
}

@media (min-width:1024px) {
	.home-first .h-images {
		width: 25%
	}
}

.home-first .h-images .item-tuwen {
	float: left;
	padding: 0 6.5px;
	width: 50%
}

@media (min-width:1024px) {
	.home-first .h-images .item-tuwen {
		float: none
	}
}

@media (min-width:1024px) {
	.home-first .h-images {
		display: block;
		box-sizing: border-box;
		padding: 0 7.3333px
	}

	.home-first .h-images .item-tuwen {
		padding: 0;
		width: auto
	}
}

.home-first .item-tuwen {
	margin-bottom: 15px
}

@media (min-width:768px) {
	.home-first .item-tuwen {
		margin-bottom: 13px
	}
}

.home-first .item-tuwen a {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px
}

.home-first .item-tuwen a .thumb {
	padding-top: 57%;
	transition: all .2s;
	transform-origin: center
}

.home-first .item-tuwen a strong {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: block;
	padding: .4em .8em .6em;
	background-image: linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);
	background-repeat: repeat-x;
	box-shadow: 0 -7px 15px rgba(0,0,0,.2);
	color: #fff;
	letter-spacing: .5px;
	font-weight: 700;
	font-size: 9pt;
	line-height: 1.3
}

@media (min-width:768px) {
	.home-first .item-tuwen a strong {
		letter-spacing: 1px;
		font-size: 14px;
		line-height: 1.4
	}
	
}


.home-first .hf-widget {
	box-sizing: border-box;
	margin-bottom: 15px;
	padding: 14px 17px 0;
	border: 1px solid #f2f2f2;
	background: #fff;
	box-shadow: 8px 8px 9pt  rgba(255, 255, 255, 0);
	border-radius: 20px;
}

@media (min-width:768px) {
	.home-first .hf-widget {
		overflow: hidden;
		height: 135px
	}
	
}

@media (min-width:1024px) {
	.home-first .hf-widget {
		margin-bottom: 0
	}
}

.home-first .hf-widget [class*=" icon-"]:before,.home-first .hf-widget [class^=icon-]:before {
	margin: 0
}

.home-first .hf-widget .hf-widget-title {
	margin-bottom: 14px;
	padding: 0 0 10px;
	border-bottom: 1px solid #f2f2f2;
	color: #383838;
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 15px;
	line-height: 20px
}

.home-first .hf-widget .hf-widget-title a {
	color: #383838
}

.home-first .hf-widget .hf-widget-title>i {
	margin-right: 2px;
	color: #2882c5
}

.home-first .hf-widget .hf-widget-title span {
	margin-left: 10px;
	color: #a7a7a7;
	font-weight: 400;
	font-size: 9pt;
	line-height: 20px
}

@media (min-width:1024px) {
	.home-first .hf-widget .hf-widget-title span {
		display: none
	}
}

@media (min-width:1330px) {
	.home-first .hf-widget .hf-widget-title span {
		display: inline
	}
}

.home-first .hf-widget .hf-widget-title .pages {
	float: right;
	padding-top: 2px
}

.home-first .hf-widget .hf-widget-title .pages .next,.home-first .hf-widget .hf-widget-title .pages .prev {
	float: left;
	margin: 0;
	padding: 0 2px;
	height: 1pc;
	border: 0px solid #eee;
	color: #ccc;
	font-size: 15px;
	line-height: 15px;
	cursor: pointer
}

.home-first .hf-widget .hf-widget-title .pages .next:hover,.home-first .hf-widget .hf-widget-title .pages .prev:hover {
	color: #2882c5
}

.home-first .hf-widget .hf-widget-title .pages .prev {
	border-right: none
}

.home-first .hf-widget .hf-tags {
	margin-bottom: -10px
}

@media (min-width:768px) {
	.home-first .hf-widget .hf-tags {
		overflow: hidden;
		height: 4pc
	}
}

.home-first .hf-widget .hf-tags a {
	display: inline-block;
	margin: 0 5px 10px;
	padding: 0 5px;
	height: 22px;
	border-radius: 20px;
	background: #f9f9f9;
	color: #888;
	white-space: nowrap;
	font-size: 9pt;
	line-height: 22px;
	word-break: break-all
}

.home-first .hf-widget .hf-tags a.style_orange,.home-first .hf-widget .hf-tags a:hover {
	background: #2882c5;
	color: #fff
}

.home-first .hf-widget-4 .hf-widget-title {
	margin-bottom: 19px
}

.home-first .hf-widget-4 .hf-widget-content {
	color: #888;
	font-size: 14px
}

.home-first .hf-widget-4 .hf-widget-content a {
	color: #888
}

.home-first .hf-widget-4 .hf-widget-content a:hover {
	color: #2882c5
}

.home-first .hf-widget-4 .hf-widget-content h3 {
	overflow: hidden;
	height: 22px;
	font-weight: 400;
	font-size: 13px;
	line-height: 22px
}

.home-first .hf-widget-4 .hf-widget-content em {
	float: right;
	padding: 0 5px;
	height: 22px;
	border-radius: 20px;
	background: #e3f0f8;
    color: #2882c5;
	font-style: normal;
	font-size: 9pt;
	line-height: 22px
}

.home-first .hf-widget-4 .hf-widget-content ul {
	background: #fff
}

.home-first .hf-widget-4 .hf-widget-content ul li {
	margin-bottom: 5px
}

.home-first .hf-widget-4 .hf-widget-content ul li:last-child {
	margin-bottom: 0
}

.home-first .hf-widget-1 .hf-widget-content a {
	color: #888
}

.home-first .hf-widget-1 .hf-widget-content a:hover {
	color: #2882c5
}

.home-first .hf-widget-1 .hf-widget-content li {
	float: left;
	box-sizing: border-box;
	padding: 0 10px;
	width: 25%;
	text-align: center;
	font-size: 9pt
}

.home-first .hf-widget-1 .hf-widget-content li .thumb {
	margin: 0 auto 4px;
	padding-top: 36px;
	width: 36px
}

.home-first .hf-widget-1 .hf-widget-content li span {
	display: block;
	overflow: hidden;
	height: 1pc;
	line-height: 1pc
}

.home-first .hf-widget-1 .hf-widget-content .scroll-h {
	margin: 0 -10px
}

.home-first .scroll-h {
	position: relative;
	overflow: hidden;
	height: 56px
}

.home-first .scroll-h ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: all .2s
}

.home-first .scroll-h ul:after,.home-first .scroll-h ul:before {
	clear: both;
	display: block;
	visibility: none;
	height: 0;
	content: "";
	line-height: 0
}

.home-first .scroll-h .holdon {
	position: absolute;
	top: 0;
	left: 100%
}

.home-first .scroll-h .holdon-prev {
	left: -100%
}

.home-first .hf-widget-hot-cats .hhicon {
	display: inline-block;
	margin-bottom: 5px;
	width: 36px;
	height: 36px;
	border-radius: 100%;
	background: #fff5f0;
	color: #2882c5;
	text-align: center;
	font-size: 20px;
	line-height: 36px
}

.home-first .hf-widget-hot-cats .scroll-h li a {
	display: block
}

.home-first .hf-widget-hot-cats .scroll-h li a:hover .hhicon {
	background: #2882c5;
	color: #fff
}

.home-first .thumb {
	position: relative;
	display: block;
	overflow: hidden;
	padding-top: 66.7%;
	width: 100%;
	height: 0;
	background-color: transparent;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: all .2s
}

.home-first i {
	font-weight: 300
}

@media screen and (max-width:720px) {
	.home-first .hf-widget-1 .hf-widget-content .scroll-h,.home-first .hf-widget-content {
		margin: 1pc -10px
	}
}


.aibkcontainer {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 100%
}
@media (min-width:768px) {
	.aibkcontainer {
		overflow: visible;
		max-width: 8in
	}
}
@media (min-width: 1024px){
.aibkcontainer {
    max-width: 100%;
}
}
@media (min-width: 1024px){
.container {
    max-width: 1300px;
}
}
.aibkcontainer:after,.aibkcontainer:before {
	clear: both;
	display: block;
	visibility: none;
	height: 0;
	content: "";
	line-height: 0
}

.aibkcontainer .row {
	margin: 0 -7.3333px
}

.aibkcontainer .col-1-4,.aibkcontainer .col-2-4,.aibkcontainer .col-3-4 {
	float: left;
	box-sizing: border-box;
	padding: 0 7.3333px;
	width: 100%
}

@media (min-width:768px) {
	.aibkcontainer .col-1-4 {
		width: 50%
	}
}

@media (min-width:1024px) {
	.aibkcontainer .col-1-4 {
		width: 25%
	}
}

@media (min-width:768px) {
	.aibkcontainer .col-2-4 {
		width: 100%
	}
}

@media (min-width:1024px) {
	.aibkcontainer .col-2-4 {
		padding-right: 8px;
		width: 50%
	}
}

@media (min-width:768px) {
	.aibkcontainer .col-3-4 {
		width: 100%
	}
}

@media (min-width:1024px) {
	.aibkcontainer .col-3-4 {
		padding-right: 8.6666px;
		width: 75%
	}
}
/*首页四格结束*/

给TA打赏
共{{data.count}}人
人已打赏
b2美化

b2主题美化仿致美化首页大图

2021-12-12 1:00:55

b2美化

b2美化之首页跳动标题

2021-12-12 1:09:38

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ1811170520 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧