前端技术 - 前端工程师学习笔记

前端技术

前端技术博客内有很多教程，涵盖了wordpress教程，7b2模板修改教程，以及HTML，Bootstrap，VUE等知识教程

最新随机最多浏览最多喜欢最多评论

分类：
7b2模板 google工具集 wordpress教程 vue.js 前端框架 bootstrap html5 设计资源
专题：
全部 7B2模板优化 wordpress子主题制作

全部标签

7B2 关键词/分类/搜索结果页文章缩略图比例详解

在7B2的模板使用中，尤其是在做了7B2文章列表瀑布流样式二次优化修改以后发现一个问题。就是文章展示的页面结构虽然公用，但是有部分设置并不通用。例如，搜索结果页面的缩略图比例是按照默认比例来的，而非文章所在分类的设置的比例。后来思考了一下设计的理念，觉得这么做也算合理，假如两个分类的缩略图比例不同，可能会导致搜索结果页面不统一。但是如果有需球了怎么办？？那就要详细解读一下文章特色图比例这一参数了…

blinglee

7b2模板
隐藏付费阅读

7B2文章列表瀑布流样式二次优化修改

今天闲着看站酷的时候看到了一张不错的设计图，刚好可以用来做瀑布流的样式。下午折腾一下午，终于把页面赶出来了，期间感谢作者的耐心解疑答惑。废话不多说直接看效果图页面效果战士相较于B2原版的瀑布流，这里需要做两大项修改，一是要把文章的时间年月份单独出来，然后是把图片，7B2原本的设计这里应该是偷了个懒，有图则显示图片，无图则显示默认图。这样的结构导致有个缺陷，假如所有特色图片和默认图尺寸相同，则几…

blinglee

7b2模板
隐藏付费阅读

7B2默认分类页面优化-添加背景图片和ICON

在7B2的默认模板分类页面，个人感觉用户体验不是很友好。胖哒的构想应该是顶部有可以自主设置的背景图再加上分类名称或者描述，筛选分类一栏能看到个性化ICON，并给分类加上一个面包屑导航，确认完需求以后开始动手。效果图对比旧版无修改页面展示效果改版后修改教程首先要找到分类的所在PHP模板文件。本站第一版分类页面升级- 7B2模板分类面模板二次优化-顶部分类标题描述以及背景图片。已经有了详细说…

blinglee

7b2模板
小白科普如何通过Adsense赚取自己的第一桶金

什么是Google Adsense？ Google AdSense是Google众多产品中最快速简便的网赚模式。可以让具有一定访问量规模的网站发布商，为他们的网站展示与内容相关的广告。Google广告并将网站流量转化为收入。简而言之，有访客在你网站看到你的广告，你就能分到钱，点击你的广告会根据广告价格也会有费用。但是！！！国内价格是真便宜啊，以本站前期为例，日均PV在50-150左右，半个月的收入…

blinglee

google工具集
关于webkit-transition CSS过渡不适用于百分比高度

今天在优化7B2文章目录模块时候想隐藏掉用户展示小模块，先给模块新增了transform属性，当滚动时候高度设置为0。整完发现动画没起作用，网上搜了搜才发现，原来transform不支持百分比属性。如何解决且看下文 transform属性是什么 CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的css动画。 transition动画功能：实现元素不同状态之间…

blinglee

前端技术
7B2主题新增文章阅读目录导航（已废弃原主题自带此功能）

在我们阅读文章的过程中有一个目录导航可以更好的提升用户体验。今天，就尝试在我们的侧边栏-widgets-作者模块上加上这个功能。所需工具首先是安装一个目录插件，作者选择的是easy table of contens。直接再插件市场搜索，第一个就是。后台进行设置，可以对各类想添加目录的HTML标签进行选择，就像作者的基本上只选用了h3标签，简单高效。并且，在插件后台设置默认显示不显示。短代码插…

blinglee

7b2模板
wordrepss让pre支持php代码并换行

前言今天在wordpress的使用中，发现放上去php源码后，因为有DIV标签，可能会导致页面错乱。上网搜了一下，是因为WordPress 自身有一个强大的 HTML 标签过滤系统，会导致在文章和评论中插入的 PHP、CSS、HTML、JS 等代码直接消失，因此需要将code或pre内的符号标签编码转义为 HTML 实体。所以，还得动手。解决方案使用wordpress的add_filter(…

blinglee

wordpress教程
7B2模板分类面模板二次优化-顶部分类标题描述以及背景图片

前言相比上次7b2模板分类页面升级的优化，这次主要的改动是调用了分类的描述以及特色图片。也就是后台添加了分类描述和特色图片以后可以在顶部显示。但是缺点就是筛选模块就没法再二次调用了（第一版新增了筛选分类小图标ICON，具体可以看上篇教程），毕竟相对于大部分企业占而言，每个页面有个特色图片设置还是很有用的。如果执意想在菜单栏上有个漂亮的小图标，建议使用 i 标签并调用7B2的默认font字体图标。…

blinglee

7b2模板
7B2首页幻灯片模块优化-显示page-dots并调整切换按钮

最近在做7B2模板的改造工程，参照优设网的设计把首页的幻灯片样式做了新一版的样式更新。原计划是将整个顶部模块基于原有设计幻灯片+小工具来实现，后来发现如果修改了这个结构会导致整个页面结构错乱所以就作罢了，仅用了全屏幻灯片铺满整个Header，并删除多余的文章标题分类等元素,化繁为简让页面看起来更舒服。设计思路首先是要确定幻灯片组件的文件位置去处不必要的元素。然后是调整出来幻灯片的Paged…

blinglee

7b2模板
7B2模板分类页面升级-筛选部分新增分类ICON和分类背景图

前言在参看了许多大型设计网站的设计后，决定对模板分类页面做一下升级改造。还是按照子主题的思路，修改模板php文件，在原有的基础上做结构升级。依旧是参照了优设网的分类页面设计。且在修改的过程中有意外惊喜发现，上篇修改的Posts.php文件可以直接调用，这样就省事多了。后续准备再设计一般新的样式出来，期待后续吧。最终呈现效果主要设计是把分类目录的顶部做了一些优化，并优化了移动端的样式。分类目…

blinglee

7b2模板
BootStrap框架的优缺点以及使用中的BUG

随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了，它们可以帮助我们更快更好地实现一些现代化的界面，包括一些…

blinglee

bootstrap
除了IconFont还有那些比较好用的图标网站

国内设计师最常用的图标网站恐怕就是iconfont了。从最初的字体，慢慢壮大。成为了国内首屈一指的设计助手，涵盖了icon,字体，矢量插画，动态特效等资源。可以满足网站的大部分需求。但是偶尔会出现服务器崩盘的情况，所以这里收集了一些替代网站，有兴趣的同学又可以给收藏夹添丁了。 https://www.flaticon.com/ FlatIcon也是一个非常优秀的图标网站。Flat英文意思是平的，所…

blinglee

前端笔记