代刷网的模版怎么美化更好看?

admin 2018-4-4 10537

   说到代刷网的模版,很多站长都很羡慕别人的网站好看,各种特效各种功能等等,那么,这些功能是怎么实现的呢?下面我们就来简单的介绍一下。

首先就是你要确定一个你需要美化的模版了,这里我推荐用彩虹自带的default模版,这个模版简介大气,试用于新手,也可以自己添加很多的美化代码,然后我们开始对这个模版开始美化,先是添加公告代码,公告我们一般是推荐简洁一点的,说明一下网站的商品代刷速度详情等等,推荐用<li>标签,对于html代码不会的站长,可以直接在后台克隆别人的,然后再自己修改,然后是添加网站的底部代码,底部我们平台目前还没有,这里我们是推荐简洁模块,底部加上友情链接,或者是客服联系方式,添加好公告和底部代码,基本上网站会显得比较好看了,还有最重要的,就是网站logo请记得一定要上传,这样,一个效果不错的代刷网基本就成型了。

美化后的网站首页

以上只是初级的简单装修,那么,我们要实现更多的功能要怎么做呢?

这里,我们以口口代刷网为例,

做出这个更多的效果,首先,我们要再源码里找到下单查单这些的li标签,然后复制一个,改成更多,如下代码:

<ul class="nav nav-tabs" data-toggle="tabs">
		<li class="active" style="width: 25%;" align="center">
			<a href="#shop"><i class="fa fa-home"></i> 下单</a>
		</li>
    <li style="width: 25%;" align="center">
			<a href="#search"><i class="fa fa-search"></i> 查单</a>
		</li>
	
       <li style="width: 25%;" align="center" <?php if($conf['gift_open']==0){?>class="hide"<?php }?>>
             <a href="#gift" data-toggle="tab"><span style="font-weight:bold"><i class="fa fa-gift fa-fw"></i> 抽奖</span></a></li>
		<li style="width: 25%;" align="center">
			<a href="#more"><i class="fa fa-th-list"></i> 更多</a>
		</li>
	</ul>

我们的宽度要用百分比,这样做是为了适应手机端,也是为了好看,这个要看你添加的个数了,一定要分配均匀,如过是4个,平均下来就是25%,是5个就是20%,这里大家自行确定,然后,我们需要做的就是调用代码,也是href="##",也就是##这个,我们要改成调用的id,这里要说明的就是你调用的代码一定要放下面,也极速如下一段代码:

<!--更多-->
		<div class="tab-pane fade fade-right" id="more">
			<div class="col-xs-6 col-sm-4 col-lg-4">
                <a class="block block-link-hover2 text-center" data-toggle="modal" href="user/reg.php">
                    <div class="block-content block-content-full bg-primary-dark">
                      <i class="fa  fa-files-o  fa-3x text-white"></i>
                        <div class="font-w600 text-white-op push-15-t">搭建分站</div>
                    </div>
                </a>
            </div>
			<div class="col-xs-6 col-sm-4 col-lg-4">
                <a class="block block-link-hover2 text-center" data-toggle="modal" href="#lqq">
                    <div class="block-content block-content-full bg-primary"> 
                      <i class="fa fa-circle-o fa-3x text-white"></i>
                        <div class="font-w600 text-white-op push-15-t">免费拉圈</div>
                    </div>
                </a>
            </div>
			<div class="col-xs-6 col-sm-4 col-lg-4">
                <a class="block block-link-hover2 text-center" href="user">
                    <div class="block-content block-content-full bg-city">
                       <i class="fa fa-lock fa-3x text-white"></i>
                        <div class="font-w600 text-white-op push-15-t">分站后台</div>
                    </div>
                </a>
            </div>
           <div class="col-xs-6 col-sm-4 col-lg-4">
                <a target="_blank" class="block block-link-hover2 text-center" onclick="window.open(&#39;/bbs&#39;)">
                    <div class="block-content block-content-full bg-warning">
                      <i class="fa fa-paper-plane-o fa-3x text-white"></i>
                        <div class="font-w600 text-white-op push-15-t">交流论坛</div>
                      </div>
                </a>
           </div>
           <div class="col-xs-6 col-sm-4 col-lg-4">
                <a target="_blank" class="block block-link-hover2 text-center" onclick="window.open(&#39;http://k.52djdg.com/index/login.html&#39;)" rel="nofollow" >
                    <div class="block-content block-content-full bg-amethyst">
                      <i class="fa fa-rocket fa-3x text-white"></i>
                        <div class="font-w600 text-white-op push-15-t">代挂管理</div>
                    </div>
                </a>
          </div>
        <div class="col-xs-6 col-sm-4 col-lg-4">
                <a target="_blank" class="block block-link-hover2 text-center" data-toggle="modal" href="http://www.dggml.com/index.php" rel="nofollow">
                    <div class="block-content block-content-full bg-success">
                       <i class="fa  fa-search fa-3x text-white"></i>
                        <div class="font-w600 text-white-op push-15-t">苹果X管理</div>
                    </div>
                </a>
            </div>
        </div>
<!--更多-->

我们可以看到,这个div的id是more,所以调用的代码为:#more,然后我们确定保存,就完成了!


上一篇:关于分站装修的几个重要知识点
下一篇:代刷网主站隐藏和修改网站订单数量教程
最新回复 (1)
返回
推荐最好的QQ代刷网:www.nncoco.cn
代刷网资源