![648d975f4dc40ff75e0604516d1caf2f.png](https://i-blog.csdnimg.cn/blog_migrate/eaa747ebc57bcb4de1bb15e5f1924305.jpeg)
该从哪里开始呢?好久没来,有点生疏,有点茫然,那就按常规套路来吧,首先对你们的驻足说声3q,本次分享的是一款个人博客设计,主题为《周末's博客》,本来代码算是早就写好,但因为种种原因的耽搁,一直都未发布,算了,还是别编了,其实就是因为自己懒...
言归正题,本篇设计只包含首页和子页,都是静态页面,这两页的重要性,你懂的,大多的时候,都在这两页上进行扩展的。下面看一下图摘
![fab5c6059758c387215583c844ef7a8e.png](https://i-blog.csdnimg.cn/blog_migrate/e37919a767fe3ed326df22c5335fccab.jpeg)
![bcb8aee62879ea763720f038799671be.png](https://i-blog.csdnimg.cn/blog_migrate/23845c033bf9b7eab6b48347d8faa68a.jpeg)
肿么样?如果你觉得还可以请继续往下看,下面详细介绍实现细节
1、该设计采用蓝色为主色调,这个色调你可根据自己的喜好重置,重置方法:
![a5abbafe563fc6513092d0114e1c6f74.png](https://i-blog.csdnimg.cn/blog_migrate/f177dd348907969b3445fde368f6f4b3.jpeg)
2、人生,就像一盒巧克力,你永远不知道下一块是什么味道!这句话动态进入页面,采用的是wow插件实现的效果,引用案例:
![0503d6c3bea4c53f10fd2a39151b9696.png](https://i-blog.csdnimg.cn/blog_migrate/506f80eabad90a1a49bf8daaad7886a1.jpeg)
![cec821008db0a0dd2756075d6e1070e6.png](https://i-blog.csdnimg.cn/blog_migrate/9991d68617956131fcc89c1feade76ab.jpeg)
3、轮播图 实现关键代码
首页的轮播图采用superslide.2.1.js,该插件是基于jquery的,所以使用前需要先引用jquery,具体使用方法如下:
![43b8e00c774957f9e0e98883592dc4e5.png](https://i-blog.csdnimg.cn/blog_migrate/84240140fe1c85c3a050ade5669b244c.jpeg)
4、站内搜索 实现关键代码
![649c3ccd45b1253020048997b5e9a93d.png](https://i-blog.csdnimg.cn/blog_migrate/1d6d74500ae4f890702ffd24c86bad60.jpeg)
5、热门推荐 实现关键代码
![8ba5a1a31cb6f81c2ac9f8bbc786076b.png](https://i-blog.csdnimg.cn/blog_migrate/fa88c26a1cfed1853afd7d963a666643.jpeg)
写在最后
本文为原创出品,如需转载请注明出处