从制造到创造

2007.10.12.网摘

01、《JSF视频教程》exe
02、Log4配置
03、初探tomcat连接池
04、Apache Derby简单入门
05、一个继承类
06、够用一辈子的几句话
07、《大道至简》个人读后杂谈
08、Java学习清单
09、java读取资源文件
10、Struts2学习笔记
11、From java.lang.reflect.Array source code To JVM
12、Struts国际化处理（转）
13、校园幽默
14、食品笑话
15、冷笑话
16、常用网址
17、穷人最缺少的是什么？
18、如何使用Log4j？
19、Hibernate Query对象
20、常用查询页面
21、ssh整合例子---struts、hibernate、spring+unit单元测试
22、Java字符集<转>
23、动物笑话 III[转贴]
24、技术挑战——根据编码函数写出解码函数
25、从request获取各种路径总结
26、一个很好的把java打包成exe的软件
27、垃圾收集机制(Garbage Collection)批判
28、AWT/SWT/Swing大比较之一：模型设计与实现
29、java 关闭IE
30、译文：35个导致你的博客冷清的理由
31、用Javascript模拟Java的Set
32、开发人员的洞房花烛夜
33、人生少走弯路的十条忠告
34、程序员四大忌
35、如何成功运用"蘑菇定律"？
36、写一个简单的工作流（三）
37、内核中的List结构
38、JDK1.4引入的新特性之一--断言（assert）
39、最简单的 AJAX 例子代码(完整注释)
40、log4j.properties通用配置
41、Java面试题
42、设定lib包下所有的jar到classpath
43、学习设计模式之我见(转)
44、设计模式之Proxy——买票篇(转)
45、JDBC连接数据库经验技巧
46、Java编写的模拟ATM取款机程序
47、软件技术(软件工艺)
48、DIV CSS网页布局常用的方法与技巧
49、练好项目管理
50、Factory(工厂)模式
51、TEA加密算法java版

posted @ 2007-10-12 19:57 CoderDream 阅读(272) | 评论 (0) | 编辑收藏

2007.10.11.网摘

01、Java中static、this、super、final用法简谈 <原作者 : kevin>
02、Ajax简易开发框架
03、ruby-lang上Ruby与Java的对比文章
04、局域网中无法访问的解决方法
05、时间脚本收集
06、《精通css高级web标准解决方案》资料
07、2007年4月份-10月份项目备忘录--2 敏捷首先要“看得见”
08、HttpURLConnection使用中遇到的一个问题
09、JAVA论坛
10、快速保存网页中所有图片的方法
11、javascript如何读取自身文件内的xml
12、音乐网站大全
13、职工可享受的假期及相关规定
14、JRuby:集Java和RoR之所长
15、通过javascritp对表格进行列拖动排序
16、Spring用户指南
17、JavaScript应用：Iframe自适应其加载的内容高度
18、JavaScript框架编程
19、JavaScript类的继承
20、Javascript事件设计模式
21、JavaScript中支持面向对象的基础
22、javascript树形结构完全封装
23、javascript读取xml
24、JavaScrip高级应用：操作模态与非模态对话框
25、使用javascript+dom+xml实现分页
26、JavaScript接受URL参数的代码
27、由浅到深了解JavaScript类
28、星星鼠标特效(没事的时候可以看看)
29、使用String.split()方法时要注意的问题
30、javascript38种小技巧，推荐新手查看
31、关闭浏览器时提示
32、时间脚本收集
33、一组常用的弹出窗口用法
34、通过宽带路由器搭建WEB/FTP服务器
35、js sort 扩展
36、HTML 中 SELECT 选项分组
37、字符，字节和编码
38、Hibernate复合主键BUG
39、开始→运行→输入的命令集锦
40、结合spring+hibernate与jdbc的事务
41、动物笑话 III
42、Windows下用subversion进行版本控制(ZZ)
43、解决WinXP网络不能互相访问
44、进展&安排
45、svn 服务简单搭建
46、我的手册
47、在网上发现好文一篇，与大家共享，哈哈~
48、如何成为一个早起者！！
49、迎接RIA时代的来临
50、【转】怎样成为优秀的软件模型设计者
51、myeclipse中对包的使用
52、个性化页面布局的设计思考与Rails初步实现
53、人成熟的４个标志
54、ActionServlet类
55、Json-lib 2.1发布
56、初试Filter对权限和session的控制。
57、Mysql5 交叉表查询
58、做个游戏:如果每天能有30分钟空闲时间的话
59、整理近几天处理JSP页面中遇到的几个问题
60、java 文件加载 (参考 Hibernate 源码 )
61、质量和快速决定了软件架构
62、lilya一个基于extjs的jsf组件编程模型......
63、教大家实现序列化的克隆
64、Java 的一些小细节，你知道吗？（《Java就业培训教程》读书笔记）
65、JAVA程序员不可不注意的编码规范
66、使用For遍历Map
67、学习java必看--习惯，心理篇
68、转：Java同步机制浅谈――synchronized对代码作何影响？
69、Hibernate 核心接口
70、一些优秀的自己却没用的小开源项目，
71、Calendar的使用（简单）
72、Ghost 指南

posted @ 2007-10-11 15:07 CoderDream 阅读(199) | 评论 (0) | 编辑收藏

如何正确利用超链接调用JavaScript函数

点击超链接调用JavaScript函数，一般人都用<a href="javascript:function();">
但这有个缺点，就是点击链接后，页面上的GIF动画将静止。

试看如下代码：

解决方法探讨：
<a onclick="javascript:Foo();">链接</a>
此时不影响动画显示，但鼠标移上去后，鼠标及超链接样式不发生变化，虽然可以利用样式表来改变鼠标及超链接样式，但毕竟有些繁琐，况且这种思路也不好。
再考查如下代码：
<a onclick="javascript:Foo();" href="#">链接</a>
我们可以发现，虽然点击链接后不影响动画显示，但页面总是滚到最上面，这种效果也不是我们想要的。

最终解决方法：
<a onclick="javascript:Foo(); return false;" href="#">不影响GIF的链接</a>
由于点接链接后，先触发onclick，再执行href属性对应的值，在onclick中加上return false;中断了执行，所以页面就不会跳到最上部了。

posted @ 2007-10-11 10:11 CoderDream 阅读(4435) | 评论 (2) | 编辑收藏

2007.10.10.网摘

01、为我学习 Spring AOP 准备（Proxy）
02、满江红的中文技术文档
03、Tomcat 5/6 GBK 编码下完美解决中文表单问题的过滤器
04、HttpURLConnection使用中遇到的一个问题
05、jsf1.2 自定义日历组件
06、Eclipse中安装Maven
07、利用XmlBean轻松读写xml(转)
08、通用权限管理系统设计篇（三）——概要设计说明书
09、让OSGi支持JSF Web开发
10、第一次与猎头“亲密接触”
11、javax.mail使用例子
12、英语口语可以这样练成
13、让 java 动态
14、教大家学习多线程和对象流

posted @ 2007-10-10 17:20 CoderDream 阅读(152) | 评论 (0) | 编辑收藏

CSS滤镜

4、CSS滤镜
   4.1、Alpha属性－－设置透明层次
   4.2、Blur 滤镜－－模糊效果
   4.3、FlipH、FlipV 滤镜－－水平垂直翻转
   4.4、Gray滤镜－－灰度
   4.5、Invert滤镜－－反转
   4.6、Xray滤镜－－X射线
   4.7、Wave滤镜－－波纹

        使用滤镜属性可以把可视化的滤镜和转场效果添加到一个标准的 HTML 元素中，例如图片、文本，以及其他一些对象。对于滤镜和渐变效果，前者是基础，后者是滤镜效果的不断变化和演示更替。下面介绍几种常用的滤镜：

        1、Alpha 滤镜-- 设置透明层次
            基本语法

{

    filter: alpha (

        opacity = opacity,

        finishopacity = finishopacity,

        style = style,

        startx = startx,

        starty = starty,

        finishx = finishx,

        finishy = finishy

    )

}

            语法解释
            Alpha 属性是把一个目标元素与背景混合，设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。它们的含义分别如下：

　　“opacity”：代表透明度水准。范围是从0~100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
　　“finishopacity”：是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
　　“style”：指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
　　“StartX”和“StartY”：代表渐变透明效果的开始X和Y坐标。
　　“FinishX”和“FinishY”：代表渐变透明效果结束X和Y 的坐标。

        文件范例：13-23.htm

{

    filter: alpha (

        opacity = opacity,

        finishopacity = finishopacity,

        style = style,

        startx = startx,

        starty = starty,

        finishx = finishx,

        finishy = finishy

    )

}

        文件说明：
            设定 Alpha 滤镜为半透明

        显示结果：

下面的三种效果除“Style”参数不同外（分别为1、2、3），其它参数均相同。图1的代码是： Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)；

        2、Blur 滤镜-- 模糊效果
            基本语法

{    filter:blur (
        add = add,
        direction = direction,
        strength = strength
    )
}

            语法解释
            add 参数是一个布尔判断：true （默认）或false ，它指定图片是否被改变成印象派的模糊效果。
            模糊效果是按顺时针方向进行的，derection 参数用来设置模糊的方向。其中0°表示垂直向上，然后每45°为一个单位，默认值是向左的270°。
            strength 值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响，默认是 5 像素。

        文件范例：13-24.htm

<HTML>
    <HEAD>
        <TITLE>CSS中的Blur滤镜</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
    <H2>强大的CSS滤镜</H2>
    <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        文件说明：
            设定了 blur 滤镜的模糊强度为 10。

        显示结果：

        3、FlipH、FlipV 滤镜-- 水平垂直翻转
            基本语法

{ filter:filph }
{ filter:filpv }

            语法解释
            上述两句代码分别表示水平翻转和垂直翻转

        文件范例：13-25.htm

<HTML>
    <HEAD>
        <TITLE>CSS中的FlipV滤镜</TITLE>
        <Style Type="text/css">
            
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        文件说明：
            设定垂直翻转滤镜

        显示结果：

        4、Gray 滤镜 -- 灰度
            基本语法

{ filter:gray }

            语法解释
                Gray 滤镜的作用是把一张图片变成灰度图。

            文件范例：13-26.htm

<HTML>
    <HEAD>
        <TITLE>CSS中的Gray滤镜</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        显示结果：

        5、Invert 滤镜 -- 反转
            基本语法

{ filter:invert }

            语法解释
                Invert 滤镜的作用是把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。

        文件范例：13-27.htm

<HTML>
    <HEAD>
        <TITLE>CSS中的Invert滤镜</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        显示结果：

        6、Xray 滤镜 -- X 射线
            基本语法

{ filter:xray }

            语法解释
                Xray 滤镜的作用是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。

        文件范例：13-28.htm

<HTML>
    <HEAD>
        <TITLE>CSS中的Xray滤镜</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

        显示结果：

        7、Wave 滤镜 -- 波纹
            基本语法

{
    filter:wave (
        add = add,
        freq = freq,
        lightstrength = strength,
        phase = phase,
        strength = strength
    )
}

            语法解释
                 Wave
                Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；
　　        Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。　　
                LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。　　　
                Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。
                STRENGTH 振幅大小

        文件范例：13-29.htm

<HTML>
    <HEAD>
        <TITLE>CSS中的Wave滤镜</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H2>强大的CSS滤镜</H2>
        <IMG Src=13-23.jpg>
    </BODY>
</HTML>

显示结果：

posted @ 2007-10-09 17:59 CoderDream 阅读(469) | 评论 (1) | 编辑收藏

日期作为查询条件的处理方法

在再保系统中，我们有时候会以某个日期作为查询条件，如在“参数维护”的某个模块中，需要将“生效日期”作为查询条件。

我们在JSP中使用JS插件输入“yyyy-mm-dd”格式的日期，但是数据库（DB2）中的字段是“TimeStamp”，而我们在DBean中用VO接这个字段是用“Date”类型，这样在做查询的Dao类的方法中，我们要对这个字段进行处理。

首先定义一种格式变量：
SimpleDateFormat myFmt = new SimpleDateFormat("yyyy-MM-dd");

然后将Date类型的变量进行格式化：
myFmt.format(reCededRateVO.getBoundDate())

这样会得到“yyyy-MM-dd”格式的日期，然后就可以放到Sql语句中作为条件进行查询了。

/**
* description: 根據公司別、再保類別查詢與之相符合的紀錄
*
* @param reCededRateVO
*            ReCededRateVO
* @param startRow
*            起始行
* @param numberOfRows
*            讀取行數
* @return List 結果集
* @throws DbAccessException
*             數據庫訪問異常
*/
public List selectListByCode(ReCededRateVO reCededRateVO,
        int startRow, int numberOfRows) throws DbAccessException {
    if (DEBUGLOG.isDebugEnabled()) {
        DEBUGLOG.debug("[ReCededRateDataDao.selectListByCode()]"
                + "[begin]");
    }
    SimpleDateFormat myFmt = new SimpleDateFormat("yyyy-MM-dd");
    StringBuffer hqlBuff = new StringBuffer(
            "from ReCededRateData as t where 1=1");

    // 公司別
    if (!"".equals(reCededRateVO.getCompanyFlag())
            && reCededRateVO.getCompanyFlag() != null) {
        hqlBuff.append(" and t.id.companyFlag = '"
                + reCededRateVO.getCompanyFlag() + "'");
    }

    // 再保類別
    if (!"".equals(reCededRateVO.getReinsuranceClass())
            && reCededRateVO.getReinsuranceClass() != null) {
        hqlBuff.append(" and t.id.reinsuranceClass = '"
                + reCededRateVO.getReinsuranceClass() + "'");
    }

    // 再保層次
    if (!"".equals(reCededRateVO.getReinsuranceLevel())
            && reCededRateVO.getReinsuranceLevel() != null) {
        hqlBuff.append(" and t.id.reinsuranceLevel = '"
                + reCededRateVO.getReinsuranceLevel() + "'");
    }

    // 生效日期
    if (!"".equals(reCededRateVO.getBoundDate())
            && reCededRateVO.getBoundDate() != null) {
        hqlBuff.append(" and t.endDate >= '"
                + myFmt.format(reCededRateVO.getBoundDate())
                + "' and t.id.boundDate <= '"
                + myFmt.format(reCededRateVO.getBoundDate()) + "'");
    }

    hqlBuff.append(" order by t.id.companyFlag asc, t.id.boundDate asc,"
            + "t.id.reinsuranceClass asc, t.id.reinsuranceLevel asc,"
            + "t.id.reCompanyCode asc, t.id.bodyFlag asc");
    // 以公司別+生效日期+再保類別排序+再保層次+再保公司+體位別");

    List list = this.hQueryByPage(hqlBuff.toString(), startRow,
            numberOfRows);
    if (list != null && list.size() > 0) {
        if (DEBUGLOG.isDebugEnabled()) {
            DEBUGLOG.debug("[selectListByCode()]select list success![end]");
        }
        return list;
    } else {
        if (DEBUGLOG.isDebugEnabled()) {
            DEBUGLOG.debug("[selectListByCode()]select list return null!"
                    + "[end]");
        }
        return null;
    }
}

posted @ 2007-10-09 15:41 CoderDream 阅读(710) | 评论 (0) | 编辑收藏

[zt]通过按钮添加行

<html>
    <head>
        <script language="javascript">
            var rowIndex = 0;

            function addOneLineOnClick() {
                var row = tb.insertRow(tb.rows.length);
                col = row.insertCell(0);
                col.innerHTML = "<tr><input size='90'  name=btn index=\""+ rowIndex +"\" >";
                col = row.insertCell(1);
                col.innerHTML = "<input type='button' value='Del'  onclick=\"return DeleteRow('row" + rowIndex +"')\"></tr>";
                row.setAttribute("id", "row" + rowIndex);
                row.setAttribute("name", "row" + rowIndex);
                rowIndex++;
            }

            function DeleteRow(rowTag){
                var i = tb.rows(rowTag).rowIndex;
                var j;
                for(j=i;j<=rowIndex;j++) {
                    tb.rows(j).cells(0).all("btn").index--;
                }
                tb.deleteRow(i);
                rowIndex--;
            }
        </script>
    </head>
    <body >
        <div align="center">
            <table width="95%" name="tb" id="tb">
                <tr>
                </tr>
            </table>
            <p>
            <input name="btnAddLine" type="button" id="btnAddLine" onClick="return addOneLineOnClick()" value="Add">
        </div>
    </body>
</html>

posted @ 2007-10-09 10:14 CoderDream 阅读(319) | 评论 (0) | 编辑收藏

CSS的边框属性、鼠标光标属性、定位属性、区块属性、列表属性

   3.4、边框属性
   3.5、鼠标光标属性
   3.6、定位属性
   3.7、区块属性
   3.8、列表属性

3.3.4、边框属性

        不同方向的边框属性如表所示：

边框属性	描述
border	边框
border-top	上边框
border-left	左边框
border-right	右边框
border-bottom	下边框

对于边框的样式，可以按照下表中所示进行设置：

边框样式属性值	描述
none	无边框
dotted	边框由点组成
dash	边框由短线组成
solid	边框是实线
double	边框是双实线
groove	边框带有立体感的沟槽
ridge	边框成脊型
inset	边框内嵌一个立体边框
outset	边框外嵌一个立体边框

范例文件：13-18.htm

1 
2 
3 
4 
5 <HTML>
6     <HEAD>
7         <TITLE>CSS背景图像位置</TITLE>
8         <Style Type="text/css">
9         
17         </Style>
18     </HEAD>
19     <BODY>
20         <H1>主流的网页设计软件</H1>
21         <p>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
22     </BODY>
23 </HTML>

文件说明：
第10～15行分别设定了上、右、下、左4个边框的宽度、边框样式和颜色。

显示结果：

3.4.5、鼠标光标属性

鼠标光标属性值描述

hand 手

crosshair 交叉十字

text 文本选择符号

wait Windows 的沙漏形状

default 默认的鼠标形状

help 带问号的鼠标

e-resize 向东的箭头

ne-resize 指向东北方的箭头

n-resize 向北的箭头

nw-resize 指向西北方的箭头

w-resize 向西的箭头

sw-resize 指向西南方的箭头

s-resize 向南的箭头

se-resize 指向东南方的箭头

范例文件：13-19.htm

鼠标光标属性值	描述
hand	手
crosshair	交叉十字
text	文本选择符号
wait	Windows 的沙漏形状
default	默认的鼠标形状
help	带问号的鼠标
e-resize	向东的箭头
ne-resize	指向东北方的箭头
n-resize	向北的箭头
nw-resize	指向西北方的箭头
w-resize	向西的箭头
sw-resize	指向西南方的箭头
s-resize	向南的箭头
se-resize	指向东南方的箭头

<HTML>
    <HEAD>
        <TITLE>CSS鼠标光标属性</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <img src=13-19.jpg align=left>
        <P>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：

3.4.6、定位属性

定位属性描述

position “absolute”（绝对定位）、“relative”（相对定位）

top 层距离顶点纵坐标的距离

left 层距离顶点横坐标的距离

width 层的宽度

height 层的高度

z-index 决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素

clip 限定只显示裁切出来的区域，裁切出的区域为矩形。只要设定两个点即可，一个是矩形左上角的顶点，由top和right两项的设置完成，另一个是右下角的顶点，由bottom和 right 两项设置完成

overflow
当层内的内容超出层所能容纳的范围时：
visible：层的大小、内容都会显示出来
hidden：会隐藏超出层大小的内容
scrol：不管内容是否超出层的范围，选中此项都会为层添加滚动条
auto：只在内容超出层的范围时才显示滚动条

visibility
这一项是针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层（子层）和被嵌套的层（父层）
inherit：子层继承父层的可见性，父层可见，子层也可见；父层不可见，子层也不可见
visible：无论父层可见与否，子层都可见
hidden：无论父层可见与否，子层都隐藏

范例文件：13-20.htm

定位属性	描述
position	“absolute”（绝对定位）、“relative”（相对定位）
top	层距离顶点纵坐标的距离
left	层距离顶点横坐标的距离
width	层的宽度
height	层的高度
z-index	决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
clip	限定只显示裁切出来的区域，裁切出的区域为矩形。只要设定两个点即可，一个是矩形左上角的顶点，由top和right两项的设置完成，另一个是右下角的顶点，由bottom和 right 两项设置完成
overflow	当层内的内容超出层所能容纳的范围时： visible：层的大小、内容都会显示出来 hidden：会隐藏超出层大小的内容 scrol：不管内容是否超出层的范围，选中此项都会为层添加滚动条 auto：只在内容超出层的范围时才显示滚动条
visibility	这一项是针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层（子层）和被嵌套的层（父层） inherit：子层继承父层的可见性，父层可见，子层也可见；父层不可见，子层也不可见 visible：无论父层可见与否，子层都可见 hidden：无论父层可见与否，子层都隐藏

<HTML>
    <HEAD>
        <TITLE>CSS定位属性</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <div class="self">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</div>
    </BODY>
</HTML>

显示结果：

3.4.7、区块属性

区块属性描述

width 设定对象的宽度

height 设定对象的高度

float 让文字环绕在一个元素的四周

clear 指定在某一个元素的某一边是否允许有环绕的文字或对象

padding 决定了究竟在边框与内容之间应该插入多少空间距离，它有4个属性，分别是：top、bottom、left、right，分别用于设定上下左右的填充距离

margin 设置一个元素在4个方向上与浏览器窗口边界或上一级元素的边界的距离。与“padding”类似，它也有上下左右4个属性，分别控制4个方向

范例文件：13-21.htm

区块属性	描述
width	设定对象的宽度
height	设定对象的高度
float	让文字环绕在一个元素的四周
clear	指定在某一个元素的某一边是否允许有环绕的文字或对象
padding	决定了究竟在边框与内容之间应该插入多少空间距离，它有4个属性，分别是：top、bottom、left、right，分别用于设定上下左右的填充距离
margin	设置一个元素在4个方向上与浏览器窗口边界或上一级元素的边界的距离。与“padding”类似，它也有上下左右4个属性，分别控制4个方向

<HTML>
    <HEAD>
        <TITLE>CSS区块属性</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <div class=self>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</div>
    </BODY>
</HTML>

显示结果：

3.4.8、列表属性

列表属性描述

list-style-type 设定引导列表选项的符号类型

bullet 选择图像作为项目的引导符号

position 决定列表项目缩进的程度，outside：列表贴近左侧边框；inside：列表缩进

列表符号类型属性值描述

disc 在文本行前面加“●”实心园

circle 在文本行前面加“○”空心园

square 在文本行前面加“■”实心方块

decimal 在文本行前面加普通的阿拉伯数字

lower-roman 在文本行前面加小写罗马数字

upper-roman 在文本行前面加大写罗马数字

lower-alpha 在文本行前面加小写英文字母

upper-alpha 在文本行前面加大写英文字母

none 不显示任何项目符号或编号

列表属性	描述
list-style-type	设定引导列表选项的符号类型
bullet	选择图像作为项目的引导符号
position	决定列表项目缩进的程度，outside：列表贴近左侧边框；inside：列表缩进

列表符号类型属性值	描述
disc	在文本行前面加“●”实心园
circle	在文本行前面加“○”空心园
square	在文本行前面加“■”实心方块
decimal	在文本行前面加普通的阿拉伯数字
lower-roman	在文本行前面加小写罗马数字
upper-roman	在文本行前面加大写罗马数字
lower-alpha	在文本行前面加小写英文字母
upper-alpha	在文本行前面加大写英文字母
none	不显示任何项目符号或编号

范例文件：13-22.htm

<HTML>
    <HEAD>
        <TITLE>CSS列表属性</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H2>图像设计软件</H2>
        <OL>
            <LI>Photoshop</LI>
            <LI>Illustrator</LI>
            <LI>Freehand</LI>
            <LI>CorelDraw</LI>
        </OL>
    </BODY>
</HTML>

显示结果：

posted @ 2007-10-08 17:18 CoderDream 阅读(4197) | 评论 (2) | 编辑收藏

CSS的颜色和背景属性

   3.3、颜色和背景属性
      3.3.1、颜色
      3.3.2、背景颜色
      3.3.3、背景图像
       3.3.4、背景图像重复
      3.3.5、背景图像位置

文本属性	描述
color	定义颜色
background-color	设定一个元素的背景颜色
background-image	设定一个元素的背景图像
background-repeat	决定一个指定的背景图像如何被重复
background-position	设置水平和垂直方向上的位置

3.2.1、颜色
颜色 color 属性允许网页制作者指定一个元素的颜色，一般用RGB，#FFFFFF（16进制数）表示。
文件范例：13-13.htm

<HTML>
    <HEAD>
        <TITLE>CSS颜色</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：

3.2.2、背景颜色

文件范例：13-14.htm

<HTML>
    <HEAD>
        <TITLE>CSS背景颜色</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：

3.2.3、背景图像

文件范例：13-15.htm

<HTML>
    <HEAD>
        <TITLE>CSS背景图像</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：

背景图像重复属性值	描述
repeat-x	图像横向重复
repeat-y	图像纵向重复
repeat	图像横向纵向重复
no-repeat	图像不重复（只显示一张图，无任何方向的平铺）

3.2.4、背景图像重复

背景图像重复属性值描述

repeat-x 图像横向重复

repeat-y 图像纵向重复

repeat 图像横向纵向重复

no-repeat 图像不重复（只显示一张图，无任何方向的平铺）

文件范例：13-16.htm

<HTML>
    <HEAD>
        <TITLE>CSS背景图像重复</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：

背景图像位置属性值	描述
left	背景图像居左
right	背景图像居右
center	背景图像水平居中，垂直居中
top	背景图像上对齐
bottom	背景图像下对齐

3.2.5、背景图像位置


背景图像位置属性值描述

left 背景图像居左

right 背景图像居右

center 背景图像水平居中，垂直居中

top 背景图像上对齐

bottom 背景图像下对齐


        与 background-repeat 属性结合使用，否则没有任何效果，因为 background-repeat 的默认属性为repeat。
文件范例：13-17.htm

<HTML>
    <HEAD>
        <TITLE>CSS背景图像位置</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：

posted @ 2007-10-08 14:40 CoderDream 阅读(6554) | 评论 (0) | 编辑收藏

CSS的文本属性

   3.2、文本属性
      3.2.1、字母间隔
      3.2.2、文字修饰
      3.2.3、文字排列
       3.2.4、文本缩进
      3.2.5、行间距

文本属性	描述
letter-spacing	定义一个附加在字符之间的间隔数量
text-decoration	文本修饰属性允许通过五个属性中的一个来修饰文本
text-align	设置文本的水平对齐方式，包括左对齐、右对齐、居中、两端对齐
text-indent	文字的首行缩进
line-height	行高属性接受一个控制文本基线之间的间隔的值

3.2.1、字母间隔
letter-spacing 属性定义一个附加在字符之间的间隔数量，改值必须符合长度格式，允许使用负值。一个设为0的值会阻止文字的调整。
文件范例：13-8.htm

<HTML>
    <HEAD>
        <TITLE>CSS字母间隔</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
    <H1>主流的网页设计软件</H1>
    <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
    </BODY>
</HTML>

显示结果：

3.2.2、文字修饰

文字修饰属性值	描述
underline	下划线
overline	上划线
line-through	删除线
blink	闪烁，只适用 NetScape 浏览器
none	无任何修饰

文件范例：13-9.htm

<HTML>
    <HEAD>
        <TITLE>CSS文字修饰</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、FIireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
        <A href=mailto:husong@elong.com>给我来信</A>
    </BODY>
</HTML>

显示结果：

文字排列属性值	描述
left	左对齐
center	居中对齐
right	右对齐
justify	两端对齐

3.2.3、文本排列

文字排列属性值描述

left 左对齐

center 居中对齐

right 右对齐

justify 两端对齐

文件范例：13-10.htm

<HTML>
    <HEAD>
        <TITLE>CSS文本排列</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class=text>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
        <A href=mailto:husong@elong.com>给我来信</A>
    </BODY>
</HTML>

显示结果：

3.2.4、文本缩进
文本缩进 text-indent 属性可以应用于块级元素（P，H1等），定义该元素第1行可以接受的缩进的数量。改值必须是一个长度或一个百分比，若为百分比，则视上级元素的宽度而定。通用的文本缩进用法是用于段缩进。
文件范例：13-11.htm

<HTML>
    <HEAD>
        <TITLE>CSS文本缩进</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
        <A href=mailto:husong@elong.com>给我来信</A>
    </BODY>
</HTML>

显示结果：

3.2.5、行间距
行间距 line-height 属性可以接受一个控制文本基线之间的间隔的值。当值为百分比数字时，行高由元素字体大小的量与该数字相乘所得，百分比的值相对于元素字体的大小而定，不允许使用负值。
文件范例：13-12.htm

<HTML>
    <HEAD>
        <TITLE>CSS行间距</TITLE>
        <Style Type="text/css">
        
        </Style>
    </HEAD>
    <BODY>
        <H1>主流的网页设计软件</H1>
        <p class="text">目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</P>
        <A href=mailto:husong@elong.com>给我来信</A>
    </BODY>
</HTML>

显示结果：

posted @ 2007-10-08 14:14 CoderDream 阅读(1139) | 评论 (0) | 编辑收藏

仅列出标题

常用链接

留言簿(9)

我参与的团队

随笔分类(245)

随笔档案(239)

文章分类(3)

文章档案(3)

收藏夹(576)

友情链接

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜