首页
微语
统计
友链
留言
memos
圈子
图床
推荐
相册
网站监控
VPS监控
Search
1
实现typecho微信时光机功能的图文教程
49,431 阅读
2
为Typecho添加webp解析
43,827 阅读
3
Memos备忘录,记录瞬间想法
29,165 阅读
4
emlog数据成功迁移到typecho
28,505 阅读
5
Jasmine - 简约、美观的博客主题
28,099 阅读
手机达人
免费资源
电脑网络
娱乐休闲
网站建设
威言威语
Typecho
Emlog
WordPress
服务器
主题
插件
排行榜    
登录
/
注册
Search
标签搜索
wordpress
发布
插件
免费
教程
typecho
EMlog
PHP
代码
CSS
华为
图片
安装
代码修改
评论
手机
诺基亚
微信
文章
智能
Chen'mo
累计撰写
1,272
篇文章
累计收到
381
条评论
首页
栏目
手机达人
免费资源
电脑网络
娱乐休闲
网站建设
威言威语
Typecho
Emlog
WordPress
服务器
主题
插件
页面
微语
统计
友链
留言
memos
推荐
相册
网站监控
VPS监控
搜索到
346
篇与
的结果
2013-11-09
typecho调用作者信息并显示头像
今天在博客里放了一个关于作者部分,需要调用typecho中的作者信息和作者的头像。找了一下,使用如下的代码实现:
2013年11月09日
5,741 阅读
0 评论
0 点赞
2013-11-08
作为Web开发人员 我为什么喜欢 Chrome
在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器。在Chrome出来的时候,我就喜欢上它的简洁、快速,无论是启动速度还是页面解析速度还是Javascript执行速度(现在的FireFox4 也比之前的FireFox3有很大的进步)。不过当时由于Chrome的开发者工具还不是很完善,而我又不是很熟悉,加之对于Firebug的好感和依 赖,当时还是用回FireFox作为我的主浏览器。后来由于开发Chrome的插件(现在的FaWave),就一直使用Google Chrom作为我的主浏览器,渐渐熟悉Chrome的开发者工具,而Chrome也一直在快速迭代,快速进步中,到现在,Chrome已经绝对成为我的主 浏览器,Chrome的开发者工具,我也认为比Firebug更好用。得益于Google V8的快速,和对HTML5和CSS3的支持也算比较完善,html类的富客户端应用Chrome上无论是流畅性还是呈现的效果,都是比较出色的,这对于开发者,特别是对于那些喜欢研究前沿技术的前端开发者来说,是很重要的。对于本文,作为一个Web开发人员,除了上面的原因以外,与我们开发相关的,就是Chrome的开发者工具。而本文,就是要详细说说Chrome的开发者工具,说说我为什么认为它比Firebug要好用。1 怎样打开Chrome的开发者工具?你可以直接在页面上点击右键,然后选择审查元素:或者在Chrome的工具中找到:或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12。打开的开发者工具就长下面的样子:不过我一般习惯与点左下角的那个按钮,将开发者工具弹出作为一个独立的窗口:下面来分别说下每个Tab的作用。Elements标签页这个就是查看、编辑页面上的元素,包括HTML和CSS:左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性,或者你点右键选“Edit as Html”直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。(注:看到上面右键菜单的最后一个选项“审查元素”了 么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦,嘿嘿 :)你还可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处:Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。下面的Metrics可以看到元素占的空间情况(宽、高、Padding、Margin神马的):注意到上面的Properties没有?这个很有用哦,可以让你看到元素具有的方法与属性,比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦)。Resources标签页Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容,同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除。这里的CSS文件有一个好玩的特性,你可以直接修改CSS文件,并且修改即时生效哦:Network标签页Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息,对于开发、调试,都是很有用的。Scripts标签页很明显,这个标签页就是查看JS文件、调试JS代码的,直接看下图的说明:还有你可以打开Javascript控制台,做一些其他的查看或者修改:你甚至还可以为某一XHR请求或者某一事件设置断点:Timeline标签页注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看),这个Timeline指的JS执行时间、页面元素渲染时间:点击底部的Record就可以开始录制页面上执行的内容。(这个不熟悉,请参考文末链接)Profiles标签页这个主要是做性能优化的,包括查看CPU执行时间与内存占用:这个也不熟悉,不多说,还是请参考文末链接吧。Audits标签页这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow):点击run按钮,就可以开始分析页面,分析完了就可以看到分析结果了:它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦:Console标签页就是Javascript控制台了:这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入“console”并执行:怎么样,一目了然了吧 ?再例如我想查看日期函数都有哪些方法:(注:注意在这里看到的某些方法和属性是ES5新增的,记得兼容其他浏览器的支持情况哦)结语Google Chrome除了简洁、快速,现在的Chrome的插件也非常的丰富了。而对于web开发者来说,Chrome对于HTML5、CSS3等一些新标准的支 持也是比较完善的,而且Chrome的开发者工具我个人认为真的非常好用,这就是为什么我向web开发者推荐使用Chrome的原因。注1:本文截图的Chrome版本为:13.0.782.215 m注2:Chrome开发者工具更详细的说明请参考:http://code.google.com/intl/zh-CN/chrome/devtools/docs/overview.html注3:本文原来想定的标题是:给那些因为Firebug而舍不得FireFox的朋友文章来源:lulu Studio
2013年11月08日
3,238 阅读
0 评论
0 点赞
2013-11-06
Typecho中实现侧边栏标签云和标签云页面以及彩色标签云
之前在折腾wordpress的时候实现过标签云,同时在麻辣GIS上也实现了类似36氪的标签云效果,所以这次重新整理博客样式的时候也想做上这个效果。具体方法如下:
2013年11月06日
5,116 阅读
0 评论
0 点赞
2013-11-04
国家域名取消Clienthold状态通知
尊敬的第一商务用户: 现接到中国国家域名管理机构CNNIC的通知,针对国家域名的注册审核政策进行了相关调整,具体通知内容如下: 为更加科学高效落实工信部对所有顶级域在中国境内使用时“未备案不解析”工作的要求,进一步提升国家域名注册服务质量,提升用户体验,我中心已对国家域名注册审核相关工作进行优化。具体要求如下:1、自通知发布之日起,所有新注册的.cn/.中国/.公司/.网络域名,各注册服务机构不再设置“Clienthold”暂停解析状态。2、自通知发布之日起,对用于境外接入网站的.cn/.中国/.公司/.网络域名和用于非网站用途的.cn/.中国/.公司/.网络域名,不再要求用户提交《域名解析情况说明书》及《关于域名用于非网站用途的承诺书》。3、自通知发布之日起,所有在新注册时已添加“Clienthold”暂停解析状态的域名,应将“Clienthold”解除,恢复正常状态(由政府部门指令由于非法用途暂停解析情况的除外)。4、 我中心已建立技术拨测系统采用科学手段对已注册的域名进行网站访问状态的扫描,若用于境内接入网站的域名未完成工信部网站备案手续即已开通访问,我中心将协调有关部门进行处理,相关工作请注册服务机构予以配合。 各域名注册服务机构应根据我中心注册审核优化的内容,自通知发布之日起,尽快调整相关工作,做好对下级代理机构的通知传达,并做好用户的解释工作。感谢各注册服务机构对国家域名工作的理解和支持。 第一商务 2013年10月30日以后注册CN可以直接就解析了,不过还是要BS一下这说变就变的态度.
2013年11月04日
1,475 阅读
0 评论
0 点赞
2013-10-12
DNSdun – 提供免费智能解析服务,智能DNS
DNSdun是一家新成立提供免费智能解析服务,智能DNS的网站。DNSdun是kangle官方推出的,稳定性还有待观察,界面有点类似于DNSPOD。据说官网目前已经加到11台的解析服务器,国庆以后要加到16台。 DNSDUN,最稳定最安全的域名解析商使用 DNSDun 的解析服务后,DNSdun DNS Protector(DNSdun 自主研发的 DNS 防护软件)为网站 7×24 小时保驾护航;DNSdun 智能解析让你自由优化多网互通;遍布全国的云集群使网站的访问者得到最快的解析结果;DNSdun 智能监控自动监控服务器故障。网站更快更稳定!云DNSDNSdun拥有全球最领先的云 DNS 集群技术。6年 DNS 领域专业研究,无数次紧急 DNS 故障处理,让我们更有信心提供最好的服务。安全强大的DNS智能解析https安全的用户管理平台,重要操作通知到短信或邮箱,负载均衡、无限制的解析记录条数、分网分省智能解析、URL转发、宕机检测、批量添加和解析域名…稳定的DNS解析服务云架构全天24小时服务器实时监控,智能DNS防火墙拦截技术,全国多机房多节点同时提供服务,为您提供稳定不间断的DNS解析更有保障。DNSdun最贴心的服务在线技术支持、24小时电话客服、企业QQ、论坛、微博、微信,让您随时随地都能感受到DNSdun的真诚服务。DNSDUN所采用的两条DNS记录值ns1.dnsdun.comns1.dnsdun.net网站:www.dnsdun.com
2013年10月12日
5,990 阅读
0 评论
0 点赞
2013-10-05
纯CSS写的下拉菜单代码 Dropmenu
分享一个纯CSS写的下拉菜单代码,结构非常简单,代码十分清晰,HTML+CSS下拉菜单代码。HTML代码部分:<ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href="">The Team</a></li> <li><a href="">History</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Products</a> <ul> <li><a href="">Cozy Couch</a></li> <li><a href="">Great Table</a></li> <li><a href="">Small Chair</a></li> <li><a href="">Shiny Shelf</a></li> <li><a href="">Invisible Nothing</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Online</a></li> <li><a href="">Right Here</a></li> <li><a href="">Somewhere Else</a></li> </ul> </li> </ul>CSS代码部分:ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #617F8A; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #617F8A; } li:hover li a:hover { background: #95A9B1; }
2013年10月05日
6,723 阅读
0 评论
0 点赞
2013-10-05
CSS Sprites 网页背景图片定位技术简述
很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片。这种网页使用的就是CSS Sprite,通过将多个图标整合在同一张图片,可以减少向服务器请求图片的次数,加快网页的加载速度。 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。 加速的关键,不是降低质量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。背景图片定位方法: 我们知道,CSS中写背景的代码形式为:.class{ background:url(./images/bg.png) no-repeat left top #ccc;} 如果使用CSS Sprite方式对背景图片进行定位,那么需要修改的就是上述代码中的 left 和 top 两处。事实上,left 和 top两个单词所对应的均是0px,也就是说上述代码也可以写成:.class{ background:url(./images/bg.png) no-repeat 0px 0px #ccc;} 其实现的效果是背景图片坐上对其。下面,Kurly根据自己的经验和理解,给大家绘制一张坐标图,如下。CSS的背景图片是以左上角为原点的,这样我们就可以理解前面代码是左上角对齐的效果了。同时,请注意观察图示坐标轴的正方向,明白了这一点就好办了。图中Kurly标出了(-50px, -50px)的坐标位置,如果我们要将白色图片中的边长为50px的灰色正方形作为一个长宽分别为50px的DIV的背景图片,那么我们只需要这样来编写CSS:.box{ height:50px; width:50px; background:url(./images/bg.png) no-repeat -50px -50px; } 另外,如果我们的DIV层为边长200像素的正方形,我们想让这个灰色正方形作为背景且居中,那CSS又该怎么写呢?很简单,只要理解了坐标轴的方向,根据上例,我们很容易就知道坐标值应该修改为正的50px即可(注意:黑色区域为背景图片以外的区域)。CSS如下.box{ height:200px; width:200px; background:url(./images/bg.png) no-repeat 50px 50px; } 相信,读完上面的示例,你已经明白如何通过CSS Sprite方式定位你的背景图片了吧! 来源:http://www.yilushang.net/post-313.html
2013年10月05日
5,114 阅读
0 评论
0 点赞
2013-09-29
轻量社区系统StartBBS
StartBBS(起点开源社区系统)是一个基于CI MVC框架开发的PHP新型社区系统,她轻量小巧, 简单易用,强大高效的开源论坛系统。又简称”STB(烧饼bbs)”此版本是最全面的一次bug修复和细节调整,还有几个地方比如url链接没有弄,考虑到示来会重构所以会在将来版本进行优化。V1.1.2版改进如下:1.图片上传系统改进,完美支持手机以及二级目录上传2.邮件系统重构3.重构头像调用,同时解决无头像时,默认头像无法显示的问题.4.后台增加用户搜索功能5.贴子编辑不能识别图片的问题6.首页展开贴子,部分贴子重复问题.7.发贴以及回复贴子时的代码过滤问题8.加强xss注入问题9.图片撑破内容页10.搜索支持二级目录11.增加时区配置,解决部分服务器出现错误12.个人中心的个人主页链接出错.13.增加后台用户删除功能14.发贴成功后,清关编辑中的内容.15.后台奖励保存无效的问题16.标题以及前台内容,后台可以管理17.节点改进,支持一级分类也支持二级分类,不再强制二级分类.18.列表中的回复数直接定位到发表框位置19.改进验证码识别,去除0和o.20.增加风格目录设定和增加一套白色风格.21.修复装在二级目录下的链接错误问题.22.部分服务商禁用了allow_url_fopen出现错误问题23.二级目录下,开启伪静时,无法回复的问题.24.内容为空也能提交内容的问题,改为最小字符不少于4字符.25.回复后,回复数自动更新26.首页调用全部友情链接27.会员列表页会员调用数调整28.列表页标签增加过滤功能29.回复中如果有图片,刷新后才显示图片的问题30.更新robots.txt文件.31.其它小细节.下载地址:本站下载 http://www.startbbs.com/uploads/versions/startbbs_v1.1.2.zip(924k)
2013年09月29日
2,573 阅读
0 评论
0 点赞
2013-09-26
让IE6/IE7/IE8浏览器支持CSS3属性
大家都知道IE 6,IE7,IE8不支持css3中新加属性,老外写了一个ie-css3.htc,主要利用的是VML原理,可以让IE 6,7,8支持部分的CSS3属性,包括:border-radius(圆角),box-shadow(阴影),text-shadow(文本阴影)。使用是很容易的,看下面的示例代码:.box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari 和 Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */ }可以看到,除了最后添加了behavior这么一句,CSS3属性还是那个CSS3属性,不需要化妆、修饰或是化身为变形金刚,这也是此方法的优点所在。PS:htc文件一定要放在服务器上,放在本地测试是不行的!而且考虑到性能问题,尽量不用htc文件。htc下载:ie-css3.htc 转载请注明: 转载自WEB前端开发(www.css119.com)
2013年09月26日
3,429 阅读
0 评论
0 点赞
2013-09-19
EMlog静态化插件免费下载
这次EMlog论坛中秋活动给力,把这个静态化插件免费了。对于一直喜爱HTML的我,立马测试了一翻。我都差点想去换zblog的php版了,可是发现它也忽视真正生成静态的功能了。所以还是把这个EMLOG好好弄下,还要发布个模版,在做一个自己用。好插件当然收藏先,百度下载地址:http://pan.baidu.com/share/link?shareid=1258721631&uk=1261552365&third=15 em_static.zip官方下载地址:http://www.emlog.net/plugin/134
2013年09月19日
5,693 阅读
0 评论
0 点赞
2013-09-18
黑色质感 gallery for emlog 正式发布
模版几天前已经重新做好了,一直没发布就是等着备案下来。今天备案下来了,域名可以访问了,故将此gallery模版发布以便分享。 如果有什么问题,欢迎留言提问! 我在emlog5.1.2中测试没发现什么问题,FF,Chrome IE8 9中没见明显错位现象。 首页图: ![请输入图片描述][1] 文章: 相册页: 碎语: 模版下载: gallery.zip 欢迎留言交流。
2013年09月18日
6,039 阅读
6 评论
0 点赞
2013-08-29
35个最佳响应式HTML5和CSS3模板
Free Responsive TemplatesFlexAppDemo || DownloadzGallering – Free Responsive Html5 ThemeDemo || DownloadResponsive HTML5/CSS3 templateDemo || DownloadVividPhoto HTML5 and CSS3 TemplateDemo || DownloadResponseEve HTML TemplateDemo || DownloadBrownie Responsive HTML5 TemplateDemo || DownloadRetina – Free Responsive HTML5 TemplateDemo || DownloadDigyDemo || DownloadObscura – Free Responsive HTML TemplateDemo || DownloadImCreative HTML5 TemplateDemo || DownloadSimple Responsive TemplateDemo || DownloadKeyners HTML5/CSS3 Responsive TemplateDemo || DownloadzParalexy – Free Responsive Html5 ThemeDemo || DownloadPremium HTML5/CSS3 TemplatesMY FOLIO – Responsive Photography Retina-Rdy HTML5Demo || DownloadSmart Business – Responsive HTML5 TemplateDemo || DownloadRENOVA – Unique One Page ThemeDemo || DownloadIncrease – Premium Corporate HTML5 TemplateDemo || DownloadBigWig – Modern Corporate HTML5 TemplateDemo || DownloadNevia – Responsive HTML5 TemplateDemo || DownloadDelicate – Responsive Multipurpose HTML5 TemplateDemo || DownloadLeviate – HTML5 One Page Parallax TemplateDemo || DownloadConstruct – Responsive HTML5/CSS3 TemplateDemo || DownloadPorto – Responsive HTML5 TemplateDemo || DownloadCartel HTML5 Responsive Studio TemplateDemo || DownloadWebpaint – 2 in 1 Responsive HTML5 TemplateDemo || DownloadFreshlook – Responsive MultiPurpose HTML5 TemplateDemo || DownloadRT-Theme 17 Premium HTML5 TemplateDemo || DownloadSurreal – Responsive Parallax One Page HTML5Demo || DownloadRevision – Responsive HTML5 TemplateDemo || DownloadBoom – Responsive Html5 Portfolio TemplateDemo || DownloadExpo – Responsive HTML5 TemplateDemo || DownloadAMAZE – Interactive Parallax – Responsive HTML5Demo || DownloadFlexBox – HTML5 Template ResponsiveDemo || DownloadBlocked – Responsive HTML5 TemplateDemo || DownloadOutshined – Responsive HTML5 TemplateDemo || Download
2013年08月29日
4,403 阅读
0 评论
0 点赞
2013-08-28
EMLOG调用指定多个分类文章列表代码
对于SQL命令不是很熟悉,昨日想用EMLOG做一个文章类表调用,需要用到SQL命令代码,调用指定多个分类EMLOG文章列表,研究了好些时间没整明白,求人也不是个事,只好自己继续边看教程边测试,功夫不负有心人,最终给我整明白了,用这个SQL命令可以正确调用指定多个分类的EMLOG文章列表,蓝叶分享给有需要的站长们,把以下代码复制到模板的脚本文件中,设置好需要调用的分类ID号,在前台模板里写入调用代码就可以实现你想要的效果了。<?php function Get_newlogs($log_num) { $db = MySql::getInstance(); $sql = "SELECT gid,title,date,content,views FROM ".DB_PREFIX."blog WHERE type='blog' and hide='n' and sortid IN (1,2,3,4) ORDER BY `date` DESC LIMIT 0,$log_num"; $list = $db->query($sql); while($row = $db->fetch_array($list)){ ?> <li><a href="<?php echo Url::log($row['gid']); ?>"><?php echo $row['title']; ?></a></li> <?php } ?> <?php } ?> 说明:IN后面括号中的就是要调用的分类ID号,请自行更改你需要调用的分类ID号,中间用英文状态下的逗号隔开,前台模板调用在需要输出美容的地方复制<?php Get_newlogs(5);?>代码,代码中的5表示需要输出的文章列表条数。
2013年08月28日
7,395 阅读
0 评论
0 点赞
2013-08-27
Xiuno BBS 2.1.0 发布(2013/8/25)
下载地址:http://bbs.xiuno.com/down/xiuno_bbs_2.1.0.tar.gz补丁地址:http://bbs.xiuno.com/down/xiuno_bbs_2.1.0.patch.tar.gz前言感谢大家精神上的,物质上的支持,在发布这个小版本之前,我有些话想跟大家说。在国内做开源不是一件容易的事情,我国的目前的国情是众多码奴、码畜、还挣扎在温饱线上;少部分码奴奔了小康,却在同颈椎病、失眠等职业病做斗争,能拿出来“开源”的时间实在太少;还有极少数转管理层的码畜则很少再实际关心底层实现,更多关心客户需求和票子。我是一个理想主义者,我希望看到每一段代码都是干净的,每一个变量命名都是准确的。我很庆幸我能有时间写干净的开源代码,希望这些代码能带给大家更多价值,基于它开发出属于你自己的纯净的高效的可阅读的可重用的代码。
2013年08月27日
3,303 阅读
0 评论
0 点赞
2013-08-25
12款优秀的 Twitter Bootstrap 组件和工具
Bootstrap 是基于 HTML,CSS 和 JavaScript 的简洁灵活的流行前端框架及交互组件集,由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap 有非常完备和详尽的开发文档,Web开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。 Bootstrap 的口号是 Designed for everyone, everywhere.(适用于任何场景,适用于每一个人),主要有以下特色:支持所有主流浏览器、12列栅格布局、响应式设计、样式化的文档以及常用的定制的 jQuery 插件等等。Bootstrap 已经足够强大,能够实现各种形式的 Web 界面。为了能够充分利用 Bootstrap 的强大功能,下面向打击推荐12款各种各样工具和资源来配合 Bootstrap 使用。 jQuery UI Bootstrap这个 jQuery UI 主题,对于 jQuery 的使用者来说是个非常好的资源,能够把 Bootstrap 的清爽界面组件引入到 jQuery UI 中。 Bootstrap Image GalleryBootstrap Image Gallery 是 Bootstrap 模态对话框的一个扩展,用于实现相册浏览功能,支持按键导航,幻灯片展示以及全屏浏览。 jQuery Mobile Bootstrap Theme和 jQuery UI 主题类似,这是一个基于 Twitter Bootstrap 的 jQuery Mobile 主题,让你的移动应用用上 Bootstrap 界面。 Colorpicker and Datepicker for BootstrapTwitter Bootstrap 有非常多的内置 jQuery 插件,但是没有颜色选择器和日期选择器,这个插件是个非常好的补充。 StyleBootstrap.infoTwitter Bootstrap 提供了定义好的几种界面风格,如果你想有更多更个性化的配色的话,这个工具可以帮上你的大忙。 Beautiful Buttons for Bootstrappers清爽漂亮的按钮是 Twitter Bootstrap 最吸引人的特色之一,这个在线的按钮设计工具可以帮助你制作更多风格的按钮样式。 BootswatchTwitter Bootstrap 的默认主题已经非常漂亮了,但是如果你想有一个与众不同的外观,那么这个主题选择工具可以帮助到你。 Fbootsrapp相当于 Twitter Bootstrap的一个 Facebook 主题,包含表单、按钮、表格、导航等等 Facebook 风格的界面组件。 Bootstrap Fireworks对于使用 Fireworks 进行界面设计朋友,Bootstrap Fireworks 非常有用,它提供了一组矢量图形。 Django Bootstrap Toolkit这个一个把 Django 和 Twitter Bootstrap 集合起来使用的工具包,相信 Django 的粉丝们会喜欢。 Bootstrap PSD这个设计套件包含 Twitter Bootstrap 所有的基本组件的 PSD 源文件,包括字体、按钮、网格和导航等等。 BootstrapWP如果你的 WordPress 博客也想换上 Twitter Bootstrap 界面的话,这个 WordPress 主题就是你需要的。 下面列出了更多基于 Twitter Bootstrap 的 WordPress 主题: Roots Theme Bootstrap Bootstrap for WordPress Bootstrap for WP StrapPress WPBS
2013年08月25日
2,429 阅读
0 评论
0 点赞
2013-08-24
jquery置顶栏
又找到了这个小功能。还有footer固定的<html> <head> <script src="jquery-1.9.1.min.js"></script> </head> <body> <script> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; </script> <script> $(function(){ $(".caseMenu").smartFloat(); }) </script> <style> html,body{margin:0px; height:0px;} .caseMenu{background: #000; width:100%; color:#fff; text-align: center; height:45px; line-height: 45px; font-family: microsoft yahei; letter-spacing: 2px; font-size: 18px; position:fixed;top: 0} p{height:400px;} .main div{width:100%; height:300px;} </style> <div class="caseMenu">置顶栏</div> <div class="main"> <div style="background:#5EEAFF"></div> <div style="background:#FF985E"></div> <div style="background:#FF5EEC"></div> <div style="background:#FFDD5E"></div> <div style="background:#FAFFE3"></div> <div style="background:#E7ECE7"></div> <div style="background:#C7CCA9"></div> <div style="background:#FAC5CC"></div> <div style="background:#F88795"></div> <div style="background:#6E526A"></div> </div> </body> </html>
2013年08月24日
2,248 阅读
0 评论
0 点赞
2013-07-31
BAE版EMLOG的伪静态设置
BAE上设置伪静态很简单导航栏“管理中心” -> 左侧“应用管理” -> 左侧“全部” -> 右侧点击自己的应用左侧“云环境” -> 右侧版本列表最右端“高级” -> 鼠标移上去 -> 配置右侧添加1.规则类型:URL2.规则:/blog/post-.*.html3.执行:/blog/index.phpPs:因为我的博客放在blog目录下,所以加 blog/ 如果在根目录则不用加,为:/post-.*.html 第三条同理依次添加所有规则即可,只更换第二条“规则”,例如 /blog/sort/等,第三条不变添加完成后,请点击保存! ★ 转载请注明出处,本文地址:http://fengyu.name/?cat=coding&id=34
2013年07月31日
5,455 阅读
0 评论
0 点赞
2013-07-28
Z-Blog 2.2 发布
最喜爱的zblog又发布2.2版了,爽啊。下载地址:http://pan.baidu.com/share/link?shareid=1119262873&uk=1982946852 下载后务必使用工具对照校验码! CRC32: 3454BBC6 MD5: 688E596AE6B184E6B001B8726B270629 SHA-1: 0B0373D8AD045FC9BE75D95633F95D2FD1839AC6 主要更新 [主要更新]后台语言包切换 [主要更新]WAP插件独立,新增PAD(Android\iOs)模式 [主要更新]编辑器彻底插件化,统一其API接口 [主要更新]文章定时恢复重写 [主要更新]新模板标签 [主要更新]验证码插件化 [主要更新]增加条件判断模板、删除无用模板 系统核心 [功能新增] [主要更新] WAP插件独立,新增PAD(Android\iOs)模式 [功能新增] 主题检查依赖插件 [功能新增] 侧栏评论字数限制 [功能新增] Tags Intro作为伪静态URL [修改优化] 修改Statistic,加快速度 [修改优化] 全部系统文件性能调优,防止ADO\FSO重复创建 [修改优化] 移动风声无组件上传的位置 [修改优化] [主要更新] 验证码插件化. [问题修正] [影响:低] 同一天发布文章过多导致发布过慢的问题 系统外围 后台设置 ---- [主要更新] 后台语言包切换 文章编辑 ---- [主要更新] 编辑器彻底插件化,统一其API接口 文章编辑 ---- [主要更新] 文章定时恢复重写 模板制作 ---- [主要更新] 新父分类模板标签 模板制作 ---- [主要更新] 增加条件判断模板、删除无用模板 后台设置 ---- 后台设置页面加入代码高亮 文章编辑 ---- edit_ueditor.asp-->edit_article.asp 文章编辑 ---- 文章内容超过IIS限制时提示删减(否则无法提交) 文章编辑 ---- uEditor升级到1.2.6,表格功能增强 文章编辑 ---- 摘要生成方式修改,以及修正摘要 评论发表 ---- 评论表单修改 评论发表 ---- VerifyMessage函数用jQuery修改 安装向导 ---- 权限检查部分修改,改为检查每一个文件夹的所有权限 侧栏管理 ---- 几处小细节更新 侧栏管理 ---- 兼容IE8 问题修正 ---- [影响:低] fix tag返回超过50条的问题 问题修正 ---- [影响:高] fix rss分类出错的问题 问题修正 ---- [影响:中] fix InstallPlugin_xxx会被执行二次的问题 问题修正 ---- [影响:低] fix 部分页面有强迫症的人会疯了的问题 问题修正 ---- [影响:中] fix 文章编辑时摘要被错误重置的问题 问题修正 ---- [影响:低] fix 侧栏在某些情况下未被写入的问题 问题修正 ---- [影响:低] fix Windows Phone 8字体莫名其妙放大问题 问题修正 ---- [影响:低] fix XML-RPC两处出错 自带应用 HTML5CSS3主题 ---- 加入配置 静态管理中心 ---- 伪静态规则优化 静态管理中心 ---- 新UI 应用中心 ---- 不再打包.git\.svn下文件 应用中心 ---- 加入推送开发版本功能
2013年07月28日
2,730 阅读
0 评论
0 点赞
2013-07-28
简单快速修改zblog模板的重要代码
1、zblog的布局调整前面我们已经提到了清除 b_article-multi.html 模板和 b_article-single.html 模板中一些不重要的标签,其实在流量比较大的catalog.html 模板default.html 模板和single.html模板中也存在一些需要的没有或者不需要的多余的标签问题。我们可以在这三个文件的 <div id="divSidebar"> 代码下看到他们,这些就是导航的模块,如以下代码<div class="function" id="divCatalog"><h3><#ZC_MSG026#></h3><ul><#CACHE_INCLUDE_CATALOG#></ul></div>2、templates 文件夹是你修改最为多的地方catalog.html 修改zblog的分类、关键词索引页面的模板default.html 修改zblog的首页模板single.html 修改zblog的单页模板b_article-single.html 用于修改zblog的单页内容区模板b_article-multi.html 用户修改zblog首页及索引页的摘要说明部分控制以上五个文件是最为重要的文件,作为zblog修改的重点。其他的两个 search.html 和 tags.html 分别是搜索页、关键词首页的模板,这两个页面如果你需要可以修改,一般情况下,这两个页面的浏览量并不是很大。templates文件夹下还有不少文件,但其他的可能在你非常需要的时候才用得上(如想修改上下页、留言板区、导航区样式),这些将在以后我们逐步说明。修改这些文件的时候需要知道以下几个非常重要的标签,因为他关系到你的博客对搜索引擎的友好度,稍稍改动他们的位置都会对你的博客排名产生巨大影响,所以大家小心测试。<#ZC_BLOG_HOST#> 代表博客的域名或者根文件夹<#ZC_BLOG_TITLE#> 代表博客网站名称<#BlogTitle#> 代表单个文章的主标题3、修改title标签zblog默认的模板比较谦虚,很多皮肤也延续了这一观点,我们看代码<title><#ZC_BLOG_TITLE#><#ZC_MSG044#><#BlogTitle#></title>可以看到,它的意思是 “博客名称-文章标题”,而一般应该认为应该是,“文章标题-博客名称”。所以位置调换一下:<title><#BlogTitle#><#ZC_MSG044#><#ZC_BLOG_TITLE#></title>这个主要涉及到 single.html 单页模板。4、为zblog添加meta默认情况下,zblog是没有keywords和description标签的,因为google、百度都声称他们已经不看重日益滥用的keywords、description标签,同时如果滥用还可能遭到他们的惩罚,这也是之所以zblog官方模板没有启用这两个meta标签的重要原因。但是不看重并不意味只拒绝,所以如果你没有滥用的习惯和目的,那也可以尝试加入这两个标签。将首页模板 default.html 的title前添加两行<meta name="keywords" content="aa,bb,cc,dd" /><meta name="description" content="xx网站是做什么什么用的" />此处的aa,bb,cc,dd是你的整个网站讨论的关键词,不要太多,建议控制在十个以内,并且使用应为的逗号隔开,不要有重复关键字(关于关键字的选择我们以后讨论),这些内容非常重要。description标签是网站的描述,你可以描述一个不超过50字的介绍,切忌不要使用关键词的内容来堆砌,毫无意义。并且这里的内容尽量使用中文的标点符号,不使用英文的逗号,免得遭到百度、google的猜疑。将单页模板 single.html 也添加meta标签,但是要使用下述内容:<meta name="keywords" content="<#article/tagtoname#>" /><meta name="description" content="<#article/intro#>" />此处的 #article/tagtoname# 是调用页面的关键词, #article/intro# 是调用文章简介,如果你使用全文来作为简介请修改<meta name="description" content="<#article/intro#>" />为<meta name="description" content="<#article/tagtoname#>" />或者为<meta name="description" content=" <#BlogTitle#>" />5、zblog中的h1和h2标准的设计是h1做页面主要标题声明,h2做次要标题或者重点内容,以此类推,不过在zblog中h1的全站修饰是网站的名称,h2用来修饰文章正文标题,作为新建站,为了尽快将自己的站名中涉及到的关键词从搜索引擎那里导引过来,zblog的默认设定很好。不过当网站已经有了不少流量,特别是有了不少的外连接的时候,非常珍贵的h1建议给单页正文的标题,而网站名称关键词可以退为第二位,也就是将h1和h2换位。将single.html 模板中title下面的<h1 id="BlogTitle"><a href="<#ZC_BLOG_HOST#>"><#ZC_BLOG_NAME#></a></h1><h2 id="BlogSubTitle"><#ZC_BLOG_SUB_NAME#></h2>更换为<h2 id="BlogTitle"><a href="<#ZC_BLOG_HOST#>"><#ZC_BLOG_NAME#></a></h2><h3 id="BlogSubTitle"><#ZC_BLOG_SUB_NAME#></h3>而将 b_article-single.html 模板下的<h2 class="post-title"><#article/title#></h2>更换为<h1 class="post-title"><#article/title#></h1>如果你觉得h1后,文章的标题太大,可以修改css中的h1字号。(关于css的修改我们以后会专门有文章说明)6、让zblog快点再快点虽然经过zblog静态化页面处理,zblog已经非常快乐,但如果你想自己的Zblog再快点,或者你的用户量很大,有图建议你如下操作:精简一下 b_article-multi.html 模板里你自己认为不重要的标签,比如 作者 和 浏览数等。有图自己认为浏览数(非别在b_article-single.html模板和b_article-multi.html模板中)是影响响应速度的最重要的一个地方。因为当流量大了之后,频繁的访问access会造成瓶颈,这也是zblog中唯一没有被静态化的内容了(单页面中)减少图片的使用。图片不但会占用带宽,占用你的流量,还会因为被别人复制而占用你的IIS数,所以少用图片或者用小图片是zblog加速的另外一个非常值得注意的问题。少下载文件。文件下载不但会像图片一样会出现流量和IIS占用问题,还有一点就是少使用exe文件。因为国内很多空间商存在一些技术不够好或者干脆就是不法目的,他们可能因为疏忽或者故意,而是服务器感染某一些病毒(不是搞笑哦,是真的,因为这里面都有利益价值,特别是arp类和木马类),如果这些文件是exe而不是rar,被绑架的可能性大大增加,而搜索引擎会判断这些文件,并且遭遇到别人的投诉(不管是否恶意),页面甚至是网站都会有非常大的负面影响。所以如果有可能尽量少使用下载。7、你最需要的zblog插件如果你到zblog的官方插件里找,插件真的是很多,最必须的是什么呢?有图推荐给大家三个 列表插件(文章排行) Sitemaps 静态首页生成插件,这三个插件的用途简单给大家介绍下。列表插件(文章排行) :提供更好的文章导航效果,如果我们在步骤6中知道如何来加减<div>模块,那么这个列表可以让你的zblog页面非常友好,它可以提供相关文章、最新文章、点击率排行、留言排行、随机文章等多种可供选择的列表,虽然我们肯定不全部采用,但如果给你的页面增加两到三个这样的列表,可以让文章内容看起来更丰富。同时,因为这些列表基于script调用,对于你的页面外连接没有增加,对搜索引擎排名相当友好。Sitemaps :这是一个自动生成google sitemap的插件,对于google的索引非常友好,如果你开通了google的管理员工具,这个插件非常有用。静态首页生成插件:首页静态化的重要性是什么呢?大家已经讨论的非常多了。我想说的是,如果你的流量日志里发现直接点击数目比较大时,一定要静态化首页,因为可以节省非常多的因asp处理和调用access数据库而产生的速度、瓶颈和IIS占用问题。
2013年07月28日
5,436 阅读
0 评论
0 点赞
2013-07-18
Encode Explorer | 一款简洁的PHP文件浏览器
官方网站 http://encode-explorer.siineiolekala.net下载地址 http://sourceforge.net/projects/encode-explorer/files/encode-explorer演示地址 http://encode-explorer.siineiolekala.net/explorerEncode Explorer 是去年一个朋友推荐给我的web文件浏览工具,作者应该是爱沙尼亚人,相对于其他同类产品,它最大的优点就是简洁易用、短小精悍,单文件不到100K,普通用户和管理员用户权限设置也不错,图片预览功能很酷,最大的缺点应该是不支持站内搜索,只能用浏览器搜索,不过对我来说是足够用了,试用了几个月,感觉非常棒,所以在这里分享一下。 容量统计 用户分级 上传删除 图片预览 邮件通知 时间统计 访问统计 //// 初始设置,无需改动//$_CONFIG = array();$_ERROR = “”;$_START_TIME = microtime(TRUE);/** GENERAL SETTINGS*///// 选择语言,原版默认为英文,这里改为简中// Default: $_CONFIG['lang'] = “en”;//$_CONFIG['lang'] = “zh-CN”;//// 图片文件的缩略图预览,鼠标停放在图片文件上后显示缩略图,支持jpg/gif/bmp等格式// Default: $_CONFIG['thumbnails'] = true;//$_CONFIG['thumbnails'] = true;////缩略图尺寸限制(像素)// Default: $_CONFIG['thumbnails_width'] = 200;// Default: $_CONFIG['thumbnails_height'] = 200;//$_CONFIG['thumbnails_width'] = 300;$_CONFIG['thumbnails_height'] = 300;//// 支持手机版访问// Default: $_CONFIG['mobile_enabled'] = true;//$_CONFIG['mobile_enabled'] = true;//// 设置默认访问手机版(PC访问也是手机版),所以选false// Default: $_CONFIG['mobile_default'] = false;//$_CONFIG['mobile_default'] = false;/** USER INTERFACE*/////在新窗口打开文件// Default: $_CONFIG['open_in_new_window'] = false;//$_CONFIG['open_in_new_window'] = true;//// 统计所有文件占用空间总量,0为不显示// Default: $_CONFIG['calculate_space_level'] = 0;//$_CONFIG['calculate_space_level'] = 1;//// 是否显示header// Default: $_CONFIG['show_top'] = true;//$_CONFIG['show_top'] = true;////网页标题和header标题// Default: $_CONFIG['main_title'] = “Encode Explorer”;//$_CONFIG['main_title'] = “Index of /”;//// header中的二级标题// For example: $_CONFIG['secondary_titles'] = array(“Secondary title”, ““Secondary title with quotes””);// Default: $_CONFIG['secondary_titles'] = array();//$_CONFIG['secondary_titles'] = array();//// 显示相对路径// Default: $_CONFIG['show_path'] = true;//$_CONFIG['show_path'] = true;//// 显示页面载入时间// Default: $_CONFIG['show_load_time'] = true;//$_CONFIG['show_load_time'] = true;////最近修改时间的显示格式// Default: $_CONFIG['time_format'] = “d.m.y H:i:s”;//$_CONFIG['time_format'] = “Y-m-d H:i:s”;//// 页面编码// Default: $_CONFIG['charset'] = “UTF-8″;//$_CONFIG['charset'] = “UTF-8″;/** PERMISSIONS*///// 隐藏指定目录// Näiteks: CONFIG['hidden_dirs'] = array(“ikoonid”, “kaustanimi”, “teinekaust”);// Default: $_CONFIG['hidden_dirs'] = array();//$_CONFIG['hidden_dirs'] = array();////隐藏指定文件// Default: $_CONFIG['hidden_files'] = array(“.ftpquota”, “index.php”, “index.php~”, “.htaccess”, “.htpasswd”);//$_CONFIG['hidden_files'] = array(“.ftpquota”, “index.php”, “index.php~”, “.htaccess”, “.htpasswd”);////是否需要登录// Default: $_CONFIG['require_login'] = false;//$_CONFIG['require_login'] = false;//// 模式一:普通用户登录,需要用户名和密码// Näiteks: $_CONFIG['users'] = array(array(“user1″, “pass1″), array(“user2″, “pass2″));// 模式二:普通用户登录,只需密码无需用户名,当然也就只能一个用户// Näiteks: $_CONFIG['users'] = array(array(null, “pass”));// 模式三:普通用户和管理员用户登录,需要用户名和密码,管理员用户名后面加admin,普通用户后面加user// For example: $_CONFIG['users'] = array(array(“username1″, “password1″, “user”), array(“username2″, “password2″, “admin”));// 模式四:普通用户无需登录,管理员用户需要登录// For example: $_CONFIG['users'] = array(array(“username”, “password”, “admin”));// 模式五:普通用户名无需登录,无管理员用户,array() 默认即可// 注意模式一到模式三都需要启用require_login,模式四和模式五则要关闭require_login// Default: $_CONFIG['users'] = array();//$_CONFIG['users'] = array();////管理员用户权限,需要注意的是这几个权限都需要所在文件夹有写入的权限,设为777即可// Default:// $_CONFIG['upload_enable'] = true;// $_CONFIG['newdir_enable'] = true;// $_CONFIG['delete_enable'] = false;//$_CONFIG['upload_enable'] = true;$_CONFIG['newdir_enable'] = true;$_CONFIG['delete_enable'] = true;/** UPLOADING*///// 限制上传目录,默认不限制// For example: $_CONFIG['upload_dirs'] = array(“./myuploaddir1/”, “./mydir/upload2/”);// Default: $_CONFIG['upload_dirs'] = array();//$_CONFIG['upload_dirs'] = array();//// 允许上传的文件类型,默认不限制// For example, to only allow uploading of common image types, you could use:// $_CONFIG['upload_allow_type'] = array(“image/png”, “image/gif”, “image/jpeg”);// Default: $_CONFIG['upload_allow_type'] = array();//$_CONFIG['upload_allow_type'] = array();//// 禁止上传文件类型// For example: $_CONFIG['upload_reject_extension'] = array(“php”, “html”, “htm”);// Default: $_CONFIG['upload_reject_extension'] = array();//$_CONFIG['upload_reject_extension'] = array(“php”);/** LOGGING*///// 有文件上传或者新建文件夹后,发送Email通知// Default: $_CONFIG['upload_email'] = “”;//$_CONFIG['upload_email'] = “”;////日志文件记录,如果有目录或者文件被访问,就会记录在这个日志文件中。// For example: $_CONFIG['log_file'] = “.log.txt”;// Default: $_CONFIG['log_file'] = “”;//$_CONFIG['log_file'] = “”;
2013年07月18日
5,004 阅读
0 评论
0 点赞
1
...
7
8
9
...
18