Subscribe to 木瓜Blog日志FeedSubscribe to 木瓜Blog评论Feed

Browse : Home »

漂亮的CSS 表格

四月 14, 2009 by admin  
类别:WEB技术

1 评论

Name Location Color
House
Carrion Fly Worldwide gray
Office Fly California, Bay Area white
Common House Fly brown
Horse
Horn Fly Kansas red
Face Fly green
Stable Fly black

标签:

超酷圆形边框 div +css 做法

五月 13, 2007 by admin  
类别:WEB技术

抢个沙发先

[code]
[color=royalblue]
<!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>
<title>新建网页</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="lybykw | www.vistathink.com" />
<meta name="Copyright" content="Copyright (c) 2000-2005

www.vistathink.com" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen"

/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"

media="screen" />
<meta name="description" content="网页制作" />
<meta name="keywords" content="木瓜S Blog，Ardy.CN， www.ardy.cn" />

<style type="text/css">

</style>

<script language="javascript">

</script>

</head>
<body>
<br><br><br><br><br>
<div class="p100">
<div class="round1">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
<div style=" position:absolute; top:-35px; _top:-22px; left:-25px;">
<ul class="ovt">
<li><span><img name="" src="" width="1" height="22"

align="absmiddle" />
<img

src="http://cn.yimg.com/i/ks/060928/tab_knowledge.gif" hspace="3" />知识

</span></li>
</ul>
</div>

<div style="padding:10px;">通过下列链接访问参考资料，可帮助你创建引人注目

的 Web 页面。<br>动态 HTML (DHTML) 对象模型参考<br></div>
</div>
</div>

</body>
</html>
[/color]
[/code]

标签:

经典 CSS技巧 20个

五月 13, 2007 by admin  
类别:WEB技术

抢个沙发先

===============================================
本文作者是：Trenton Moss。
发表网站是：http://www.webcredible.co.uk。
===============================================
1. CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

<p class=”text side”>…</p>

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />

<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

<h1>Buy widgets</h1>

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box
{
width: 100px;
border: 5px;
padding: 20px
}

这样调用它：

<div id=”box”>…</div>

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

这样调用：

<div id=”box”><div>…</div></div>

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content
{
width: 700px;
margin: 0 auto
}

你会使用 <div id=”content”> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

这会把网页内容都居中，所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}

这样容器内所有的元素都会相对定位，可以这样用：

<div id=”container”><div id=”navigation”>…</div></div>

如果想定位到距左30点，距上5悖梢哉庋?BR>
#navigation
{
position: absolute;
left: 30px;
top: 5px
}

当然，你还可以这样：

margin: 5px 0 0 30px

注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

10. 直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：

#navigation
{
background: blue;
width: 150px
}

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

11. Block和inline元素对比
所有的HTML元素都属于block和inline之一。block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用code class=”inline”>display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
让一个inline元素从新行开始；

让块元素和其他元素保持在一行上；

控制inline元素的宽度（对导航条特别有用）；

控制inline元素的高度；

无须设定宽度即可为一个块元素设定与文字同宽的背景色。

12. 再来一个box黑客方法

之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。

13. 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

<body>
<div class=”container“>

然后CSS这样设计：

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto” );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度：

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? ”1200px“ : ”auto”);
}

14. IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。

5. 字体变形命令

text-transform 命令很有用，它有3个值：text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。

16. IE中图片文字消失的问题

有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：没见过）。此时，可以为消失的元素设定： position: relative ，如果不行，再考虑为这些元素指定一个宽度试试。

17. 不可见文字

不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到： position: absolute; left: -9000px 。

这实际上是把文字指定在页面以外显示。

18. 为手持设备设计专门的CSS

也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是：

<link type=”text/css” rel=”stylesheet” href=”handheldstyle.css” media=”handheld” />

也可以阅读专门的手持设备可用性。

19. 3D效果的按钮

以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：

a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

至于效果，还可以自己调整了。

20. 在不同页面上使用同样的导航代码

许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。

首先，在导航代码中使用CSS类：

<ul>
<li><a href=”#” class=”home”>Home</a></li>
<li><a href=”#” class=”about”>About us</a></li>
<li><a href=”#” class=”contact”>Contact us</a></li>
</ul>

然后分别为每一页的Body指定一个id，和上面类同名。如<body id=”contact”>。

然后设计CSS如下：

#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}

这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。

标签:

书推荐《精通CSS—–高级WEB标准解决方案》

四月 19, 2007 by admin  
类别:生活匣子

抢个沙发先

　　最近学习CSS+DIV看了好几本书，总觉得不是特别理想，其中有一本比较满意《精通CSS—–高级WEB标准解决方案》书原名：CSS Mastery: Advanced Web Standards Solutions 陈剑瓯释　　感觉比国内了书写的有深度，内容深入全面，无论是CSS新手，还是已用过CSS很久的都能从收中学到不少。网上有部分读者反映释得不是很好，但我个人并不这样认为。各位朋友有时间值得一读。

【内容简介】

　　本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究，这两个实例研究将书中讨论的许多技术组合起来，使读者不仅理解工作原理，而且能够学到如何将它们应用在实际项目中，迅速精通CSS，成为CSS专家。本书还集中介绍了现实的浏览器问题，是弥补CSS知识欠缺不可或缺的参考书。本书弥补了一直以来CSS图书的空白。正因如此，英文版出版后，一时洛阳纸贵，多次重印，并迅速登上Amazon图书排行榜前列，最高时甚至与哈里·波特并驾齐驱，创造了计算机图书的销售奇迹。
本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。

　　“Andy Budd对CSS设计的底层技术和当代方法有着深刻的理解，而且他更善于将这些知识娓娓道来。在跨浏览器支持问题上，无人可以望其项背。”
——Molly E．Holzschlag，Web标准项目负责人，W3C HTML工作组专家

　　“Andy Budd多年来一直在编写、设计和宣传基于标准的网页设计，我们现在有幸在本书中看到他以简洁清晰的方式讲授最重要的CSS技术。本书提供了一套网页设计人员不可或缺的解决方案、技巧和经验。”
——Dan Cederholm，Web Standards Solutions的作者

【目录信息】

第1章 基础知识.
1．1 设计代码的结构
1．2 为样式找到目标
1．3 规划、组织和维护样式表
1．4 小结
第2章 可视化格式模型
2．1 框模型概述
2．2 定位概述
2．3 小结
第3章 背景图像和图像替换
3．1 背景图像基础
3．2 圆角框
3．3 阴影
3。4 图像替换
3．5 小结
第4章 对链接应用样式
4．1 简单的链接样式
4．2 让下划线更有趣
4．3 突出显示不同类型的链接
4．4 创建按钮和翻转
……

   

标签: ,

ThickBox 2.0——JS展示脚本

四月 14, 2007 by admin  
类别:生活匣子

抢个沙发先

Cody Lindley 使用 jQuery 开发
译: croc 
阅读原文

 　　ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容.

查看实例演示

特性:

  • ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k.
  • ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k.
  • ThickBox 能重新调整大于浏览器窗口的图片.
  • ThickBox 的多功能性包括(图片,iframed 的内容,内嵌的内容,AJAX 的内容).
    • 展示单一图片（single image）
    • 展示图片集（multiple images）
    • 展示内嵌内容（inline content）
    • 展示被iFrame的内容（iframed content）
    • 展示AJAX内容（AJAX content）
    • 其他：教程本身还自带了一个很酷的JS跳转脚本
  • ThickBox 能隐藏 Windows IE 6 里的元素.
  • ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox.
  • ThikkBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有人说是呀.

如佝实现 ThickBox :

1. ThickBox 要求使用 jQuery JavaScript 库; 正因如此, 你需要外调 jquery.js 文件在你的网页的 head 元素内, 接着还要外调 thickbox.js 文件 (注意: jquery.js 必须放在调用资源的第一位). 例子如下:

<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script>

一旦你外调了 .js 文件, 打开 thickbox.js 并寻找加载图片的名字 (loadingAnimation.gif). 找到后, 根据它在你服务器上的位置

标签: ,

Web2.0图片特效脚本 lightbox 【推荐】

四月 12, 2007 by admin  
类别:WEB技术

2 评论

Lightbox JS 是一个简单方便的用来把图片覆盖在当前页面上的脚本,它能被快速安装并且运作于所有流行的浏览器.
最新更新 Version 2.0#
图片集: 分组相关的图片并且能轻松的导航它们
# 视觉特效: 奇特的自适应调整
# 向后兼容: yes!

点击下面查看效果

http://www.ardy.cn/lightbox/test.html

http://www.ardy.cn/lightbox/lightbox2.html

v2.03 Released 4/10/07
- Improved keyboard navigation. Animation off toggle.
Hides Flash movies under overlay. Imagemap support. Valid CSS.
官方地址(演示+最新2.03版本下载):
http://www.huddletogether.com/projects/lightbox2/

建议新手先下载蓝色理想汉化版,有中文说明(版本非最新2.03,而是2.02)
http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip

如何使用:

步骤 1 – 安装

  1. Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header. 
    <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script>
  2. 外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中). 
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  3. 检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.

步骤 2 – 激活

  1. 添加 rel=”lightbox” 属性到任何一个链接标签去激活lightbox. 例如: 
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    可选择项: 使用 title 属性加上说明.

  2. 如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如: 
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

    没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！

有什么不明白的可以和我留言！

标签: ,

网页设计中文字颜色的搭配技巧

三月 30, 2007 by admin  
类别:生活匣子

3 评论

　　前几天看到的文章，觉得非常不错，现引用过来和大家一起分享，版权归原作者所有
　　对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。

　　一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。

　　BgcolorΚ″＃F1FAFA″———做正文的背景色好，淡雅

　　BgcolorΚ″＃E8FFE8″———做标题的背景色较好

　　BgcolorΚ″＃E8E8FF″———做正文的背景色较好，文字颜色配黑色

　　BgcolorΚ″＃8080C0″———上配黄色白色文字较好

　　BgcolorΚ″＃E8D098″———上配浅蓝色或蓝色文字较好

　　BgcolorΚ″＃EFEFDA″———上配浅蓝色或红色文字较好

　　BgcolorΚ″＃F2F1D7″———配黑色文字素雅，如果是红色则显得醒目

　　BgcolorΚ″＃336699″———配白色文字好看些

　　BgcolorΚ″＃6699CC″———配白色文字好看些，可以做标题

　　BgcolorΚ″＃66CCCC″———配白色文字好看些，可以做标题

　　BgcolorΚ″＃B45B3E″———配白色文字好看些，可以做标题

　　BgcolorΚ″＃479AC7″———配白色文字好看些，可以做标题

　　BgcolorΚ″＃00B271″———配白色文字好看些，可以做标题

　　BgcolorΚ″＃FBFBEA″———配黑色文字比较好看，一般作为正文

　　BgcolorΚ″＃D5F3F4″———配黑色文字比较好看，一般作为正文

　　BgcolorΚ″＃D7FFF0″———配黑色文字比较好看，一般作为正文

　　BgcolorΚ″＃F0DAD2″———配黑色文字比较好看，一般作为正文

　　BgcolorΚ″＃DDF3FF″———配黑色文字比较好看，一般作为正文

　　　浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配黄色文字显得非常有效果。

　　　此文只是起一个“抛砖引玉”的作用，大家可以发挥想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力。

标签: ,

为Blog添加动态鼠标样式 CSS鼠标样式大全

三月 14, 2007 by admin  
类别:生活匣子

抢个沙发先

    今天换了个鼠标样式，觉得挺不错的，给大家一起分享一下。
    主要是在加如下代码
         body{background:#FFFFF;CURSOR: url('http://webme.bokee.com/inc/mouse028.cur')}
         a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse031.ani')} 
    如是F2Blog就在所在目录的/skins/****/global.css   中 body 后面加上  CURSOR: url('http://webme.bokee.com/inc/mouse051.ani');  再在link.css中的a:link,a:visited 后面加上CURSOR: url('http://webme.bokee.com/inc/mouse018.ani');  
    可参见下面网址，里面收录了100个很酷的动态鼠标样式
    山水天下 http://myok.bokee.com/3429184.html
    使用说明：

一、首先说说在博客中的使用方法（老公社的博客，对新公社的博客不实用）：

直接将鼠标样式代码部分中的代码复制粘贴到模板（首页、单篇、索引）CSS中的body{后面就可以了；

二、其他博客或者网页使用的方法：

（一）如果有独立的CSS样式表的话，就直接将代码添加在CSS样式表代码中的body{后；

（二）如果没有独立的CSS样式表，但可对网页进行HTML（源码）状态进行编辑的话，那么就在HTML（源码）状态下，加入如下代码（其中的鼠标代码部分可替换成自己喜欢的鼠标样式代码）。

（三）如果上述两种方法在你的网站里均不可实现，那就看看你的网站有什么可以添加代码的地方（这一般多出现在一些类似博客提供商的网站，因为限定了许多功能造成的），比如摘要、链接等，只要可以添加代码的地方，再试着将上述（二）中的代码添加进去。

（四）如果上述几种办法都不能解决的话，那只能说你的网站功能非常有限，我也无能为力了。

标签:

下一页 »