css - Fdream's Blog

1 2 3

2005-6

Fdream 发表于 Ajax Web，已被阅读 13938 次，评论 0 条
关键词：CSS Flash

Flash版的CSS 2.0 盒模型

盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。

下面一张是 http://www.w3cn.org 提供的 3D 模型图：

继续阅读全文

尝试XHTML，第一个页面

2005-6

Fdream 发表于 Ajax Web，已被阅读 14485 次，评论 0 条
关键词：XHTML CSS

知道XHTML也不算早，直到今天才尝试了一下用 CSS＋DIV 定位，把昨天画的那个页面转化成了网页！

以前很难相信不用表格也能作出很漂亮的网页，今天自己亲自尝试了一下，哈哈，还真的可以（虽然我的不够pp）！

第一个作品：点这里查看

通过了 XHTML 校验和 CSS2 校验，发现要通过XHTML效验也比较简单！唯一不爽的是不支持输入文本框的 onMouseOver 和 onFocus ！

也算是边学变做了，最开始做的时候还真是有点困难，因为平时做网页都是用表格，CSS 用的也不多，而且都是很简单的 CSS ，然后针对那些常用的标签研究了一下，渐渐就上手了，呵呵～

由于初学，代码很烂，就不公布了（其实可以自己下载的），呵呵～

继续阅读全文

网页中文本框和按钮的一些特效

2005-4

Fdream 发表于 Ajax Web，已被阅读 13930 次，评论 0 条
关键词：网页设计特效 CSS

在网页制作中，表单中的对象总是给人一种单调与沉闷的感觉，比如说按钮、文本框等，它们一成不变的模样与颜色出现在页面上时，或多或少都会破坏页面的美观程度，就像我才作的那个登陆页面。

第一种效果：无立体效果的文本框与按钮

　　在网页的<head>与</head>标签之间插入这个样式表：

input.login{

border:1px solid black;

FONT-SIZE: 9pt;

HEIGHT: 14px;

LINE-HEIGHT: normal

}

</style>

好了第一步就完成了，下一步我们就分别在文本框与按钮的htm语句中加上这一句代码：class=login

例：<input type="text" name="textfield" class=login>

好了，可以看一下文本效果与按钮效果了：

继续阅读全文

关于网页标准

2005-4

Fdream 发表于 Ajax Web，已被阅读 21691 次，评论 0 条
关键词：XHTML CSS

接触网络这么久，网页也做了一些，从来就没有想过什么网页标准的问题，前几天由于时间关系，看了一点点相关的文章，今天有跑去看了，还是有点感触的，尤其其中提到了三大门户网站的设计均不符合网页标准：

代码校验(XHTML)

(校验地址：http://validator.w3.org/、

(http://www.htmlhelp.com/tools/validator/ )

www.sina.com.cn

失败，混杂的HTML，未达到XHTML1。黄色警报：字符集错误。(定义了GB2312，但页内使用了非GB2312字符)。非标准代码43处。

www.163.com

失败，混杂的HTML，未达到XHTML1。红色警报：未定义DOCTYPE。非标准代码41处。

www.sohu.com 失败，混杂的HTML，未达到XHTML1。黄色警报：字符集错误。非标准代码38处。

CSS2校验 (校验地址：http://jigsaw.w3.org/css-validator/validator-uri.html )

继续阅读全文

极细表格的做法

2005-4

Fdream 发表于 Ajax Web，已被阅读 15515 次，评论 5 条
关键词：网页设计特效 CSS 技巧

在网页中应用最广泛的就是表格了，作出一个漂亮的表格会为网页增色不少，而其中表格的边框就是很

重要的部分。新手在用表格时，总是发现自己作出来的表格边框很粗，不如人家的漂亮，这里介绍两种方法。

　　在介绍制作极细表格边框的方法之前，我们先来看一下有关标识的作用：

　　border：指定表格边框的厚度，单位为像素，数值为0表示表格不显示边框；

　　bordercolor：指定表格边框的颜色，可用颜色名或十六进制rgb值；

　　bgcolor：指定背景颜色，可用颜色名或十六进制rgb值；

　　cellspacing：指定相邻单元格边框的间距；

　　cellpadding：指定表格单元格与内容之间的间距；

　　bordercolordark：指定表格三维边框的深色颜色，可用颜色名或十六进制rgb值；

　　bordercolorlight：指定表格三维边框的浅色颜色，可用颜色名或十六进制rgb值。

　　方法一：

　　<table bgcolor="#ffffff" border="1" cellspacing="0" cellpadding="0" bordercolordark="#ffffff"

bordercolorlight="#000000">

　　<tr>

　　<td>极细表格边框</td>

　　</tr>

　　<tr>

　　<td>极细表格边框</td>

　　</tr>

　　</table>

　　注意事项：

　　1、border、cellspacing和cellpadding的设置不可更改；

　　2、表格边框的颜色实际上是由bordercolordark指定的；

　　3、bgcolor和bordercolorlight指定的颜色应该与表格外的区域的颜色一致。

继续阅读全文

虚线表格的制作方法

2005-4

Fdream 发表于 Ajax Web，已被阅读 15048 次，评论 2 条
关键词：网页设计特效 CSS 技巧

浏览网站的时候总是看见很多虚线表格，使得网页的边线看起来更舒服，其实做起来也很简单了，在表格的html里加上这个：

引用内容：

style="BORDER-LEFT:#000000 1PX DASHED;

BORDER-RIGHT: #000000 1PX DASHED;

BORDER-TOP: #000000 1PX DASHED;

BORDER-BOTTOM: #000000 1PX DASHED"

颜色是十六位代码，你可以自己设。

注：只能在IE5.5以上版本里用，到了NETSCAPE里一点用处都没有，除非你用做好的底图填充。

下面是一个例子：

继续阅读全文

Macromedia代言人谈为什么要用CSS

2005-4

Fdream 发表于 Ajax Web，已被阅读 17573 次，评论 0 条
关键词：Macromedia CSS 网页设计

Greg Rewis

Dreamweaver Evangelist

自从 Dreamweaver MX 2004 发布以来，我曾经无数次向 Dreamweaver 的新老用户演示它的新特征和新功能。每次进行产品演示，我很快就会极力称赞 Dreamweaver MX 2004 设计和呈现 CSS（或层叠样式表）的新功能。

然而最近某位新用户问了一个问题，说实话，这个问题一下子让我张口结舌。这位用户只是问：“我为什么要使用 CSS?”当时我意识到，尽管我们这些每天与 HTML 和 CSS 打交道的人非常了解 CSS 的优点，但仍有很多人并不了解。或者说并不完全了解 CSS 所能提供的所有优点。本文是我对上面那位新用户的书面回答。

CSS 起源

回顾 CSS 的优点之前，我要先介绍一下它的历史。Web 管理组织 W3C 在 1996 年 11 月推荐使用 CSS，并批准了 CSS 1 级规范。CSS 1 级规范说明了用于 HTML 页面的属性。这些属性代替了传统的字体标签和其他“样式”标记，例如颜色和边距。1998 年 5 月，W3C 批准了 CSS 2 级规范，将一些附加功能添加到 1 级规范，并引进了定位属性。这些属性代替了表格标签普遍（但是错误）的用法，用来设计页面元素的表示。CSS 规范的最新版本是 CSS 2.1，它改进了某些属性，并删除了在当前浏览器里没有作用或作用很小的属性。

不幸的是，就像很多新技术一样，CSS 经历了漫长的过程才被广泛采纳。其中的重要原因在于浏览器，以及为这些浏览器建立站点的 Web 设计者们。CSS 批准期间，Netscape Navigator (NN) 仍然是主导浏览器，而该浏览器基本上不支持 CSS。Microsoft 在其第 3 版浏览器中添加了对 CSS 非常有限的支持，但当时大多数的 Web 设计者（本人在内）仍然将 NN 作为首选平台进行页面编码。

继续阅读全文

关于链接特效（CSS）

2005-4

Fdream 发表于 Ajax Web，已被阅读 11948 次，评论 0 条
关键词：CSS 特效

经常看到有些网页的链接做的很漂亮，研究了一下，整理了一些代码，供大家参考：

　　一、先看看超连没有下划线的例子

　　在<head>和</head>之间加上如下的CSS语法：

引用内容：

<!--

a:link { text-decoration: none}

a:active { text-decoration: none }

a:visited { text-decoration: none }

-->

</style>

　　这样浏览器在执行时，就明白：a:link指正常的未被访问过的链接a:active指正在点击的链接a:visited指已经访问过的链接其中，text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成line-through给超连文字加上删除线，blink则使文字在闪烁。

　　二、类似的控制：使粗体文字加上删除线

继续阅读全文

1 2 3