艺创 http://www.ycspace.com 前进中的梦想 Tue, 31 Aug 2010 23:25:18 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 OA登录界面 http://www.ycspace.com/?p=190 http://www.ycspace.com/?p=190#comments Tue, 31 Aug 2010 23:25:18 +0000 admin http://www.ycspace.com/?p=190 OA登录界面,后台登陆界面设计

OA登录界面,后台登陆界面设计

]]> http://www.ycspace.com/?feed=rss2&p=190 0 浏览器专属CSS Hack： 区分各种不同浏览器 http://www.ycspace.com/?p=187 http://www.ycspace.com/?p=187#comments Tue, 31 Aug 2010 05:41:54 +0000 admin http://www.ycspace.com/?p=187 CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析 CSS 没有达成一致前,我们只能用这样的方法来完成这样的任务。网上你可能能搜索到一大堆的 CSS Hack，但是我今天发布的你可能并不都很了解，因为这些都是只针对单独一个浏览器的 CSS Hack。

为了向你展示这些 CSS Hack 是否正常运作，我新建六个 P 标签，并给每一个 P 标签一个特有的 id。这将向你展示 CSS Hack 的运作情况。

<p id=”opera”>我来自 Opera 7.2 – 9.5</p>
<p id=”safari”>我是神奇的 Safari</p>
<p id=”firefox”>我来自 Firefox</p>
<p id=”firefox12″>我是FF前辈 Firefox 1 – 2 </p>
<p id=”ie7″>我是囧 IE 7</p>
<p id=”ie6″>我是残品 IE 6</p>

然后我让这些 P 标签默认都不显示

<style type=”text/css”>
body p{display: none;}
</style>

使用 IE CSS 条件注释区分 IE 浏览器

最简单的区分IE浏览器的方法自然是使用他们的条件注释。微软创建了一个强大的语法来让我们去实现这个功能。我不想再详细地介绍 IE 条件注释了，我想你在搜索引擎能搜索到上万个搜索条目，我这里只要这两个：

<!–[if IE 7]>
<style type=”text/css”>
</style>
<![endif]–>

<!–[if IE 6]>
<style type=”text/css”>
</style>
<![endif]–>

使用 CSS 解析器 Hacks 区分 IE

虽说 IE 条件注释十分简单好用，但是如果你想把全部的 CSS 放到一个文件里的话，那么你不得不使用别的方法。注意这里的 IE 7 Hack将只对 IE7 有效，因为 IE6 根本不知道 > 选择符。同时你也得注意 > 选择符对于其他浏览器同样是无效的。

/* IE 7 */
html > body #ie7
{*display: block;}

/* IE 6 */
body #ie6
{_display: block;}

CSS Hack 区分 Firefox

第一个使用了 body:empty 来区分 Firefox 1 和 2 。第二个 hack使用了全部 Firefox 浏览器的专有扩展 -moz。 -moz 只对 Firefox有效，使用这个 Hack 大可不必担心其他浏览器的影响。

/* Firefox 1 – 2 */
body:empty #firefox12
{display: block;}

/* Firefox */
@-moz-document url-prefix()
{#firefox { display: block; }}

CSS Hack 区分 Safari

Safari 的 CSS hack 与 Firefox 的 hack 看起来很像，使用的是 Safari浏览器的专有扩展 -webkit 且只对 Safari 浏览器有效。

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{#safari { display: block; }}

CSS Hack 区分 Opera

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body #opera { display: block; }}

然后，全部合在一起便是

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>CSS Browser Hacks</title>
<style type=”text/css”>
body p
{
display: none;
}
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 – 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}
</style>
</head>

<body>
<p id=”opera”>我来自 Opera 7.2 – 9.5</p>
<p id=”safari”>我是神奇的 Safari</p>
<p id=”firefox”>我来自 Firefox</p>
<p id=”firefox12″>我是FF前辈 Firefox 1 – 2 </p>
<p id=”ie7″>我是囧 IE 7</p>
<p id=”ie6″>我是残品 IE 6</p></body>
</html>

不为了标准而标准。

]]> http://www.ycspace.com/?feed=rss2&p=187 0 IE6下png透明问题解决的最佳方案 http://www.ycspace.com/?p=184 http://www.ycspace.com/?p=184#comments Tue, 31 Aug 2010 05:34:30 +0000 admin http://www.ycspace.com/?p=184 本来只是一张png透明图片，在IE下是很好解决的，我也尝试了很多种，包括js法，滤镜css法等等，感觉总体来说都不是很完美，而且如果同时使用Sprites方法，就不是那么简单容易的事情了。

最终发现了使用htc方法嵌到css文件中基本可以一次性解决大部分的透明问题。

这种方法已经有很多人介绍过了，但是因为页面是英文，很少有人翻译，也就很少人会去使用。

下面就详细介绍下这种方法：

此方法本身的demo地址：http://www.twinhelix.com/css/iepngfix/demo/

（说过了是全英文的，不要着急哦）

可解决：

1、页面中使用《img》标签加入的png透明图像

2、css中使用background加入的png透明背景（支持多种版本）

3、某些版本的background的png透明，需要在当前页添加一个js解决

下载文件包:http://www.twinhelix.com/css/iepngfix/iepngfix.zip

1、下载后，解压出来，会有很多文件，其中我们需要用到的有3个文件：

iepngfix.htc，blank.gif，iepngfix_tilebg.js

2、你可以把他们分别传到相应的css，js和images目录中，当然，也可以建立新的文件夹，比如名为：iepng的文件夹，把他们传到其中

3、添加第一句代码，这是在html文件中添加的格式，不要忘记修改htc文件的路径，如果怕出错，直接使用相对根目录的路径，比如/iepng /iepngfix.htc，这样一般不会出错，当然你也可以把behavior： url（iepngfix.htc）这句添加到你的reset.css文件中去

<style type=”text/css”>
img, div { behavior: url(iepngfix.htc); }
</style>

4、使用记事本，或类似的工具打开iepngfix.htc文件，将其中blankImg的文件路径替换成你自己的，比如/iepng/blank.gif，根据自己的实际情况。

IEPNGFix.blankImg = ‘/images/blank.gif’;

5、将下面这句js调用代码加到需要页面的《head》中去（此步不是必须的，如果你的head部分的include统一调用的，推荐一定加上这句）

<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>

经过以上步骤，基本可以实现IE下png的透明效果了

至少我现在没发现什么问题，如果有出现问题，欢迎一起讨论下，记得跟我说下哦，谢谢啦！

原文地址：http://blog.sina.com.cn/s/blog_62a8de7a0100ksh2.html

]]> http://www.ycspace.com/?feed=rss2&p=184 0 彷淘宝导航拼音检索-JS代码 http://www.ycspace.com/?p=182 http://www.ycspace.com/?p=182#comments Tue, 31 Aug 2010 05:20:22 +0000 admin http://www.ycspace.com/?p=182

提示：你可以先修改部分代码再运行。

]]> http://www.ycspace.com/?feed=rss2&p=182 0 select选择框美化 http://www.ycspace.com/?p=178 http://www.ycspace.com/?p=178#comments Tue, 31 Aug 2010 05:13:57 +0000 admin http://www.ycspace.com/?p=178

提示：你可以先修改部分代码再运行。

]]> http://www.ycspace.com/?feed=rss2&p=178 0 联系方式 http://www.ycspace.com/?p=173 http://www.ycspace.com/?p=173#comments Mon, 30 Aug 2010 00:34:34 +0000 admin http://www.ycspace.com/?p=173 如有建站业务需要请联系我哦

姓名：田智伟

qq:38493196

电话：13936595796

]]> http://www.ycspace.com/?feed=rss2&p=173 0 哎！作为男人也想被人哄啊 http://www.ycspace.com/?p=170 http://www.ycspace.com/?p=170#comments Sat, 28 Aug 2010 15:00:51 +0000 admin http://www.ycspace.com/?p=170 哎 没人理解我的苦闷

只是看到我整天乐哈哈的混混度日

却看不到的满心的忧愁

没有哭的权利，那就只能去笑了

悲剧鸟

本来应该是个高兴的事情

但是却感觉到了无限压力

未来的压力

]]> http://www.ycspace.com/?feed=rss2&p=170 0 一款活动效果的导航—–Sunflowamedia http://www.ycspace.com/?p=167 http://www.ycspace.com/?p=167#comments Sat, 28 Aug 2010 14:18:28 +0000 admin http://www.ycspace.com/?p=167 最近看到一个不错的导航效果，把 CSS 和 JS 都做了处理，现在和大家一起分享这个效果的导航。

演示地址: http://sunflowamedia.com/web-design/examples/navigation/20100723/

Step 1. 首先创建 HTML 框架，这部分很简单，代码如下:

<ul id=”topnav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Rss</a></li>
</ul>

Step 2. 写 CSS:

复制内容到剪贴板

代码:

ul#topnav {
margin: 15px 0 50px 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li {
margin: 0;
padding: 0;
overflow: hidden;  /*--Important - Masking out the hover state by default--*/
float: left;
height: 40px;
}
ul#topnav li.home {
width: 75px;
}
ul#topnav li.Rss {
width: 75px;
}
ul#topnav li.Portfolio {
width: 105px;
}
ul#topnav li.Blog {
width: 75px;
}
ul#topnav li.About {
width: 80px;
}
ul#topnav li.Contact {
width: 95px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
color: #555;
background-position: left bottom;
}
ul#topnav span { /*--Default state of navigation--*/
background-position: left top;
}
ul#topnav.v2 span {
background: transparent url(../images/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a {
background: transparent url(../images/a_bg.gif) repeat-x left bottom;
color: #555;
}

*li 里是导航的内容，设置 li 的宽度来调整您自己所需要字符宽度。

Step 3. 插入 jQuery:

复制内容到剪贴板

代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Step 4. 插入一段脚本，里面包含了 jQuery 运行的原理:

复制内容到剪贴板

代码:

$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
$(this).find("span").show().html(linkText); //Add the text in the <span> tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the <span> tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the <span> back to its original state (0px)
}, 250);
});
});

]]> http://www.ycspace.com/?feed=rss2&p=167 0 隔行变色表格，鼠标经过变色，选中变色 http://www.ycspace.com/?p=162 http://www.ycspace.com/?p=162#comments Sat, 28 Aug 2010 14:12:21 +0000 admin http://www.ycspace.com/?p=162 神奇的隔行变色


–>

神奇的隔行变色

收集与——-www.blueidea.com

]]> http://www.ycspace.com/?feed=rss2&p=162 0 午夜的生活 http://www.ycspace.com/?p=154 http://www.ycspace.com/?p=154#comments Sat, 28 Aug 2010 14:01:00 +0000 admin http://www.ycspace.com/?p=154 每天都在午夜入睡
喜欢午夜的感觉，安静的听着音乐
不管是工作还是游戏都是如此
只有在那个时候才可以彻底的放松下来
这已经是个习惯
虽然每天早上都不愿起来
不过午夜却依然值得回味

午夜里宣泄着白天的烦闷，宣泄着生活的压抑
哎
懒惰已经逐渐蔓延，希望不会继续下去吧

]]> http://www.ycspace.com/?feed=rss2&p=154 0