用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 .....
下载猎豹浏览器试用,因为chrome皮肤
:网络    :kukei    :2012-10-10 23:12:57
:评论(1)

现在的浏览器市场竞争实在是太激烈了,毕竟都为了争夺互联网入口。但是中国的竞争好像是穿马甲竞争的更多,都是套个壳子就自称是原创了,最近猎豹听说挺火的,来看看吧。

早前我就下载过猎豹浏览器,但当时没chrome的皮肤我就删除了,今天在其他网站上看到新出了chrome风格,我就重新下载了。因为看了些文章,说这个浏览器不错,然而之所以非得用chrome风格实在是因为已经习惯这种简约大方,可是范围广的风格了,其他风格我已经严重不适应了。我相信也有这个风格的原因,chrome浏览器才能这么快的扩大市场份额。

说到这儿不得不说ie9了,我现在电脑上装的也有ie9,但是很少用,只那他来测试页面。实在是看不惯它放这标题栏这么大的地方不用,非把标签栏和地址栏放一起,简直是脑子被门挤了,Safari同理。

因为工作和学习的原因我电脑上装的浏览器不少,有ie9,chrome,360安全浏览器,360极速,Mozilla Firefox,Safari,世界之窗.....

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.....
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.....

CSS浏览器差异之line-height
:HTML/CSS    :kukei    :2012-08-16 17:55:37
:评论(0)

CSS浏览器差异之line-height1