WinCE平台搭建--基于数据库的.NET应用程序开发(wince6.0+vs2008+sqlce)
作者:freethy 发布于:2012-4-28 13:28 Saturday
最近在开发在WinCE上的基于数据库的.NET应用程序,总结下入门经验,首先讲下平台的搭建,然后简要的解释下可能遇到的问题。
一、平台搭建的前提条件
1、电脑上已经安装好了 SQL Server 2005(先)和Visual Studio 2008(后)
2、电脑上安装了同步软件Windows Mobile Device Center(Windows 7) 或 Microsoft ActiveSync(Windows XP)。
二、WinCE上数据库(SQL Server Compact Edition 3.5)的安装
安装sqlce有多种方法,下面依次介绍2种
第一种
这也是最简单的方法:找到你的SQL Server2005安装目录,我的安装目录是C:\Program Files,然后定位到C:\Program Files\Microsoft SQL Server Compact Edition\v3.5\Devices\wce500\armv4i 文件夹,将文件夹下的“sqlce.wce5.armv4i”
“sqlce.repl.wce5.armv4i”,“sqlce.dev.CHS.wce5.armv4i” 这三个文件拷入到设备的根目录下,将他们依次安装,最后可以到采集器中开始-》程序-》Query Analyzer 3,运行Query Analyzer 3,sqlce就安装好了。
第二种
如果你的SQL Server2005安装目录的下没有上述的三个文件也没有关系,到微软官网http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=12264下载SSCEDeviceRuntime-CHS.msi文件,将下载下来的程序包安装到PC端计算机上。安装成功后,在安装目录的\Devices\wce500\armv4i目录下会找到上述三个文件,然后拷到设备上,依次安装即可。
在这类简要的介绍下sqlce,SQL Server CompactEdition的安装包由三部分功能组成,并且区分CPU平台和操作系统平台。
在Devices目录下有wce400和wce500两个子目录,分别存放着以Windows CE 4.0和Windows CE 5.0为内核的操作系统平台的安装包。Windows Mobile 2003和Windows CE 4.0版本的SQL Server Compact安装包在wce400目录下;Windows Mobile 5.0/6.0/6.1和Windows CE 5.0/6.0的SQL Server Compact安装包在wce500目录下。
目录 |
平台 |
wce400 |
Windows Mobile 2003, Windows CE 4.0 |
wce500 |
Windows Mobile 5.0/6.0/6.1, Windows CE 5.0/6.0 |
打开wce500目录,可以看到一些以处理器名称命名的子目录,目录名分别为armv4i, mipsii, mipsii_fp, mipsiv, mipsiv_fp, sh4和x86。Windows Mobile设备的CPU一般都属于armv4i,Windows CE则要看具体的硬件。
打开armv4i目录,可以看到一些.cab文件。下面表格就以SQL Server Compact 3.1为基础描述了每个安装包文件的功能和适用平台:
安装包 |
平台 |
功能 |
sqlce30.wce5.armv4i.CAB |
Windows CE |
Engine |
sqlce30.ppc.wce5.armv4i.CAB |
Windows Mobile Pocket PC |
Engine |
sqlce30.phone.wce5.armv4i.CAB |
Windows Mobile Smartphone |
Engine |
sqlce30.repl.wce5.armv4i.CAB |
Windows CE |
Merge Replication |
sqlce30.repl.ppc.wce5.armv4i.CAB |
Windows Mobile Pocket PC |
Merge Replication |
sqlce30.repl.phone.wce5.armv4i.CAB |
Windows Mobile Smartphone |
Merge Replication |
sqlce30.dev.ENU.wce5.armv4i.CAB |
Windows CE |
Query Analyzer |
sqlce30.dev.ENU.ppc.wce5.armv4i.CAB |
Windows Mobile Pocket PC |
Query Analyzer |
sqlce30.dev.ENU.phone.wce5.armv4i.CAB |
Windows Mobile Smartphone |
Query Analyzer |
从上表可以看出,SQL Server Compact的安装包分为Engine, Merge Replication和Query Analyzer三部分功能,每部分功能又分Windows CE, Windows Mobile PocketPC和Windows Mobile Smartphone三种操作系统平台。因此armv4i目录下面会有9个.cab安装包。在很多情况下,只需要安装Engine就够了;如果你需要让SQL Server Compact支持RDA或Merge Replication数据同步功能,就要再安装Merge Replication组件;如果你想要在设备上直接使用查询分析器创建、打开、查询SQL Server Compact数据库,或者在设备上调试程序,那就要再安装Query Analyzer组件。也就是说,Engine组件是必选的,Merge Replication和Query Analyzer组件是可选的。
每个组件安装包里面包含了不同的文件,在下表中列出:
安装包 |
包含文件 |
sqlce.platform.processor.cab |
sqlcese30.dll |
sqlce30.repl.platform.processor.cab |
sqlceca30.dll |
sqlce30.dev.lang.platform.processor.cab |
isqlw30.exe |
三、.NET Compact Framework 3.5的安装
类似SQL Server Compact Edition 3.5)的安装,.NET CF也有两种安装方法:
第一种
在C:\Program Files\Microsoft.NET\SDK\CompactFramework\v3.5\WindowsCE\下找到NETCFv35.wm.armv4i.cab文件,把它复制到你的设备里,然后在设备里安装这个CAB文件。
第二种
到微软官网http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=65下载.NET CF的安装包NetCFSetupv35.msi,将设备与电脑连接,在电脑上打开安装程序NetCFSetupv35.msi,根据提示进行安装,它会自动安装到winCE上。
from:http://blog.csdn.net/whutcomputer/article/details/6895034
MSSQL语句创建有权限的数据库用户
作者:freethy 发布于:2012-4-21 13:27 Saturday
环境mssql2005
--创建数据库
CREATE DATABASE test2
--创建登录名
CREATE LOGIN lusertest2 WITH PASSWORD = '123456',DEFAULT_DATABASE=test2,CHECK_POLICY=off
--创建数据库用户
use test2
CREATE USER dbusertest2 FOR LOGIN lusertest2
--更改登录名默认数据库
--EXEC sp_defaultdb 'test111', 'test1'
--关闭强制使用密码策略
--ALTER LOGIN test111 with CHECK_POLICY=off
--添加数据库用户角色成员
EXEC sp_addrolemember 'db_owner','dbusertest2'
DIV+CSS八种方法创建等高列布局
作者:freethy 发布于:2012-4-18 13:25 Wednesday
高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情。
如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易。最好的技术就是使用Dan Cederholm的Faux Columns技术。只要制作一张合适的背景图片,在你多列的父元素中进行垂直铺放,从而达到一种假像(假的多列等高布局效果)。但是在流体布局中要用CSS实现多列等高的设计那就不是那么容易的事情,因为我们没有办法在使用背景图片来实现多列等高的假像了,那么是不是就没有办法实现了呢?那当然不是那么回事了,不管是实现固定布局还是流体布局的等多列等高视觉效果,方法还是蛮多的,这些方法体现了CSS的不同技术,也各有千秋,下面我们就一起来探讨Web页面中的多列等高的实现技术。
下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果,正如下图所示:
一、假等高列
这种方法是我们实现等高列最早使用的一种方法,就是使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像:
Html Markup
<div class=”container clearfix”> <div class=”left”></div> <div class=”content”></div> <div class=”right”></div> </div>
在制作样式之前需要一张类似下面的背景图:
CSS Code:
.container { background: url("column.png") repeat-y; width: 960px; margin: 0 auto; } .left { float: left; width: 220px; } .content { float: left; width: 480px; } .right { float:left; width: 220px; }
优点:
实现方法简单,兼容性强,不需要太多的css样式就可以轻松实现。
缺点:
使用这种方法不适合流体布局等高列的布局,另外如果你需要更换背景色或实现其他列数的等高列时,都需要重新制作过背景图。
二、给容器div使用单独的背景色(固定布局)
这种方法实现有点复杂,如果你理解其实现过程也是相当的简单。这种方法我们主要给每一列的背景设在单独的<div>元素上。这种方法的实现的原则是:任何<div>元素的最大高度来撑大其他的<div>容器高度。如下图所示:
上图中,不管我们哪一列的高度最高,那么其三个容器“rightBack,contentBack,leftBack”的高度相应会随最高列的高列变化,下面我们一起来看其实现过程:
Html Markup
<div> <div> <div> <div> <div id="left"></div> <div id="content"></div> <div id="right"></div> </div> </div> </div> </div>
CSS Code:
<style type="text/css"> .container { width: 960px; margin: 0 auto; } .rightWrap { width: 100%; float: left; background: green; overflow: hidden; position: relative; } .contentWrap { float: left; background: orange; width: 100%; position: relative; right: 320px;/*此值等于rightSidebar的宽度*/ } .leftWrap{ width: 100%; background: lime; float:left; position: relative; right: 420px;/*此值等于Content的宽度*/ } #left { float: left; width: 220px; overflow: hidden; position: relative; left: 740px; } #content { float: left; width: 420px; overflow: hidden; position:relative; left: 740px; } #right { float: left; overflow: hidden; width: 320px; position: #333; position: relative; left: 740px; } </style>
看起来蛮复杂吧?其实你只要了解了它是如何的工作原理就会变得非常简单,你只要理解并掌握以下几点:
- “div.rightWrap”、“div.contentWrap”、“div.leftWrap”都是一个封闭的容器;而“div#left”、“div#content”、“div#right”就是我们所说的列,里面放了内容;
- 每一个容器对应一列的背景色(用来放置背景色或背景图片);此例对应的是:“div.rgithWrap”用来实现“div#right”列的背景色;“div.contentWrap”用来实现“div#content”列的背景色;“div.leftWrap”用来实现“div#left”列的背景色;
- 除了最外面的容器(也就是对应的最左列容器)外,我都都对他们进行相对定位,并且设置其“right”值,此值并和相对应的列宽相等。此例中“div.contentWrap”对应的刚好是“div#right”的宽度;而“div.leftWrap”对应用的刚好是“div#content”的宽度;
- 给每列进行左浮动,并设置其列宽
- 给每一列设置相对定位,并进行“left”设置,而且“left”的值等于除第一列的所有列宽的和。此例中“left”的值等于“div#right”和“div#content”两列的宽度之和,也就是320px+420=740px
- 用两幅图来展示其实现的过程:下图是实现上面的第二步对应的示例图,也就是容器“div.rightWrap”,“div.contentWrap”,“div.leftWrap”进行相对定位(position: releative),并展示了如何设置对应的“right”值。
上图虚线代表的范围是可视范围,其中有两列背景将会溢出,解决这个只需要在最外层容器“div.rightWrap”加上“overflow:hidden”就可以进行隐藏溢出的其他背景色。接下来下图所展示的是上面所说的第五步:
前面我们对三个内容元素都进行了相对定位,现在只需要按第五步将其定位回去,如上图所示。其实说到最后,你只要理解了这两幅,你就什么都清楚了。
优点:
这种方法是不需要借助其他东西(javascript,背景图等),而是纯CSS和HTML实现的等高列布局,并且能兼容所有浏览器(包括IE6),并且可以很容易创建任意列数。
缺点:
这种方法不像其他方法一样简单明了,给你理解会带来一定难度,但是只要你理解清楚了,将能帮你创建任意列数的等高布局效果。
三、给容器div使用单独的背景色(流体布局)
这种布局可以说是就是第二种布局方法,只是这里是一种多列的流体等高列的布局方法。前面也说过了,其实现原理就是给每一列添加相对应用的容器,并进行相互嵌套,并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器,比如说我们说的三列,那么你就需要使用三个容器。如下图所示:
HTML Markup
<div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div>
CSS Code:
<style type="text/css"> #container3 { float: left; width: 100%; background: green;/**/ overflow: hidden; position: relative; } #container2 { float: left; width: 100%; background: yellow; position: relative; right: 30%; /*大小等于col3的宽度*/ } #container1 { float: left; width: 100%; background: orange; position: relative; right: 40%;/*大小等于col2的宽度*/ } #col1 { float:left; width:26%;/*增加了2%的padding,所以宽度减少4%*/ position: relative; left: 72%;/*距左边呀增加2%就成72%*/ overflow: hidden; } #col2 { float:left; width:36%;/*增加了2%的padding,所以宽度减少4%*/ position: relative; left: 76%;/*距左边有三个padding为2%,所以距离变成76%*/ overflow: hidden; } #col3 { float:left; width:26%;/*增加了2%的padding,所以宽度减少4%*/ position: relative; left: 80%;/*距左边5个padding为2%,所以距离变成80%*/ overflow: hidden; } </style>
上面展示的是三列的,下面我们在来看一下两列和更多列的模板:
两列的HTML Markup:
<div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> </div> </div>
两列的CSS Code:
<style type="text/css"> #container2 { float: left; width: 100%; background: orange; position: relative; overflow: hidden; } #container1 { float: left; width: 100%; background: green; position: relative; right: 30%; } #col1 { width: 66%; float: left; position: relative; left: 32%; } #col2 { width: 26%; float: left; position: relative; left: 36%; } </style>
四列的HTML Markup:
<div id="container4"> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">col1</div> <div id="col2">col2</div> <div id="col3">col3</div> <div id="col4">col4</div> </div> </div> </div> </div>
四列的CSS Code:
<style type="text/css"> #container4 { float: left; width: 100%; background: green; position: relative; overflow: hidden; } #container3 { float: left; width: 100%; background: #B2F0F9; position: relative; right: 20%;/*此值等于col4的宽度*/ } #container2 { float: left; width: 100%; background: #89FFA2; position: relative; right: 30%;/*此值等于col3的宽度*/ } #container1 { float: left; width: 100%; background: #369; position: relative; right: 30%;/*此值等于col2的宽度*/ } #col1 { width: 18%;/*1%的padding*/ float: left; position: relative; left: 81%; overflow: hidden; } #col2 { float: left; width: 28%; position: relative; left: 83%; overflow: hidden; } #col3 { float: left; width: 28%; position: relative; left: 85%; overflow: hidden; } #col4 { float: left; width: 18%; position: relative; left: 87%; overflow: hidden; } </style>
下面来看其实现过程,如果你理解了第二制作方法,那么这个你不用想一下就知道他们是一样的道理,如果你对第二种方法还不够清楚,那么你接着看这下面的内容,你会更清楚他们是怎么一回事的。下面我们一起来看三列的实现过程:
上图展示了,我们有三列,并且也说过了,这三列内容都放在了三个容器的div中,我们每一列的背景色不是放在内容列中,而是放置在容器中,现在我们需要通过对容器进行相对定位,把背景显示出来,而且我们这个容器是最外层的不能进行相对定位的移动,具体的请看下图:
上面我们把容器进行了相对定位,这样一来,我们内容也相应的做了移动,现在我们需要对页面列的内容也进行相对定位,并把内容和容器进行相反方向的定位,这样内容和容器背景色就能对应上了,请看下图所展示的:
接下来我们需要把溢出的部分切掉去,和前面一相,在最外面的容器加上overflow:hidden;这样就OK了。
最后为了让你的效果更加好看一点,你可以尝试给他们加上padding,比如说每列加上2%的padding值,具体实现可以简单从下图中得到:
优点:
兼容各浏览器,可以制作流体等高列,交无列数限制。
缺点:
标签使用较多,结构过于复杂,不易于理解,不过你掌握了其原理也就不难了,这也不算太大缺点。
三、创建带边框的现列等高布局
平常在制作中,我们需要制作两列的等高效果,并且有一条边框效果,那么这个实例我们就一起来看其实现方法:
Html Code
<div id="wrapper"> <div id="sidebar"> ..... </div> <div id="main"> .... </div> </div>
CSS Code:
<style type="text/css"> html { background: #45473f; height: auto; } body { width: 960px; margin: 20px auto; background: #ffe3a6; border: 1px solid #efefef; } #wrapper { display: inline-block; border-left: 200px solid #d4c376; position: relative; vertical-align: bottom; } #sidebar { float: left; width: 200px; margin-left: -200px; margin-right: -1px; border-right: 1px solid #888; position: relative; } #main { float: left; border-left: 1px solid #888; } #maing, #sidebar{ padding-bottom: 2em; } </style>
优点:
可以制作带有边框的两列等高布局,并能兼容所有浏览器,结构简单明了。
缺点:
不适合于更多列的应用,比如说三列以上,这样的方法就行不通了。
四、使用正padding和负margin对冲实现多列布局方法
这种方法很简单,就是在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,并设置overflow:hiden把溢出背景切掉。下面一起来看代码:
HTML Markup:
<div id="container"> <div id="left"> <p>Sidebar</p> </div> <div id="content"> <p>Main content</p> </div> <div id="right"> <p>Sidebar</p> </div> </div>
CSS Code:
<style type="text/css"> #container { margin: 0 auto; overflow: hidden; width: 960px; } .column { background: #ccc; float: left; width: 200px; margin-right: 5px; margin-bottom: -99999px; padding-bottom: 99999px; } #content { background: #eee; } #right { float: right; margin-right: 0; } </style>
优点:
这种可能实现多列等高布局,并且也能实现列与列之间分隔线效果,结构简单,兼容所有浏览器
缺点:
这种方法存在一个很大的缺陷,那就是如果要实现每列四周有边框效果,那么每列的底部(或顶部)将无法有边框效果。
下面我们就针对这个缺陷来介绍两种解决办法,第一种是使用背景图来模仿底部(或顶部)边框;第二种方法是使用div来模仿列的边框,下面我们来看这两种方法:
1、背景图模仿边框效果:
Html Code:
<div id="containerOuter"> <div id="containerInner"> <div id="left"> <p>Sidebar</p> </div> <div id="content"> <p>Main content</p> </div> <div id="right"> <p>Sidebar</p> </div> </div> </div>
CSS Code:
<style type="text/css"> #containerOuter { background: url("images/bg.gif") no-repeat center bottom; width: 616px; margin: 0 auto; padding-bottom: 1px; overflow: hidden; } #containerInner { float: left; overflow: hidden; margin-right: -5px; } .column { background: #ccc; border: 1px solid #000; float: left; width: 200px; margin-right: 5px; margin-bottom: -99999px; padding-bottom: 99999px; } #content { background: #eee; } </style>
这种方法我们需要在外面增加一个层,并将背景图放置在这个层的底部,而且需要制作一张和列边框色一致,并且要先排列好他们之间的间距,如下图所示:
这种方法有一个最大的不足之处就是,如果我们更改了列的边框的颜色,或者改变了他们之间的间距,都需要重新制作过一张背景图来重新模仿这样的效果,下面一起来看看这种方法带来的最后效果:
2、使用div来模仿列的边框
我们这种方法是在列里面添加一个div,用这个div来模仿边框的效果,具体看代码吧:
Html Code:
<div> <div> <div> <div><!-- ie needs this comment for small div heights --></div> </div> <div> <div><!-- ie needs this comment for small div heights --></div> </div> </div> </div>
CSS Code:
<style type="text/css"> .wrapper { width: 960px; margin: 0 auto; } .container { position: relative; overflow: hidden; zoom: 1; } /* zoom fix for ie6 */ .col1 { float: left; width: 728px; padding-bottom: 32767px; margin-bottom: -32767px; border: #f36 1px solid; background: #AFAFAF; } .col2 { float: right; width: 208px; padding-bottom: 32767px; margin-bottom: -32767px; border: #f36 1px solid; background: #6F6F6F; } .colBottom1 { position: absolute; /*相对于div.container*/ bottom: 0; left: 0px;/*如果第一列左浮动就设置left:0;*/ height: 1px; /*当前列的边框宽度*/ width: 730px;/*当前列宽度+边框宽度*2 */ background: #f36;/*当前列的边框颜色*/ } .colBottom2 { position: absolute; /*相对于div.container*/ bottom: 0; right: 0px; /*如果第二列右浮动就设置left:0;*/ height: 1px; /*当前列的边框宽度*/ width: 210px; /*当前列宽度+边框宽度*2 */ background: #f36;/*当前列的边框颜色*/ } </style>
五、使用边框和定位模拟列等高
这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。假设你需要实现一个两列等高布局,侧栏高度要和主内容高度相等。如:
Html Code:
<div id="wrapper"> <div id="mainContent">...</div> <div id="sidebar">...</div> </div>
CSS Code:
<style type="text/css"> #wrapper { width: 960px; margin: 0 auto; } #mainContent { border-right: 220px solid #dfdfdf; position: absolute; width: 740px; } #sidebar { background: #dfdfdf; margin-left: 740px; position: absolute; width: 220px; } </style>
优点:
结构简单,兼容各浏览器,容易掌握。
缺点:
这个方法就是无法单独给主内容列设置背景色,并且实现多列效果效果不佳。
六、边框模仿等高列
第五种方法我们无法实现主列的背景色设置,针对上面方法,稍作一下改良,这样就可以实现主内容也设置颜色的效果了
CSS Html:
<div id="container"> <div id="content">This is<br />some content</div> <div id="right">This is the right</div> </div>
CSS Code:
<style type="text/css"> #container{ background-color:#0ff; overflow:hidden; width:960px; margin: 0 auto; } #content{ background-color:#0ff; width:740px; border-right:220px solid #f00; /* 边框大小和颜色设置和right大小与颜色一样 */ margin-right:-220px; /*此负边距大小与right边栏宽度一样*/ float:left; } #right{ background-color:#f00; width:220px; float:left; } </style>
下面我们在此基础上改变流体布局:
HTML Markup
<div id="container"> <div id="content">Main content section</div> <div id="sidebar">Right Sidebar </div> </div>
<style type="text/css"> #container{ background-color:#0ff; overflow:hidden; margin:0 100px; padding-right:220px; /* 宽度大小等与边栏宽度大小*/ } * html #container{ height:1%; /* So IE plays nice */ } #content{ background-color:#0ff; width:100%; border-right:220px solid #f00; margin-right:-220px; float:left; } #sidebar{ background-color:#f00; width:220px; float:left; margin-right:-220px; } </style>
上面主要展示了这种方法的二列布局,下面我们在来看看三列布局的用法
HTML Markup
<div id="containerOuter"> <div id="container"> <div id="content">Main content section</div> <div id="left">LEFT sidebar</div> <div id="right">RIGHT sidebar</div> </div> </div>
CSS Code:
<style type="text/css"> #containerOuter { margin: 0 auto; width: 960px; } #container{ background-color:#0ff; float:left; width:520px; border-left:220px solid #0f0; /* 边框大小等于左边栏宽度,颜色和左边栏背景色一致*/ border-right:220px solid #f00;/* 边框大小等于右边栏宽度,颜色和右边栏背景色一致*/ } #left{ float:left; width:220px; margin-left:-220px; position:relative; } #content{ float:left; width:520px; margin-right:-520px; } #right{ float:right; width:220px; margin-right:-220px; position:relative; } </style>
接着在看一个三列自适应布局
Html Markup
<div id="container"> <div id="content">Main Content</div> <div id="left">Left Sidebar</div> <div id="right">Right Sidebar</div> </div>
CSS Code
<style type="text/css"> body{ margin:0 100px; padding:0 220px 0 220px; } #container{ background-color:#0ff; float:left; width:100%; border-left:220px solid #0f0; border-right:220px solid #f00; margin-left:-220px; margin-right:-220px; display:inline; /* So IE plays nice */ } #left{ float:left; width:220px; margin-left:-220px; position:relative; } #content{ float:left; width:100%; margin-right:-100%; } #right{ float:right; width:220px; margin-right:-220px; position:relative; } </style>
优点:
能兼容所有浏览器效果,结构简单明了,容易掌握。
缺点:
列数受到极限,超过三列不好控制。
七、模仿表格布局实列等高列效果
这种方法只适合现代浏览器,本不想介绍的,不过还是顺便列出让大家参考一下吧:
HTML Markup:
<div> <div> <div> <div> .... </div> </div> <div> <div> ... </div> </div> <div> <div> ... </div> </div> </div> </div>
CSS Code:
<style type="text/css"> .table { width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display:table; } .tableRow { display: table-row; } .tableCell { display: table-cell; width: 33%; } .cell1 { background: #f00; } .cell2 { background: #0f0; } .cell3 { background: #00f; } </style>
优点:
这是一种非常简单,易于实现的方法。
缺点:
兼容性不好,在ie6-7无法正常运行。
八、jQuery和javascript大法
最后要给大家介绍的是使用jQuery和javascript方法来实现多列的布局效果。
1、jQuery实现方法:
Html Markup
<div> <div id="left"></div> <div id="content"></div> <div id="right"></div> </div>
CSS Code:
<style type="text/css"> .contanier { width: 960px; margin: 0 auto; } .aside, .section { float:left; width: 33%; background: lime; } .leftSidebar {background: orange;} .section { background: green;} </style>
jQuery Code:
<script type="text/javascript"> $(document).ready(function(){ //等高列的小插件 function setEqualHeight(columns) { var tallestColumn = 0; columns.each(function(){ currentHeight = $(this).height(); if(currentHeight > tallestColumn) { tallestColumn = currentHeight; } }); columns.height(tallestColumn); } //调用写好的插件,基中“.container > div”是你需要实现的等高列 setEqualHeight($(".container > div")); }); </script>
你也可以把上面的jQuery代码换成下面的
<script type="text/javascript"> $(document).ready(function(){ var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; $('.column').each(function() { $el = $(this); topPostion = $el.position().top; if (currentRowStart != topPostion) { // we just came to a new row. Set all the heights on the completed row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } }); }); </script>
如果你使用上面这个jQuery代码,你需要在需要实现等高列的div中加上"column"类名,这样才会有效果的。
2、JavaScript方法
上面是jQuery的实现方法,接下来看看javaScript的实现方法:
Html Markup:
<div> <div id="left"></div> <div id="content"></div> <div id="right"></div> </div>
CSS Code:
<style type="text/css"> .contanier { width: 960px; margin: 0 auto; } #left { width: 220px; float: left; margin-right: 20px; background: green; } #content { width: 480px; float: left; margin-right: 20px; background: lime; } #right { width: 220px; float: right; background: orange; } </style>
Javascript Code:
<script type="text/javascript"> function matchColumns(classname){ var divs,contDivs,maxHeight,divHeight,d; // get all <div> elements in the document divs=document.getElementsByTagName('div'); contDivs=[]; // initialize maximum height value maxHeight=0; // iterate over all <div> elements in the document for(var i=0;i<divs.length;i++){ // make collection with <div> elements with class attribute 'container' if(new RegExp("\b" + classname + "\b").test(divs[i].className)){ d=divs[i]; contDivs[contDivs.length]=d; // determine height for <div> element if(d.offsetHeight){ divHeight=d.offsetHeight; } else if(d.style.pixelHeight){ divHeight=d.style.pixelHeight; } // calculate maximum height maxHeight=Math.max(maxHeight,divHeight); } } // assign maximum height value to all of container <div> elements for(var i=0;i<contDivs.length;i++){ contDivs[i].style.height=maxHeight + "px"; } } // Runs the script when page loads window.onload=function(){ if(document.getElementsByTagName){ matchColumns('column'); // } } </script>
上面八大种方法就是我今天要跟大家一起分享的等高列的布局方法,他们之间更有千秋,希望能给需要的您带来一定的帮助。篇幅过长,慢慢看吧,上面的代码都是经过测试的,兼容各大浏览器,可以直接复制代码使用。
如需转载烦请注明出处:W3CPLUS
小天鹅TB50-3073G 注水不停维修
作者:freethy 发布于:2012-4-7 13:27 Saturday
事件回放:晚上把床单被罩扔进洗衣机注满水,漂洗10分钟,然后停止关机睡觉了。第二天中午,启动洗衣机,开始。问题出现,注水不停。于是手动脱水后再次注水,问题依旧。
经检查发现拔下水位传感器(压力开关)空气导管,用嘴吹压力开关面可以正常洗衣。至此可以判断是导管漏气所指。但之前洗衣一直没有问题,有注满水泡了10几小时。可以断定应该是导管慢漏气。
再次脱水后,插上导管(脱水后相当于将水位传感器置零),问题解决。
DataGridView导出到Excel
作者:freethy 发布于:2012-4-5 13:24 Thursday
DataGridView导出到Excel
在这里下载DLL,使用 14.0.4756.1000 这个版本号的文件http://www.dllzj.com/DllDetail_Microsoft.Office.Interop.Excel.dll.html
然后添加如下引用
需要引入命名空间:
using System.Windows.Forms; using System.IO; using System.Reflection;
然后拷贝以下代码,调用方法即可完美导出。
此方法导出数据比较慢,但可以设置格式、合并单元格等,适合小数据量有格式要求导出。
#region 将 Datagridview 中的数据导出 /// <summary> /// 将 Datagridview 中的数据导出 通用 /// </summary> /// <param name="dgv">DataGridView</param> /// <param name="tittle">要导出的文件标题</param> public static void Export_DGV(DataGridView dgv, string tittle) { if (dgv == null || dgv.Rows.Count < 1 || dgv.Columns.Count < 1) { MessageBox.Show("没有任何有效数据!"); return; } int colscount = dgv.Columns.Count; string saveFileName = ""; SaveFileDialog saveDialog = new SaveFileDialog(); //新建保存对话框 saveDialog.DefaultExt = "xls"; saveDialog.Filter = "Excel文件|*.xls"; saveDialog.FileName = tittle; saveDialog.ShowDialog(); saveFileName = saveDialog.FileName; if (saveFileName.IndexOf(":") < 0) { return; //被点了取消 } //验证以fileNameString命名的文件是否存在,如果存在删除它 FileInfo file = new FileInfo(saveFileName); if (file.Exists) { try { file.Delete(); } catch (Exception error) { MessageBox.Show(error.Message, "删除失败 ", MessageBoxButtons.OK, MessageBoxIcon.Warning); return; } } Microsoft.Office.Interop.Excel.Application objExcel = null; Microsoft.Office.Interop.Excel.Workbook objWorkbook = null; Microsoft.Office.Interop.Excel.Worksheet objsheet = null; try { //申明对象 objExcel = new Microsoft.Office.Interop.Excel.Application(); if (objExcel == null) { MessageBox.Show("无法创建Excel对象,可能您的机子未安装Excel"); return; } objWorkbook = objExcel.Workbooks.Add(Missing.Value); objsheet = (Microsoft.Office.Interop.Excel.Worksheet)objWorkbook.ActiveSheet; //设置EXCEL不可见 objExcel.Visible = false; //判断哪些列是不用显示的 List<int> colArry = new List<int>(); for (int i = 0; i < colscount; i++) { if (dgv.Rows[0].Cells[i] is DataGridViewCheckBoxCell || (dgv.Columns[i].Visible == false)) //判断是否是复选框或者是隐藏的列 { colArry.Add(i); } } //向Excel中写入表格的表头 int displayColumnsCount = 1; for (int i = 0; i <= dgv.ColumnCount - 1; i++) { if (!colArry.Contains(i)) { objExcel.Cells[1, displayColumnsCount] = dgv.Columns[i].HeaderText.Trim(); displayColumnsCount++; } } //向Excel中逐行逐列写入表格中的数据 for (int row = 0; row <= dgv.RowCount - 1; row++) { displayColumnsCount = 1; for (int col = 0; col < colscount; col++) { if (!colArry.Contains(col)) { try { objExcel.Cells[row + 2, displayColumnsCount] = dgv.Rows[row].Cells[col].Value.ToString().Trim(); displayColumnsCount++; } catch (Exception) { } } } } //保存文件 objWorkbook.SaveAs(saveFileName, Missing.Value, Missing.Value, Missing.Value, Missing.Value, Missing.Value, Microsoft.Office.Interop.Excel.XlSaveAsAccessMode.xlShared, Missing.Value, Missing.Value, Missing.Value, Missing.Value, Missing.Value); } catch (Exception ex) { MessageBox.Show("导出文件时出错,文件可能正被打开!\n" + ex.Message); return; } finally { objExcel.Quit(); GC.Collect();//强行销毁 } MessageBox.Show(saveFileName + "\n\n导出完毕! ", "提示 ", MessageBoxButtons.OK, MessageBoxIcon.Information); } #endregion
WordPress上传提示:临时文件夹丢失。
作者:freethy 发布于:2012-4-2 13:24 Monday
经过彻底检查
1.网站目录权限设置正确
2.php程序目录设置正确
3.php.ini配置正确(临时目录配置在:C:/windows/temp)
4.temp文件夹权限正确
最后发现是:temp对于上层目录windows,也必须要设置users用户的“列出目录”的权限。
3389溢出漏洞补丁 MS12-020,KB2621440 补丁
作者:freethy 发布于:2012-4-2 13:23 Monday
漏洞介绍:
http://technet.microsoft.com/zh-cn/security/bulletin/MS12-020
已用exp亲测受影响系统版本有:
2003 中文企业版SP2
2003 SP1 也受此影响,但官方出的补丁基于SP2,需要先升级SP2才可运行此补丁。
请用迅雷下载
2003 3389溢出补丁 KB2621440
http://download.microsoft.com/download/3/C/F/3CF10043-CB94-476A-A677-F6FA103CD42D/WindowsServer2003-KB2621440-x86-CHS.exe
其他系统版本补丁
http://www.microsoft.com/downloads/zh-cn/results.aspx?freetext=KB2621440
from:http://www.03389.com/BLOG/user1/qq66565841/archives/2012/201231620152.html