使用CSS/JS代码修改博客模板plus

之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和.对应的东西控制的都是啥子,这回不在看那个CSS了,直接用浏览器的开发者模式打开博客,一级一级找下去,看控制要改的内容的都是哪个DIV,把那些呆滞傻二的字体一一改掉: .cnblogs_code pre { font-family: Courier New!important; font-size:…

使用CSS代码修改博客模板

在修改设置使公告栏里的头像更新为新的头像时发现里边还有“页面定制CSS代码”这一选项,查了一下发现这东西可以对页面做一些个性化的调整.正好目前我使用的这个模板标题和导航栏的字体实在难看,顺手修改了一下. 因为我之前是对CSS这方面完全不了解,所以只能连蒙带猜.首先,这CSS代码估计就是设置一下某些参数的值,应该跟.ini之类的文件形式比较类似.看了一下别人写的一些简单的代码,大概了解了一下格式,跟预想的差不多.接下来是要找到模板本身自己的CSS代码,不然我怎么知道要修改谁呢?一开始我是直接从浏览…

不懂CSS也能定制博客界面!

之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定: [详细图解]一步一步教你自定义博客园(cnblog)界面我是基于模板BlueSky做了些改动,先看修改前后的效果: 修改前: 修改后: 1先动手!什么都别管! 在我的博客-管理-设置-页面定制CSS代码,只添加有改动的CSS代码段即可,CSS代码从当前模板获取,方法如下. 使用chrome浏览器,在博客界面按F12查看当前模板(BlueSky)的代码如图不懂CSS的我一脸懵B,不过上图左上角有个神器将箭…

我的博客模板（线框图wireframe）

不久前看到一篇介绍定制网页浏览的方法,当时就想着,我把我的博客页也修改下,在手机浏览的时候,也能漂亮的显示出来.以后写的文章的话,也可以分享的微信朋友圈里面和朋友分享. 具体步骤参考:http://www.cnblogs.com/lvdabao/p/5245247.html 我按照上面的做了,但是,手机浏览起来,还是跟一坨屎一样,不得不佩服自己的UI制作能力. 前台功底不行呀,HTML标签一知半解,js也就那样,css基本不动,你叫我咋样,咱只能一步一部来了.所以,今天就先分析下模板画面的大致结…

第41篇推荐一个jekyll博客模板

本人用的模板是基于Codeboy的博客模板改造模板,(由于本人可能会有很多样式修改,所以不再将修改pullrequst到原项目,在此对codeboy模板表示感谢).功能改造如下: 添加微信支付宝打赏这里也是一个开源的项目,项目地址,使用很方便,直接引用到项目中,配置下就可了: <script> window.tctipConfig = { staticPrefix: "http://static.tctip.com", buttonImageId: 1, buttonTi…

基于Jekyll的博客模板

代码地址如下:http://www.demodashi.com/demo/13147.html 效果环境配置环境 Windows 10 Git Bash 安装ruby 下载rubyinstaller安装:https://rubyinstaller.org/downloads/ (推荐Ruby 2.2.6版本) $ ruby -v 安装DevKit 下载DevKit.exe:https://rubyinstaller.org/downloads/ ,解压完成后进入目录,init初始化,revi…

Submine Text3格式化HTML/CSS/JS代码

Submine Text3格式化HTML/CSS/JS代码需要安装插件,步骤如下: 1.打开菜单--->首选项---->Package Control,输入 install package 2.输入“html-css-js prettify “,点击之后,开始安装 3.插件安装成功后,在需要格式化的HTML代码中,选中代码,然后按Ctrl+Alt+H对代码进行格式化. 格式化CSS会再每个CSS后面都添加一个换行,取消该换行的方法: 打开:菜单-->工具-->html/css/js…

Sublime text 3 如何格式化HTML/css/js代码

Sublime Text 3 安装Package Control 原来Subl3安装Package Control很麻烦,现在简单的方法来了一.简单的安装方法使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.requ…

Zend Studio 上安装使用Aptana插件(html,css,js代码提示功能) .

最近装了zend studio 9.0 用了段时间发现写html,css,js代码没提示,要开dreamwaver(对js代码提示也不好).就网上搜索了下,发现了Aptana插件,装上用了下,感觉不错. 贴下官方网址:http://www.aptana.com/ 一.安装步骤: 1.zend studio->Help->Install New Software->work with点击add(见下图) 2.这里有两个选择: (1)Local(本地安装) (2)在线安装,location中…

利用Sails.js+MongoDB开发博客系统

http://yoyoyohamapi.me/categories/利用Sails-js-MongoDB开发博客系统/ 利用Sails.js+MongoDB开发博客系统 Apr 14, 2016 利用Sails.js+MongoDB开发博客系统(2)--框架完善 Jul 24, 2015 利用Sails.js+MongoDB开发博客系统(5)--个人信息维护 Jul 14, 2015 利用Sails.js+MongoDB开发博客系统(4)--文章模块 Jul 7, 2015 利用Sails.js…

代码备份 | 博客侧边栏公告（支持HTML代码）（支持JS代码）

博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" href="https://cn.vuejs.org/v2/api/" target="_blank">Vue</a> <a class="ivu-btn ivu-btn-primary" href="https://…

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)

缘起书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对象,类和模式封装,ES6新特性等多个角度讲解了Vue入门的一些储备知识,之所以说储备知识,是值,这些内容不会也可以学Vue,但是,如果学的不错,那下一步学习Vue的时候会比较容易,要是能看得懂,写的出来,会修改别人的,嗯!继续大步往前走哈哈,今天呢,终于到了写代码的时候了,这两天一般预习这Vue,一边修改这之…

纯CSS打造BiliBili样式博客主题

前言一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果.这一次带来的是仿制BiliBli制作的纯CSS博客园主题,希望能给你带来不一样的体验. 头部导航栏 BiliBili个人主页效果这种头部感觉比较好看,并且根据博客园的代码布局,正好能够实现. 其实博客园在设计之初就考虑到了logo的问题,但是只给了1px的大小,所以基本上就没有被人发现.通过ba…

flask实战-个人博客-模板 --

模板 personalBlog采用典型的博客布局,左侧三分之二为主体,显示文章列表.正文:右侧三分之一为边栏,显示分为类列表.社交链接等.现在的工作是将HTML文件加工为模板,并创建对应的表单类,在模板中渲染. 并非所有的页面都需要添加边栏,所以我们不能把它放到基模板中.为了避免重复和易于维护,我们把边栏部分的代码放到了局部模板_sidebar.html中.除了基模板base.html和存储宏的macros.html模板,personalBlog程序的博客前台使用的模板如下所示: index.h…

Google HTML/CSS/JS代码风格指南

JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS修正版本 2.1 背景本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持基础架构.适用于HTML/CSS文件,包括GSS文件. 只要代码质量是可以被维护的,就能很好的被工具混淆.压缩和合并. 样式规则协议嵌入式资源书写省略协议头省略图像.媒体文件.样式表和…

简洁侧边wordpress博客模板

模板描述:商务领航,尽现成熟稳重的个人小站风格响应式Web设计,自适应电脑.平板电脑.移动设备图标字体库,自适应各种终端设备,保证图形图标清晰无锯齿,支持Retina(视网膜屏幕) 跨浏览器兼容,支持IE6/7/8/9/10/11.Chrome.Safari.Opera,等同于支持国内各种浏览器支持主题控制面板,后台方便的设置SEO.统计代码.分享代码针对SEO进行改良,支持内页自动获取关键字.描述支持WordPress的菜单系统,无限级…

Node.js的开源博客系统Ghost搭建教程

准备工作 Node.js版本:0.10.x.0.12.x.4.2.x.安装步骤可参考:Node.js环境搭建 Ghost版本:0.7.4:中文集成版(33.6M),中文标准版(3.39M),英文原版(3.23.M) 推荐使用中文集成版,其中包含Node.js需要的模块包node_modules. 若使用中文标准版,需使用npm install --production进行安装,记得配置一下国内镜像,不然会比较慢. 安装步骤解压下载的zip包复制config.sample.js文件并命名为co…

webstorm的live templates快速编辑功能,让你的css JS代码书写速度飞起来

前言: Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码, 大大提高了HTML/CSS代码编写的速度,比如下面的演示: 但是对于我们来说这远远不够,我还想写css js呢,有些编辑器会提供一部分快捷功能,但是对于一些我自己常用的,编辑器没有的,我想自己定义,那怎么办呢, 下边的这篇教程对你来说,肯定大有帮助:kissing_closed_eyes: 简介: webStrom IDEA , live temp…

网页中嵌入可以点击“运行代码”执行html/css/js代码

html代码 <textarea name="textarea" cols="60" rows="10" id="rn01">运行的代码</textarea> <br> <input onclick="runWin('rn01')" type="button" value="运行代码" style="cursor:h…

基于Vue+node.js的个人博客

前言作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈前端 vue.js+scss 因为当时没学vuex所以没用到后端 node.js express框架数据库 mysql 特点 1.响应式布局,能够适应各种不同分辨率的场合,除了对低端浏览器的不兼容外就没别的,煞风景的地方了. 2.所以功能都是自己写出来的,左边导航栏的控制然后页面内容的各种样式,没有用框架,全是自己写的. 3.在文章的页面用…

sublime text3格式化html,css,js代码

需要安装HTML/CSS/JS prettify插件. 安装步骤:首选项 -> Package Control -> Install Package -> HTML-CSS-JS Prettify. 安装成功后可以在Package Settings中看到. 快捷键是Ctrl+Shift+H. 注意: 1.快捷键冲突可以在Default.sublime-keymap中修改快捷键 2.该插件是依赖node.js的.如果node.js路径不正确也无法使用,windows系统下插件配置中nod…

页面怎么引用外部css+js代码

外部css样式:把css样式写到一个文件内,方便使用,减少冗余. 如果使用的是外部css样式,页面怎么引用: 使用 <link rel="stylesheet" type="text/css" href="css/table-role2.css"/> href写的是css文件的地址. js代码写在页面上的 <script type="text/javascript"></script>标签内…

github+hexo+node.js搭建个人博客基本过程及遇到的问题

一,所需工具 1,github账号+Gitclient+配置SSH key 2,安装node.js. 3,安装Hexo. 当中,github pages是我们用来部署我们本地的博客到github上的.hexo是基于nodejs的. hexo是比較经常使用的静态博客生成器. 二,主题问题我使用了使用 Yelee: https://github.com/MOxFIVE/hexo-theme-yelee.git 主题库: https://hexo.io/themes/ 三,大致步骤(因为步骤太多,没…

使用shake.js让你博客支持摇一摇

大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake.js,shake.js github地址,我们只需要里面的shake.js,然后引入. 添加“摇一摇”事件监听 window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake oc…