Google [站内搜索]

分类: HTML/CSS预览模式: 普通 | 列表

CSS控制表格的交替颜色三例

<style type="text/css">
<!--
tr {background-color:e­xpression((this.sectionRowIndex%2==0)?"red":"blue")}
-->
</style>

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4578
既判断分辨率,也判断浏览器

应E.Qiang提议,重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。

HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4690

动态修改框架(frame)src属性的方法

框架(frame)的src属性是只读的,按照正常的思路(document.frames["faramename"].src)去修改会提示没有权限,但通过设置document.getElementById["frameid"]的src属性或设置弹出窗口的打开目标等方法我们仍可以达到动态修改框架src属性的目的,下面是本次测试代码:

<iframe name="frame1" id="frame1" src="" width="400" height="400"></iframe><br />
<input name="btn2" type="button" id="btn2" value="按钮一(不行)" onclick="document.frames['frame1'].src='http://www.163.com/';" />
<input name="btn3" type="button" id="btn3" value="按钮二(不行)" onclick="document.frames['frame1'].document.location.href='http://www.sohu.com/';" />

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5909

链接打开目标(target)的一些测试

链接的target属性决定了链接在哪边打开,它的值通常为以下五种:_blank、_self、_parent、_top和自定义,依次表示为:新窗口、当前窗口、父窗口、顶层窗口和框架。当所指名称的框架不存在时,自定义作用等同于_blank。今天我们主要测试一下当所指名称的框架处于不同层次页面中或不同层次页面中都有该名称框架时链接在哪个框架中打开?

一、测试

1.测试一:指定名称的框架处于不同层次页面中

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3841

CSS解决文字环绕图片问题



上图是美工为一站点制作的图文并茂的新闻标题列表,采用表格进行布局,右上和下部分分布在两个单元格中,程序实现起来可不太容易:要么分两次查询,一次取4条,一次取5条;要么一次取出9条,再分在两个单元格中显示。能不能通过设置图片的属性,让文字和图片像Word中一样可以四周环绕对齐?这样程序就不用理会图片,只负责一次读取显示就可以了。经测试将图片的float属性设置为left可解决我们的问题,效果如下图:

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4174

使用overflow代替left截取指定长度字符串

为了防止文章标题过长超过容器(td,div)宽度而显示成多行,我们通常要对标题进行处理让其显示在一行,通常使用的方法有两种:一种方法是在客户端用CSS设置容器的overflow属性;另一种方法则是在服务器端用left函数对标题字符串进行截取。两种方法通常情况下都能达到我们的目的:

<style type="text/css">
div{
width:200px;

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4118

重新认识 button 标签

对每一个程序设计者来说,为用户创建一个统一的界面是一个不变的追求。网站中建立一致性是特别困难的,根据浏览器和操作系统的严重不同,几而且乎什么能做和不能做是任意的,所以视觉表现也很不一样。在任何地方比你处理表单元素时和建立标准的外观的战斗中最大的失败变得更加显然的就是最有名的提交按钮。

照现在这个样子,用Type="submit"输入即丑陋(Firefox),还有点神病(Internet Explorer)或者十分玩固(Safari)。用的最多的办法是使用图片输入和我们自己创建这个该死的东西。这是很不幸的,因为每次我们需要一个新的按钮时就要被迫于打开Photoshop的单调乏味。我们需要的是一些更好的东西——一些对设计者更加灵活和有意义的东西。幸运的是解决方案已经有了而且它只需要一点爱,我的朋友们,请允许我介绍我的小朋友给你吧:<button>元素。

Inputs VS Buttons

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3874

动态改变单元格的背景图

同事说他动态改变单元格背景图老不行,让我看下,HTML如下:

<table width="200" height="50" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="ya_4.jpg" onmouseover="this.style.background='ya_5.jpg';"> </td>

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4536
随着公司网站的再度改版,当初在页面代码规划以及css设计方面的问题逐渐都浮现出来。由于设计当初考虑得不够全面,给站点的改版带来很多不必要的麻烦。CSS框架这个概念在这个时候显得越发的重要,也是必要!

在去年的时候曾经说过用Dreamweaver 代码片断 提高css开发效率。其实已经是CSS框架的雏形。而国外也开始有很多的CSS Frame出现。css框架已经是我们必须研究解决的一个问题。如果更快速、有效、可扩展的去书写站点的CSS代码。

这里为大家介绍一个CSS框架 - Elements 

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3773

Ajax的小贴士

在使用Ajax过程中,有时候总会遇到一些难题,浏览器兼容、编码、IE下的特殊处理等等,偶尔会搞的人头昏脑胀哭笑不得,这里列一些小贴士,或许有些用。

使用Javascript库

Ajax的流行和巨大威力,让我们重新审视了Javascript的开发,也直接促使各种库的出现。对于普通的开发者,使用一些适合自己的Javascript库不仅可以避免Ajax应用上的浏览器兼容等问题,也使其开发更加的稳定和高效。这里列一些我知晓的轻量级的Javascript库:

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3760