标签为 "css" 的文章

IE6下javascript不能隐藏select标签的bug

三水清 2011-05-13 23:50:574 Comments

昨天做了一个简单的项目，要求有三级联动的select菜单，可是伤不起的IE6下就出现了不能隐藏select的bug，之前我也介绍过IE6下select层高的问题，可以通过隐藏select或者使用iframe遮挡的方式来解决，今天的bug不同以前，大家如果在用js控制select显示隐藏的时候可能会经常遇到，调试一下午终于找到了解决的方案，特此记录一下。

IE6不能隐藏select重现代码

建立两个关联的select，通过javascript控制第一个select 发生变化后，第二个select根据第一个value重新添加options，如果为空则隐藏第二个select（示例中判断除第一个之外都隐藏），则由第一个select的第三个value切换到第二个value则第二个select就不会隐藏。
具体效果见下面的实例：

IE6 select隐藏bug

IE6下不能隐藏select标签解决方案

  1. 可以通过先设置select为显示，后设置为none的方式
  2. 通过给select添加class来控制显示

具体方法，见示例代码源码注释的地方。

三种常见jQuery幻灯片（jQuery slider）制作教程

三水清 2011-01-21 23:25:543 Comments

好久没正儿八经的写写js代码了，再不写就生疏了，昨天无意中发现cityhouse的首页幻灯片有问题，于是今天就写了三个幻灯片实例，如果还不会用jquery写幻灯片的可以参考我之前的文章：《CSS+jQuery实现滑动幻灯片实例详解》以及两个jQuery幻灯片实例。

今天的三个jQuery幻灯片其实还是两个，只不过第一种滚动的幻灯片有两种形式：分别是上下滚动和左右滚动。兼容IE6+，FF，chrome等主流浏览器。
效果和淘宝首页的幻灯片效果相同，自动播放时是一直往一个方向前进。
布局方面还算比较简洁，大家可以根据自己的需要添加内容，另外这次的幻灯片加上了文字，其实不光图片可以slider，文字也可以slider一会的。另外加了一点CSS3，就是控制按钮圆角化了（FF3.6+和chrome下有效果）。

截图

三种常见jQuery幻灯片（jQuery slider）实例

三种常见jQuery幻灯片（jQuery slider）实例

教程

继续阅读全文……

前端必须熟悉的10个CSS3属性

三水清 2010-12-29 18:59:576 Comments

随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。 上篇博文提到了《前端必须掌握30个CSS3选择器》，但是对于Css3的新属性，你又了解多少呢？虽然大多数的css3属性在很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。 关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说IE显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在文章的最后，我们将显示一个有趣的最终的案例。

1、border-radius

border-radius

border-radius

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。 border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。
圆
许多读者也许不会意识到我们可以用这个属性来做一个圆。
继续阅读全文……

前端必须掌握30个CSS3选择器

三水清 2010-12-28 21:57:58快抢沙发

也许你已经学会了CSS的三个简单常用的选择器：#ID，.class，标签选择器，可是这些就足够了吗？随着CSS3的到来，作为前端开发者需要掌握下面三十个基本的选择器，这样才可以在平时开发中得心用手。

本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。

1、*：通用元素选择器

* {  
 margin: 0;  
 padding: 0;  
}

*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法

*选择器也可以应用到子选择器中，例如下面的代码：

#container * {  
 border: 1px solid black;  
}

这样ID为container 的所有子标签元素都被选中了，并且设置了border。

查看演示

兼容性
  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

#ID：ID选择器

#container {  
   width: 960px;  
   margin: auto;  
}

ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。

查看演示

兼容性
  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

.class:类选择器

.error {  
  color: red;  
}

类选择器效率低于ID选择器，一个页面可以有多个class，并且class可以放在不同的标签中使用。

查看演示

继续阅读全文……

引入CSS 的两种方式：link和@import的区别

三水清 2010-06-19 20:37:44快抢沙发

引入css外部文件的两种方法为在html页面通过link，src属性（注意空链接时的陷阱！），再者是通过CSS文件本身通过@import url()引入，虽然这两种方式都可以加载进来CSS文件，可是link和@import也存在着细微的差别。

隶属上的差别

link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多。

@import次数限制

传闻在IE6下，@import只能引入31次css文件，可是可以通过在css文件中再次import来垂直扩展，断桥残雪没有测试过，不过如果出现这样的情况，说明这个写代码的人也挺变态的。

加载顺序的不同

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显，@import这点跟把CSS文件放在页面结尾效果相同，不过如果我们一些样式开始页面并不会出现，而是在交互时才出现的CSS样式，可以通过这个方法引入，时间上错开。例如：Ajax的html，交互时的弹出框，弹出div等
继续阅读全文……

悼念地震，网站变灰CSS代码

三水清 2010-04-20 02:15:079 Comments

为了悼念地震中遇害的同胞，国家规定明天开始悼念日~下面贴出来使用CSS的IE滤镜代码实现网站变灰白的效果代码，只在IE下有效~
首先确定贵网站使用的是标准的doctype头，下面是html开头代码：

<!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">

然后使用下面的CSS代码

html {
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

如果贵网站有Flash，那么请在<object>和<&/object>之间插入一下代码：

<param value=”false” name=”menu”/>
<param value=”opaque” name=”wmode”/>

使用CSS设置文字反选的背景颜色

三水清 2010-02-21 19:51:39快抢沙发

在计算机操作中经常会有反选出现，系统一般会根据选择区域的颜色，显示出补色。但windows默认的文字选择时，背景为蓝色，前景色为白色，如果背景是深色，则文字为蓝色，背景变成白色。如下图所示：

反选默认样式

反选默认样式

能不能改变选择的默认颜色呢，也许很多人对这个问题不是很在意，也可能你早就见到过这个效果了，但是却忽略了。查看示例(请在非IE浏览器下查看)

从博客里可以看到PPK给出了如下的CSS代码：

::-moz-selection{    /*针对Firefox*/
    background:#cc0000;
    color:#fff;
}
 
::selection {
    background:#cc0000;
    color:#fff;
}
 
code::-moz-selection {  /*code是标签选择器，可以换成p或span等*/
    background: #333333;
}
 
code::selection {
    background: #333333;
}

通过以上代码可以看出，你完全可以给不同的容器定义不同的反选背景颜色，

CSS+jQuery实现滑动幻灯片实例详解

三水清 2010-02-08 18:18:012 Comments

今天我看见一个比较不错的jQuery幻灯片教程，比我之前的文章《两个简单的jQuery幻灯片实例》写的更为详细，并且有框架布局的演示图片，特地转载来，部分英文不翻译了，很简单的~

HTML部分代码

Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

css+jQuery实现滑动幻灯片实例教程

css+jQuery实现滑动幻灯片实例教程


继续阅读全文……

Less—让CSS如此简单

三水清 2010-02-07 17:47:272 Comments

less

写CSS 最痛苦的是要搞定一堆浏览器兼容bug ，其次就是要面对CSS 不是programming language 这现实，不存在其他程式语言常见的变数、运算、继承等概念，使原本简单的工作变得冗长，并且使维护工作变得麻烦。
less 的出现便是为了解决这个问题：在现有CSS syntax 的基础上，为CSS 加入程式语言的特性，包括变数、scope、nested rules、运算、继承。
看例子你便会明白：

@brand_color: #F0F;
 
#container {
div {
color: @brand_color;
border: none; }
p {
color: @brand_color;
}
}

继续阅读全文……

第1页 / 共2页 12
♦▐返回顶部