当前位置：首页 > 前端区域 > 正文内容

准备做个壁纸站，然后似乎有点难办

寒隙8个月前 (12-10)前端区域409

#### idea
前阵子突发奇想，想做个网站聚合的游戏官方壁纸站。
毕竟现在的游戏很多都有“官方图集”这么一个栏目放在官网上，但是一个一个搜又太麻烦了。
于是说干就干，先找个好看的模板，Halo挺好看的，就买服务器，看教程，安装模板，安装主题，然后发现，似乎并不太好用，只是看起来好看，尤其是缺少seo功能之类的。然后跑了一天，第二天晚上再打开，一直报错。咱也搞不明白linux啥的，一整天直接把linux、宝塔、dacker、halo全搞上了，结果一出问题就整不明白了，不太稳妥，遂放弃。
出走半生，归来仍是Zblog。

#### 开搞！
一切大概都想的差不多了，然后开始安排一个内页效果。
这个时候就要仔细瞅瞅zblog了，讲真我只改过织梦，还是老师带着改的，zblog是自己玩的，从来没学过，有点发怵。
不过问题不大，我们目前的任务是做出一个这个：
![](http://www.gofortime.com/zb_users/upload/2023/12/202312102315517454167.png)
文章的模板，希望能自己改一个模板出来，然后新建文章之后改一下a标签直接发布，岂不美哉？(此时已偏了)

####  寻找并修改替换zblog文章模板
好的说干就干，打开虚拟主机>文件管理>wwwroot
Think：这个东西每个主题应该都不一样，所以应该是存放在主题的文件夹里
So：一步步打开/zb_users/theme/tpure/template/，成功发现了single.php和page.php。
而且它们的页面内第一行代码就写了注释：这是某某模板，靠谱！
But，一切都很顺利，此时如果不出意外的话，就要出意外了。
我们随便挑一个，对着浏览器检查页面一点一点对Class名字，对这对着，发现了一个这玩意。
![](http://www.gofortime.com/zb_users/upload/2023/12/202312102330406727141.png)
套娃了，套娃了。虽然我们看不明白PHP，但是这个 Template.模板 还是认识的，刑，接着找，看看套娃到哪里了。
回到目录，嘿您猜怎么着，post-page.php居然也在这个目录，打开，接着和网页检查对比一下class名字，应该是他了，大概没错了！就是它！
然后我们试探着随便打一点点文案进去，保存，回网站后台，重新编译，刷新，打开网页！嗯？嗯？！嗯！没变化！阿？坏了坏了

#### 制作html+css的导航效果2
此时，没办法既然后台整不了花活，那么我们就在前台整吧，反正后台的文章编辑器也能用HTML（进入另一个坑）！说干就干！
打开VSCODE，打开PS，开写，然后洋洋洒洒把PS做的效果一点点写在了本地。
这里放一下最终版的代码吧（就是不是第一版代码，后来又墨迹墨迹改了一堆效果）
```html
<style>
    * {
        padding: 0;
        margin: 0;
    }

.ToImgBOX {
        width: 100%;
        background: #f1f1f1;
    }

.ToImg-Pic {
        width: 65%;
        float: left;
    }

.ToImg-Pic img {
        width: 100%;
    }

.ToImg-enter {
        width: 35%;
        float: right;
        box-sizing: border-box;
        padding: 0 10px;
    }

.ToImg-enter .YesImg {
        width: 100%;
        height: 55px;
        background: #40ab41;
        border-radius: 10px;
        text-align: center;
        margin:10px 0;
    }

.ToImg-enter .YesImg:hover {
        background: linear-gradient(90deg, #40ab41, #2c962d);
    }

.ToImg-enter .YesImg a {
        color: #fff;
        font-size: 20px;
        font-family: "Source Han Sans CN";
        color: rgb(255, 255, 255);
        font-weight: bold;
        line-height: 55px;
    }

.ToImg-enter ul li {
        list-style: none;
        width: 48%;
        margin-bottom: 5px;
        background: #fff;
        border-radius: 5px;
        filter: grayscale(1);
    }

.ToImg-enter ul li:hover {
        filter: grayscale(0);
    }

.ToImg-enter ul li img {
        width: 100%;
    }

.ToImg-left {
        float: left;
    }

.ToImg-right {
        float: right;
    }

.ToImg-waring img {
        width: 100%;
    }

.ToImg-Title {
        font-size: 17px;
        font-weight: bold;
        text-align: center;
    }

.ToImg-HuaBan {
        width: 115px;
        height: 35px;
        border-radius: 5px;
        background-image: url('http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-huaban.png');
        background-size: 100%;
        margin: 6px auto;
    }

.ToImg-HuaBan:hover {
        background-image: url('http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-huaban2.png');
    }

.ToImg-HuaBan img {
        width: 100%;
    }

.ToImg-BaiDuYun {
        width: 115px;
        height: 35px;
        border-radius: 5px;
        background-image: url('http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-baiduyun.png');
        background-size: 100%;
        margin: 0 auto;
        margin-bottom: 5px;
    }

.ToImg-BaiDuYun:hover {
        background-image: url('http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-biaduyun2.png');
    }

.ToImg-BaiDuYun img {
        width: 100%;
    }
</style>

<div class="ToImgBOX" style="line-height: 0;">
    <div class="ToImg-Pic" style="line-height: 0;">
        <a href="https://www.sanguosha.com/wallpaper">
            <img src="http://www.haokantu.vip/zb_users/upload/2023/12/%E5%B0%81%E9%9D%A2-%E4%B8%89%E5%9B%BD%E6%9D%80.jpg"
                alt="三国杀壁纸集">
        </a>
    </div>
    <div class="ToImg-enter">
        <div class="YesImg">
            <a href="https://www.sanguosha.com/wallpaper" style="text-decoration: none;">官方壁纸站</a>
        </div>
        <ul style="margin: 0;">
            <li class="ToImg-left"><a href="https://weibo.com/p/1006061703775371/photos?type=video"><img src="http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-weibo.png"
                        alt=""></a></li>
            <li class="ToImg-right"><a href="https://space.bilibili.com/1254932367"><img
                        src="http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-bilibili.png" alt=""></a></li>
            <li class="ToImg-left"><a href="https://www.taptap.cn/app/7035"><img
                        src="http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-taptap.png" alt=""></a></li>
            <li class="ToImg-right"><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E4%B8%89%E5%9B%BD%E6%9D%80&fr=search"><img
                        src="http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-baidu.png" alt=""></a></li>
            <li class="ToImg-left"><a href="#"><img
                        src="http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-mihayou.png" alt=""></a></li>
            <li class="ToImg-right"><a href="https://ngabbs.com/thread.php?stid=29077202&page=2&rand=28"><img src="http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-nga.png"
                        alt=""></a></li>
            <p style="clear: both;display: block;line-height: 0;margin: 0;"></p>
        </ul>
        <p class="ToImg-waring" style="margin-bottom: 0;"><img style="line-height: 0;" src="http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-waring.png" alt="">
        </p>
        <div class="ToImg-Title" style="line-height: 17px;margin: 5px 0;">站长精选壁纸集</div>
        <div class="ToImg-HuaBan"><a href="#"></a></div>
        <div class="ToImg-BaiDuYun"><a href="#"></a></div>
        <p style="width: 100%;text-align: center;line-height: 0;"><img style="width: 65%;margin: 0;"
                src="http://www.haokantu.vip/zb_users/upload/2023/12/ToIMG-tishi.png" alt=""></p>
    </div>
    <div style="clear: both;"></div>
</div>
<h4 id="h4--">
    游卡桌游·三国杀
</h4>
<p>
    《三国杀》是中国传媒大学动画学院2004级游戏专业学生设计，由北京游卡桌游文化发展有限公司出版发行的一款桌上游戏，并在2009年6月底由杭州边锋网络技术有限公司开发出网络游戏。该游戏融合了西方类似游戏的特点，并结合中国三国时期背景，以身份、势力或阵营等为线索，以卡牌为形式，合纵连横，经过一轮一轮的谋略和动作获得最终的胜利。
</p>
```
然后，全部复制，打开网站后台，复制粘贴，发布！
打开页面，嗯？嗯！嗯！！！！！！乱了！！！！全乱了！！！！[震惊脸]
不要方，让朕看看怎么个事，右键检查，好家伙，原来是网站自带css效果，我写的css很多都被覆盖了。麻了呀铁子们！

没办法，对着检查页面一点点改吧，又是好几个小时过去了。
本来还寻思整个手机端来着，现在吗，哼，没心气了。泪目
甚至中途一度准备放弃，不行就放弃divcss布局，直接手搓一个html表格布局，就是比较远古的那种，什么-4 -3的那种。或者直接用腾讯文档之类的算了，不过，那这件事又好像失去了什么意义emm。

好在最后搓出来了一个大概的效果，我的评价是，勉强能用。
观众老爷请看：
![](http://www.gofortime.com/zb_users/upload/2023/12/202312102350337063813.png)
不过一旦缩成手机端，就露馅了，按钮的大小差距贼大，算了算了顾不上了，就先这样吧泪目泪目。

对了，目前网址是http://www.haokantu.vip/?id=1 ，不知道以后会不会变，再看吧。
over.

扫描二维码推送至手机访问。

本文链接：http://www.gofortime.com/post/65.html

分享给朋友：

返回列表

上一篇：通过JS删除网址后缀获取京东JPG图片下载地址

没有最新的文章了...

准备做个壁纸站，然后似乎有点难办

相关文章

胶囊式的CSS移动效果

JS中的Date对象，网站运行计时器的制作

通过JS删除网址后缀获取京东JPG图片下载地址

发表评论

欢迎访问寒隙的小窝。

Powered By Z-BlogPHP. Theme by TOYEAN.

准备做个壁纸站，然后似乎有点难办

相关文章

胶囊式的CSS移动效果

JS中的Date对象，网站运行计时器的制作

通过JS删除网址后缀 获取京东JPG图片下载地址

发表评论取消回复

欢迎访问寒隙的小窝。

Powered By Z-BlogPHP. Theme by TOYEAN.

通过JS删除网址后缀获取京东JPG图片下载地址

发表评论