target指定iframe的name之后仍弹出新窗口的问题
:Web开发    :kukei    :2013-03-16 14:06:28
:评论(1)

我们在页面中经常使用iframe来进行局部刷新,这是一个很方便的功能。比如我们用页面上的一个超链接来刷新我们指定的iframe,这时我们就在超链接标签中的target属性设置为我们要刷新的iframe的name,但是我们发现在有些浏览器中即使指定target为iframe的name,但是仍然会弹出一个新的窗口在现实新内容,这是我们不希望看到的,要解决这个问题就要用就用javascript来控制了。

具体代码如下:

<script type="text/javascript">
    function resetFrame(obj){$(obj).height($("#imglist .images",$("#listiframe").contents()).height()+500);}
    function initImg(){$('#listiframe').attr('src', $('.imgsider ul li.....
用Jquery实现iframe的高度自适应
:HTML/CSS    :kukei    :2013-01-16 08:51:16
:评论(5)

在web开发中经常要用到iframe这个功能,它能灵活方便的在页面上载入另一个页面,但是显示方面的问题就是在使用iframe的页面进程出现双滚动条,这个在显示效果上极其差劲。出现这个情况的原因就是当前页面和iframe页面的高度没能自适应,在最近的开发中我发现使用jquery很方便就能实现高度的自适应,方法如下。

首先页面布局如下:

<html>
<body>
<div id='a'><iframe id="ai" src="" style="..."></iframe></div>
<div id='b'><iframe id="bi" src="" style="..."></iframe></div>
</body>
</html>

js脚本如下:

$('iframe').load(function(){
    var $this = $(this);
    $this.height($($this.contex.....
css  html  jquery  web  
CSS知识点之选择器selector
:HTML/CSS    :kukei    :2012-11-07 21:14:27
:评论(1)

使用CSS已经有很长时间了,但是还真没有认认真真学习一下css的规范呢,以前都是用到那儿,查到哪儿,今天在解决只在文章最外层的P标签上进行首行缩进时,思路有点乱,因此将CSS的选择器整理一下,以备学习。

1.Tag selector

标签selecor ,也可以称为类型selector,它将对HTML页面中所有的该类型有效。

h1 {font-family:Arial,sans-serif;color:#CCCCFF;} 
DIV,H1 {font-family:Arial,sans-serif;color:#CCCCFF;}

表示所有h1标签都适用该CSS的rule,当然为了缩短代码,适用相同的rule的多个HTML Tag可以用逗号分隔开进行统一的修饰。如上。

2.Class Selector

类选择器和HTML中的class相结合,应用到所有声明了该class的标签中。类选择器必须要以 “.”来开头。
对于

.title{color:#.....
SDLog优化了留言评论的风格
:Web开发    :kukei    :2012-11-05 22:51:35
:评论(1)

今天对留言评论的风格进行了优化,增加了小小尖角提示,以及边框的发光效果,当然这些都是用html+css实现的,没有用到图片啊,我觉得这个功能非常实用,在SDLog中使用后还可以搬到其他程序中用,先看看效果怎样。  

代码如下

HTML代码:

<div id="e-345" class="comment clear">
       <div class="avatar font-12"><a href="/goto/http://www.szinlan.com/" target="_blank">kukei</a></div>
       <div class="cmtctt poptip">
             <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
             <div class="cmtctt-ctt .....
Bootstrap一个来自Twitter的前端框架
:Web开发    :kukei    :2012-09-14 18:29:22
:评论(2)

Bootstrap已经推出版本了,但是我是到现在才了解到这个东东的。据说它是一个简单灵活流行的 HTML, CSS, Javascript 用户界面与交互组件。做web开发经常受困于前端展示效果,受困于浏览器的差异,因此我也学些了许多css框架,就像现在的sdlog程序就使用了css框架,但其实我之用了其中的网格和reset的部分功能,因为我一直觉得它还不是很好用。但是今天的这个东东既然大家这么推荐就学些一下,希望能在sdcms上用到,简化前端的设计工作。

相关资料:

http://www.bootcss.com/

Bootstrap, 来自 Twitter

https://github.com/twitter/bootstrap/

http://www.iteye.com/blogs/tag/bootstrap

看看Bootstrap的简介:

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他.....

HTML之上传控件“input=file”的美化
:HTML/CSS    :kukei    :2012-09-07 21:58:01
:评论(1)

上传控件“input=file”恐怕是html控件中最不好控制,最不好美化,在不同的浏览器中差异最大的一个了,最近为了做一个jquery的上传插件不得不开始学习这个控件的美化方法了。

为什么一定要做“input=file”控件的美化呢?因为只有这样才能在所有浏览器中显示一致,这样就能很好的控制整个页面布局。

看看原生“input=file”控件在各个主要浏览器的表现:

美化的原理:将input到一个div框里,div设置position为relative,input设置position为absolute,opacity设置为0,这样input表现为全透明,不可见,但覆盖在文字之上,div里的其他文字可以显示出来,而单击div,依然会触发上传事件。

html代码:

<div class="u-file-c u-file-btn">
        <input type="file" name="attach" />请选择上传文件
</.....
网页上首行缩进的问题
:HTML/CSS    :kukei    :2012-09-07 13:25:38
:评论(1)

在看现在的博客风格时总是觉得有些地方不对,比如文章中文字感觉密密麻麻的,但是我设置的行距已经1.8了,在观察了其他网友的博客后才发现是少了首行缩进。

网上搜了一下,原来首行缩进在css中是支持的。

搜到的结果是P标签中可以用text-indent:2em来设置,这里的2em代表的是4个字节,相当于2个汉字,4个英文字母。

参看网友的源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
.....
一招搞死ie6的方法
:HTML/CSS    :kukei    :2012-09-04 11:16:12
:评论(0)

网上也曾经发现过一个css就搞死ie6的情况,我今天发现的不知道算不算这个范围。

一个div中有个ul,我想让ul超出部分隐藏,因此使用overflow:hidden;这样在ie7+,firefox,chrome等浏览器下均ok,但是在ie6下不起作用,导致页面错位变形。

在晚上搜索后发得知需要在ul父标签中加上position:relative;,谁知加上后更悲剧,直接导致ie6的cpu100了,难道这样不行?

郁闷中...

再试一次在li上加overflow:hidden;,在ul上加position:relative;,结果还是导致ie6的cpu100了.

最后在div的父标签上加上了overflow:hidden;position:relative;算是初步解决了隐藏问题,唉,赶快淘汰了ie6吧。

我的css如下:

/* sidebar */
#sidebar {padding:0px;margin:0px;overflow:hid.....
SAE上Storage的防盗链问题
:Sina    :kukei    :2012-09-03 18:02:44
:评论(1)

sae的Storage开启了防盗链功能以后发现UEditor中的图片无法显示了,这个问题已将发到Sae和Ueditor的论坛上了等待回复。

我初步估计是Ueditor编辑器在请求图片时没有提交求情者的域名,白名单中不允许这个网站的显示storage中的图片,我发现baidu空间的图片在编辑器中可以显示,反而在页面中无法显示,初步推断是防盗链设置的问题。

我不启用防盗链在Ueditor中是可以正常显示的。

原因

经过使用chrome的开发工具跟踪,比较,发现在编辑器中插入图片时是用javascript实现,此时的请求中没有包含“Referer“参数,而在能正确显示图片的地方都包含了此参数,而且此参数的域名内容都在Storage的白名单中,依次推断防盗链时应该是依据此参数来判断的。那么什么是Referer呢?

简言之,HTTP Referer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是.....

css之sprite技术
:HTML/CSS    :kukei    :2012-08-28 17:58:55
:评论(1)

在百度的站长工具提示的网站优化中知道了这个技术"css sprite",但是其实我已经使用了这个技术。

CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“backgroun.....