博客 (173)

使网页变灰色,只需要一句 css 代码:

html { filter: grayscale(1); }

在 I10 / IE11 上的兼容方案需要 grayscale.js,参考此文:http://www.cnblogs.com/wangmeijian/p/4324693.html

CSS 背景图片变灰:https://stackoverflow.com/questions/16340159/greyscale-background-css-images


xoyozo 15 年前
6,958

一个关于Visual Studio 2008 SP1 (KB971092) 的系统补丁重复安装问题的解决方案:

出现该问题的原因是未安装 Visual C++,除了安装VC++,您可以按以下步骤解决该补丁更新问题。

1.)下载补丁包或直接从 \Windows\SoftwareDistribution\Download\Install 目录找。

2.)双击安装,记住释放文件的目录。出现提示“VC Libraries QFE Patch 不适用或被系统的其他条件阻止。有关详细信息,请单击以下链接。”时,不要关闭窗口。

3.)找到释放安装文件的临时文件夹,复制到桌面。

4.)现在可以关闭刚才的提示窗口了。

5.)找到“\Program Files\Microsoft Visual Studio 9.0\Common7\Tools\vsvars32.bat”这个文件,添加 Everyone 的权限为可写。

6.)运行桌面文件夹内的 VS90SP1-KB971092-x86.msp 等待安装完成,完成时没有提示。

7.)更新成功!

xoyozo 16 年前
7,398

我们继续讲解LINQ to SQL语句,这篇我们来讨论Group By/Having操作符和Exists/In/Any/All/Contains操作符。

Group By/Having操作符

适用场景:分组数据,为我们查找数据缩小范围。

说明:分配并返回对传入参数进行分组操作后的可枚举对象。分组;延迟

1.简单形式:

var q =
    from p in db.Products
    group p by p.CategoryID into g
    select g;

语句描述:使用Group By按CategoryID划分产品。

说明:from p in db.Products 表示从表中将产品对象取出来。group p by p.CategoryID into g表示对p按CategoryID字段归类。其结果命名为g,一旦重新命名,p的作用域就结束了,所以,最后select时,只能select g。当然,也不必重新命名可以这样写:

var q =
    from p in db.Products
    group p by p.CategoryID;

我们用示意图表示:

GroupBy分组统计示意图

如果想遍历某类别中所有记录,这样:

foreach (var gp in q)
{
    if (gp.Key == 2)
    {
        foreach (var item in gp)
        {
            //do something
        }
    }
}

2.Select匿名类:

var q =
    from p in db.Products
    group p by p.CategoryID into g
    select new { CategoryID = g.Key, g }; 

说明:在这句LINQ语句中,有2个property:CategoryID和g。这个匿名类,其实质是对返回结果集重新进行了包装。把g的property封装成一个完整的分组。如下图所示:

GroupBy分组匿名类示意图

如果想遍历某匿名类中所有记录,要这么做:

foreach (var gp in q)
{
    if (gp.CategoryID == 2)
    {
        foreach (var item in gp.g)
        {
            //do something
        }
    }
}

3.最大值

var q =
    from p in db.Products
    group p by p.CategoryID into g
    select new {
        g.Key,
        MaxPrice = g.Max(p => p.UnitPrice)
    };

语句描述:使用Group By和Max查找每个CategoryID的最高单价。

说明:先按CategoryID归类,判断各个分类产品中单价最大的Products。取出CategoryID值,并把UnitPrice值赋给MaxPrice。

4.最小值

var q =
    from p in db.Products
    group p by p.CategoryID into g
    select new {
        g.Key,
        MinPrice = g.Min(p => p.UnitPrice)
    };

语句描述:使用Group By和Min查找每个CategoryID的最低单价。

说明:先按CategoryID归类,判断各个分类产品中单价最小的Products。取出CategoryID值,并把UnitPrice值赋给MinPrice。

5.平均值

var q =
    from p in db.Products
    group p by p.CategoryID into g
    select new {
        g.Key,
        AveragePrice = g.Average(p => p.UnitPrice)
    };

语句描述:使用Group By和Average得到每个CategoryID的平均单价。

说明:先按CategoryID归类,取出CategoryID值和各个分类产品中单价的平均值。

6.求和

var q =
    from p in db.Products
    group p by p.CategoryID into g
    select new {
        g.Key,
        TotalPrice = g.Sum(p => p.UnitPrice)
    };

语句描述:使用Group By和Sum得到每个CategoryID 的单价总计。

说明:先按CategoryID归类,取出CategoryID值和各个分类产品中单价的总和。

7.计数

var q =
    from p in db.Products
    group p by p.CategoryID into g
    select new {
        g.Key,
        NumProducts = g.Count()
    };

语句描述:使用Group By和Count得到每个CategoryID中产品的数量。

说明:先按CategoryID归类,取出CategoryID值和各个分类产品的数量。

8.带条件计数

var q =
    from p in db.Products
    group p by p.CategoryID into g
    select new {
        g.Key,
        NumProducts = g.Count(p => p.Discontinued)
    };

语句描述:使用Group By和Count得到每个CategoryID中断货产品的数量。

说明:先按CategoryID归类,取出CategoryID值和各个分类产品的断货数量。 Count函数里,使用了Lambda表达式,Lambda表达式中的p,代表这个组里的一个元素或对象,即某一个产品。

9.Where限制

var q =
    from p in db.Products
    group p by p.CategoryID into g
    where g.Count() >= 10
    select new {
        g.Key,
        ProductCount = g.Count()
    };

语句描述:根据产品的―ID分组,查询产品数量大于10的ID和产品数量。这个示例在Group By子句后使用Where子句查找所有至少有10种产品的类别。

说明:在翻译成SQL语句时,在最外层嵌套了Where条件。

10.多列(Multiple Columns)

var categories =
    from p in db.Products
    group p by new
    {
        p.CategoryID,
        p.SupplierID
    }
        into g
        select new
            {
                g.Key,
                g
            };

语句描述:使用Group By按CategoryID和SupplierID将产品分组。

说明: 既按产品的分类,又按供应商分类。在by后面,new出来一个匿名类。这里,Key其实质是一个类的对象,Key包含两个Property:CategoryID、SupplierID。用g.Key.CategoryID可以遍历CategoryID的值。

11.表达式(Expression)

var categories =
    from p in db.Products
    group p by new { Criterion = p.UnitPrice > 10 } into g
    select g;

语句描述:使用Group By返回两个产品序列。第一个序列包含单价大于10的产品。第二个序列包含单价小于或等于10的产品。

说明:按产品单价是否大于10分类。其结果分为两类,大于的是一类,小于及等于为另一类。

Exists/In/Any/All/Contains操作符

适用场景:用于判断集合中元素,进一步缩小范围。

Any

说明:用于判断集合中是否有元素满足某一条件;不延迟。(若条件为空,则集合只要不为空就返回True,否则为False)。有2种形式,分别为简单形式和带条件形式。

1.简单形式:

仅返回没有订单的客户:

var q =
    from c in db.Customers
    where !c.Orders.Any()
    select c;

生成SQL语句为:

SELECT [t0].[CustomerID], [t0].[CompanyName], [t0].[ContactName],
[t0].[ContactTitle], [t0].[Address], [t0].[City], [t0].[Region],
[t0].[PostalCode], [t0].[Country], [t0].[Phone], [t0].[Fax]
FROM [dbo].[Customers] AS [t0]
WHERE NOT (EXISTS(
    SELECT NULL AS [EMPTY] FROM [dbo].[Orders] AS [t1]
    WHERE [t1].[CustomerID] = [t0].[CustomerID]
   ))

2.带条件形式:

仅返回至少有一种产品断货的类别:

var q =
    from c in db.Categories
    where c.Products.Any(p => p.Discontinued)
    select c;

生成SQL语句为:

SELECT [t0].[CategoryID], [t0].[CategoryName], [t0].[Description],
[t0].[Picture] FROM [dbo].[Categories] AS [t0]
WHERE EXISTS(
    SELECT NULL AS [EMPTY] FROM [dbo].[Products] AS [t1]
    WHERE ([t1].[Discontinued] = 1) AND 
    ([t1].[CategoryID] = [t0].[CategoryID])
    )

All

说明:用于判断集合中所有元素是否都满足某一条件;不延迟

1.带条件形式

var q =
    from c in db.Customers
    where c.Orders.All(o => o.ShipCity == c.City)
    select c;

语句描述:这个例子返回所有订单都运往其所在城市的客户或未下订单的客户。

Contains

说明:用于判断集合中是否包含有某一元素;不延迟。它是对两个序列进行连接操作的。

string[] customerID_Set =
    new string[] { "AROUT", "BOLID", "FISSA" };
var q = (
    from o in db.Orders
    where customerID_Set.Contains(o.CustomerID)
    select o).ToList();

语句描述:查找"AROUT", "BOLID" 和 "FISSA" 这三个客户的订单。 先定义了一个数组,在LINQ to SQL中使用Contains,数组中包含了所有的CustomerID,即返回结果中,所有的CustomerID都在这个集合内。也就是in。 你也可以把数组的定义放在LINQ to SQL语句里。比如:

var q = (
    from o in db.Orders
    where (
    new string[] { "AROUT", "BOLID", "FISSA" })
    .Contains(o.CustomerID)
    select o).ToList();

Not Contains则取反:

var q = (
    from o in db.Orders
    where !(
    new string[] { "AROUT", "BOLID", "FISSA" })
    .Contains(o.CustomerID)
    select o).ToList();

1.包含一个对象:

var order = (from o in db.Orders
             where o.OrderID == 10248
             select o).First();
var q = db.Customers.Where(p => p.Orders.Contains(order)).ToList();
foreach (var cust in q)
{
    foreach (var ord in cust.Orders)
    {
        //do something
    }
}

语句描述:这个例子使用Contain查找哪个客户包含OrderID为10248的订单。

2.包含多个值:

string[] cities = 
    new string[] { "Seattle", "London", "Vancouver", "Paris" };
var q = db.Customers.Where(p=>cities.Contains(p.City)).ToList();

语句描述:这个例子使用Contains查找其所在城市为西雅图、伦敦、巴黎或温哥华的客户。

总结一下这篇我们说明了以下语句:

Group By/Having 分组数据;延迟
Any 用于判断集合中是否有元素满足某一条件;不延迟
All 用于判断集合中所有元素是否都满足某一条件;不延迟
Contains 用于判断集合中是否包含有某一元素;不延迟

本系列链接:LINQ体验系列文章导航

LINQ推荐资源

LINQ专题:http://kb.cnblogs.com/zt/linq/ 关于LINQ方方面面的入门、进阶、深入的文章。
LINQ小组:http://space.cnblogs.com/group/linq/ 学习中遇到什么问题或者疑问提问的好地方。

转自 李永京 16 年前
4,505
网页可见区域宽:document.documentElement.clientWidth  
网页可见区域高:document.documentElement.clientHeight  
网页可见区域宽:document.documentElement.offsetWidth (包括边线的宽)  
网页可见区域高:document.documentElement.offsetHeight (包括边线的宽)  
网页正文全文宽:document.documentElement.scrollWidth  
网页正文全文高:document.documentElement.scrollHeight  
网页被卷去的高:document.documentElement.scrollTop  
网页被卷去的左:document.documentElement.scrollLeft  
网页正文部分上:window.screenTop  
网页正文部分左:window.screenLeft  
屏幕分辨率的高:window.screen.height  
屏幕分辨率的宽:window.screen.width  
屏幕可用工作区高度:window.screen.availHeight  
屏幕可用工作区宽度:window.screen.availWidth
4,912

做过网页美工的朋友都知道,IE6 及更早版本不支持 PNG 的半透明效果,因此在设计的时候不能更灵活地运用一些元素和技巧,本人是搞开发的,偶尔也会涉及美工的东西,就像这个我的个人主页,我已经放弃对IE6 的兼容性支持了,IE6 总会有退出历史舞台的一天,不过看网站统计,客户端浏览器还是有近五成是IE6,不过一年前是八九成的。最近在网上发现一段 JS 代码,据说能让IE6 轻松支持 PNG 的半透明,先来看看:

<script language="javascript" type="text/javascript">
function correctPNG()
{
 for(var i=0; i<document.images.length; i++)
 {
 var img = document.images[i]
 var imgName = img.src.toUpperCase()
 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 {
 var imgID = (img.id) ? "id='" + img.id + "' " : ""
 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
 var imgStyle = "display:inline-block;" + img.style.cssText
 if (img.align == "left") imgStyle = "float:left;" + imgStyle
 if (img.align == "right") imgStyle = "float:right;" + imgStyle
 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
 var strNewHTML = "<span " + imgID + imgClass + imgTitle
 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
 img.outerHTML = strNewHTML
 i = i-1
 }
 }
}
window.attachEvent("onload", correctPNG);
</script>

看了下代码,发现它只能对 <img> 标签里的 PNG 进行处理,而对 css 里的 PNG 背景无能为力,另外,对 <img> 的 src是引用 .aspx 等格式时也无效。

处理 css 中的 PNG 透明是这样的:

html>body .menublockmiddle{
background: url(../images/menu_block/menu_block_r1_c3.png) no-repeat;
}
* html .menublockmiddle{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src="../images/menu_block/menu_block_r1_c3.png");
}

每个背景图都必须像这样写成两个,分别让IE和非IE识别,从而导引 css 异常烦琐,所以,虽然我们能完美解决 PNG 在 IE6 下的兼容性,但是这是美工的活,我已经放弃这么做了。

5,554

PNG半透明背景图片效果
PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出实用,绚丽的效果,可是对于PNG图片的支持却不是很理想,Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。

IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型

这里是个超链接测试

(X)HTML: <div id="wrap">
<p><a href="http://www.jluvip.com"><strong>PNG半透明背景图片效果</strong></a><br />:PNG图片在网页设计中扮演着一个很重要的角色,利用PNG图片的特点可以制作出需要使用绚丽的效果,可是对于PNG图片的支持却不是很理想,Firefox和Opera对PNG支持的比较好,特别是Firefox浏览器。可是IE却不理PNG,是的设计者无法很随意的使用png图片。</p>
<p>IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路,如果他载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
</p>
<p><a class="test" href="http://www.jluvip.com">这里是个超链接测试</a></p>
CSS: #wrap{ width:460px;margin:20px auto 20px 80px;text-align:left;height:300px; padding:20px; border:1px #eee solid;}
/*not for ie 6.0*/
html>body #wrap{background: url(img/bgcanvas.png) repeat;}
/*for ie 6.0*/
* html #wrap {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png");
background:none;
}
#wrap a{color:#c00; text-decoration: none; position:relative;}/*解决IE下链接失效的问题*/
#wrap a:hover{ text-decoration:underline;}

nbsp;

观看效果

3,838

代码:

<input type="text" name="re_name" style="width: 100px; height: 21px; font-size: 10pt;" /><span
style="width: 18px; border: 0px solid red;">
<select name="r00" style="margin-left: -101px; width: 118px; background-color: #FFEEEE;"
onchange="document.all.re_name.value=this.value;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>

 

说明:

该代码兼容性非常差,在XHTML文档中或在非IE浏览下浏览均不能达到预期效果,原因可能是它们的 select 元素的 z-index 太高,并且 css 定位方式不同,部署于应用还需改进代码。

xoyozo 17 年前
5,653

方法:
    write,向HTML动态写入内容
    writeln,多加一个换行
    open,与window.open类似,不建议用
    close,当向新打开的文档对象中写完所有的内容后,一定要调用该方法关闭文档流
    clear,用于清除文档中的所有内容,建议用document.write("");document.close();这两条语句来实现同样的功能。
    getElementById,返回id的对象
    getElementByName,返回name的对象组(注意是数组)
    getElementByTagName,返回标签名的对象组
    createElement,产生一个代表某个HTML元素的对象,随后再其它方法将这个对象插入到文档中。
    createStyleSheet,为当前HTML产生一个样式表或增加一条样式规则。
属性:
    document.cookie

xoyozo 17 年前
4,174

p:first-line   段落中的第一行文本

p:first-lette   段落中的第一个字母

<STYLE type=text/css>
p.view{color:green; font-size:12px}
p.view:first-line{color:yellow; font-size:12px}
p.view:first-letter{color:red; font-size:24px}
</STYLE>

<P class=view>中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国</P>
<P class=view>abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg</P>

 

效果:

 

中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国

abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg

 

xoyozo 17 年前
4,151
css之FILTER:progid:DXImageTransform.Microsoft.Gradient使用

FILTER:progid:DXImageTransform.Microsoft.Gradient使用
语法:

filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)
属性:
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。  true | false
  true: 默认值。滤镜激活。
  false:滤镜被禁止。
 
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
   其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
  取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。 
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。 
特性:
Enabled:可读写。布尔值(Boolean)。参阅 enabled 属性。
GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0
  1:默认值。水平渐变。
  0:垂直渐变。
StartColorStr:可读写。字符串(String)。参阅 startColorStr 属性。
StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。
EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。 
EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时,也可以用十六进制格式: 0xAARRGGBB 。 
说明:
在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时,在渐变册色彩层之上的文本程序性的初始化为透明的,当色彩渐变实现后,文本颜色会以其定义的值更新。
示例:
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550000FF, endColorstr=#55FFFF00) ;}

#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient() ;}
具体使用
<table border=1 width=100%>
<tr>
<td STYLE="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#ffffff',endColorStr='#ff0000')">&nbsp;</td>
</tr>
</table>
4,223