用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:#.....
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.....

TABLE边框的显示问题及显示控制方式
:HTML/CSS    :kukei    :2012-08-23 11:06:06
:评论(1)

问题:我用ueditor插入了一个单元格,使用的是table构造的,在ueditor中可以显示边框,但是在页面中不能显示边框。

环境:我是用了css框架--Blueprint CSS Framework 1.0.1,对table做了默认定义,如下:

table {border-collapse:collapse;border-spacing: 0px;}

原因:screen.css中的给table加了border=0

解决:screen.css中的给table加的border=0去掉

边框显示控制方式
<table   frame=above>   只显示上边框   
<table   frame=below>     只显示下边框   
<table   frame=vsides>   只显示左、右边框   
<table   frame=hsides>   只显示上、下边框   
<table   frame=lhs>   只显示左边框   
<table   frame=rhs>   只显示右边框   
<table   frame=void>     不显示任何边框   
<.....
用display隐藏Tabale的tr行在Firefox中问题的解决办法
:HTML/CSS    :kukei    :2009-06-02 16:49:43
:评论(0)

在Firefox和Google的浏览器中用display隐藏Table的tr行中无法正常显示的问题,例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
 <HEAD> 
  <TITLE> New Document </TITLE> 
   <SCRIPT LANGUAGE="JavaScript"> 
  <!--  
  var i =1;  
       function change()  
       {  
              
           var dd = 'tr'+i;  
              document.all(dd).style.display="none";  
          i ++;  
       }  
   var j =1 ;  
       function changeadd()  
       {  
              
           var dd.....
CSS颜色代码对照
:HTML/CSS    :kukei    :2009-05-26 08:41:46
:评论(1)

现在给大家献上颜色对照码:

.....
FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000
#FFB7DD #FF88C2 #FF44AA  #FF0088  #C10066  #A20055  #8C0044 
#FFCCCC #FF8888 #FF3333  #FF0000  #CC0000  #AA0000  #880000 

使用css中的伪类和行为实现兼容各种浏览器的鼠标行为
:HTML/CSS    :kukei    :2008-11-22 09:53:29
:评论(0)

    css中有伪类和行为两种方式来简单方便的实现对象上的鼠标事件,但是不幸的是伪类只对ff系列的浏览器有效,行为只对ie系列的浏览器有效,不多不幸中的万幸是这两种方式虽然不能兼容但同时使用并不排斥,所以经过麻烦一点的设计还是能够实现兼容的css对象上的鼠标事件的。

首先我们看看行为和伪类是如何实现的,行为的实现说明摘自blueidea.com,如下:

IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

给元素固有属性赋值

下面是定义container容器的宽度,如果<725就为自己的宽度,否则就等于725,相当于max-width:725px;。

<style type="text/css" media="screen">
#co.....