响应式html5导航页1.01

博主：老刘
发布时间：2021 年 10 月 12 日
115次浏览
6 条评论
1835字数
分类： Blog

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-deb527a437083ee094736ecd4b19b4df81" aria-expanded="true"><div class="accordion-toggle"><span>更新日志</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-deb527a437083ee094736ecd4b19b4df81" class="collapse collapse-content"><p></p>2021-10-12
版本：1.01
footer置底，新知识get✔
<p></p></div></div></div>

----------
自从博客弄起来后
一直都在查教程丰富完善内容和功能
但是搞半天又总感觉哪里不对
思考了半天终于反应过来
缺了个门面！！！
进屋没门就很奇怪
于是乎又开始找导航页模板和教程
最终基于爆胎的模板结合自己的情况和喜好修改
[爆胎原帖](https://www.itggg.cn/fx/483.html)
# 一、演示
[原帖演示](https://itggg.cn/)
[我的演示](https://kev.fit)
# 二、修改思路
原模板主要的功能
 - 响应式设计，设备自适应
 - ~~获取访客IP~~
 - 调用一言或今日诗词
 - font-awesome 图标支持
 - ~~背景图片渐变效果~~

自适应现在是标配了肯定得留
获取访客ip这个我没多大需求，删
一言，自己还没想到写什么，暂时留着
图标支持，基础东西也是得留着
由于我vultr美国鸡线路确实不咋地
本来延迟就高，要是再加载张图片体验就更差了
所以背景图片想都不敢想
渐变效果也就没啥用了，删
# 三、具体操作
确定了功能，接下来要解决具体问题了
 - 背景怎么办
 - 一点图片都没有也不行啊，太单调了
 - 怎么样将导航页设置成typecho主页？

对于没有一丁点html+css+js基础的我来说
没有什么是百度解决不了的，如果有，那就谷歌
结果花了一个下午把问题都解决完并且成功上线
效果吧，只能说在我的能力范围内是满意的
在正常审美上来说还是差了点

## 1、背景怎么办
既然决定了不用图片，经过一番百度谷歌
知道了可以通过css生成样式，那就这么干吧，好像还挺方便
又是一番百度谷歌，找到了一个配色网站
里头有180种渐变配色，还能一键生成css代码
[https://webgradients.com/](https://webgradients.com/)
关键是这些配色我觉得都挺好看的
将代码添加到css文件body{}后发现了一件诡异的情况
![{}](https://kev.fit/usr/uploads/2021/10/gvbsfv9euf.jpg)

尼玛生成的样式竟然不能铺满页面！！
下面缺一块是什么鬼啊
搜啊搜，试啊试，总算是弄好了
```
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  background-size:100% 150%;
```
把背景高度调整到150%解决问题
反正渐变色块拉变形了也看不出来
保存后清理缓存看看效果
![{}](https://kev.fit/usr/uploads/2021/10/gvbsoy9fkb.jpg)

## 2、一点图片都没有怎么办
这个好办，插头像呗
最好解决的问题没有之一，2分钟搞掂
```
<div class="circle">
<img src="url" alt=" "style="width:130px; height:130px; border-radius:50%; "/>
</div>
```
url替换成头像图片网址
width和height可以调整大小
![{}](https://kev.fit/usr/uploads/2021/10/gvbsws8xaa.jpg)

最后把一些元素丰富一下就算完事了
```
标签内容（含图标），需要多少个标签就该多少个
<a class="fa fa-home" href="url">&nbsp;博客</a>
..............
```
[图标库](http://www.fontawesome.com.cn/faicons/)

**最终成品1.0**
![{}](https://kev.fit/usr/uploads/2021/10/gvbt6vvytp.jpg)

## 3、怎么样把导航页设置成typecho主页？
首先，在主题目录下（注意：是主题的目录）
新建一个php文件
将css文件拷贝到与php同一文件夹
```
<?php
 /**
 *  首页
 * 
 * @package custom
 */
 ?>
```
将这个模板头信息粘贴进去php文件中
然后将刚才修改好的导航页html内所有内容粘贴进去
因为这个导航页是带有css文件的，所以css路径也要设置一下
```
<link rel="stylesheet" href="<?php $this -> options -> themeUrl('/main.css'); ?>" />
```
然后新建页面，标题内容都不用填
模板选择首页，发布后就能看到这个页面
回到后台，网站设置--阅读设置--使用刚才新建的页面做为主页同时更改文章列表路径
![{}](https://kev.fit/usr/uploads/2021/10/gvbti382f6.jpg)

至此导航页就弄好了
# 四、总结
经过这一下午的折腾
也还是有收获的
从一开始看代码跟看天书一样
到现在虽然还是看不懂
但是已经大概猜到代码之间的联系
这就是知行合一吧
学习和实践结合才学得快

现在这个导航页还是有很多不满意的地方
不过1.0版本都是有很多问题的
后续要好好学习一下html+css+js
继续优化，出2.0 3.0

END

本文作者：老刘
文章标题：响应式html5导航页1.01
本文地址：https://kev.fit/archives/294/
版权说明：若无注明，本文皆K E V.原创，转载请保留文章出处。

最后修改：2021 年 10 月 12 日 07 : 41 PM

如果觉得我的文章对你有用，请随意赞赏

6 条评论

Dal.
October 12th, 2021 at 01:22 pm

很厉害啊，颜色没那么好看一点，我看挺简介的，要不搞成白色的看看

回复
1. 老刘
  October 12th, 2021 at 01:38 pm
  
  @Dal.
  
  白色也可以，不过我个人比较偏向这种略显深沉的颜色哈哈哈哈
  
  回复
悠目黎
October 12th, 2021 at 07:06 am

感觉这个蓝色有种上个世纪的感jio。

回复
1. 老刘
  October 12th, 2021 at 08:48 am
  
  @悠目黎
  
  所以是土了吗
  
  回复
  1. 悠目黎
    October 13th, 2021 at 07:22 am
    
    @老刘
    
    图片上传第三方图床引用就行，或者整体颜色改一下，不过这是我的审美，自己喜欢就好，毕竟服务器是自己花钱的。
    
    回复
    
    老刘
    October 13th, 2021 at 07:54 am
    
    @悠目黎
    
    对噢，我都忘了可以图床。。。。。
    
    回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

响应式html5导航页1.01

老刘 • 2021 年 10 月 12 日

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f2a99f57e22d47a2701396c8b4e67d1c24" aria-expanded="true"><div class="accordion-toggle"><span>更新日志</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f2a99f57e22d47a2701396c8b4e67d1c24" class="collapse collapse-content"><p></p>2021-10-12
版本：1.01
footer置底，新知识get✔
<p></p></div></div></div>

**最终成品1.0**
![{}](https://kev.fit/usr/uploads/2021/10/gvbt6vvytp.jpg)

现在这个导航页还是有很多不满意的地方
不过1.0版本都是有很多问题的
后续要好好学习一下html+css+js
继续优化，出2.0 3.0

6 条评论

发表评论 取消回复

响应式html5导航页1.01

发表评论取消回复