小开的一天

2011年8月10日

SQL 2005 with(nolock)详解

大家在写查询时,为了性能,往往会在表后面加一个nolock,或者是with(nolock),其目的就是查询是不锁定表,从而达到提高查询速度的目的。

什么是并发访问：同一时间有多个用户访问同一资源,并发用户中如果有用户对资源做了修改，此时就会对其它用户产生某些不利的影响，例如：

　　 1：脏读,一个用户对一个资源做了修改，此时另外一个用户正好读取了这条被修改的记录，然后，第一个用户放弃修改，数据回到修改之前，这两个不同的结果就是脏读。

　　2：不可重复读,一个用户的一个操作是一个事务，这个事务分两次读取同一条记录，如果第一次读取后，有另外用户修改了这个数据，然后第二次读取的数据正好是其它用户修改的数据，这样造成两次读取的记录不同，如果事务中锁定这条记录就可以避免。

　　 3：幻读,指用户读取一批记录的情况，用户两次查询同一条件的一批记录，第一次查询后，有其它用户对这批数据做了修改，方法可能是修改，删除，新增，第二次查询时，会发现第一次查询的记录条目有的不在第二次查询结果中，或者是第二次查询的条目不在第一次查询的内容中。

　　为什么会在查询的表后面加nolock标识？为了避免并发访问产生的不利影响，SQL Server有两种并发访问的控制机制：锁、行版本控制,表后面加nolock是解决并发访问的方案之一。

　　 1> 锁,每个事务对所依赖的资源会请求不同类型的锁，它可以阻止其他事务以某种可能会导致事务请求锁出错的方式修改资源。当事务不再依赖锁定的资源时，锁将被释放。

　　锁的类型：1:表类型：锁定整个表；2:行类型：锁定某个行；3:文件类型：锁定某个数据库文件；4:数据库类型：锁定整个数据库；5:页类型：锁定8K为单位的数据库页。

　　锁的分类还有一种分法，就是按用户和数据库对象来分：

　　 1). 从数据库系统的角度来看：分为独占锁（即排它锁），共享锁和更新锁

　　 1:共享 (S) ：用于不更改或不更新数据的操作（只读操作），一般常见的例如select语句。

　　2:更新 (U) ：用于可更新的资源中。防止当多个会话在读取、锁定以及随后可能进行的资源更新时发生常见形式的死锁。

　　 3:排它 (X) ：用于数据修改操作，例如 INSERT、UPDATE 或 DELETE。确保不会同时同一资源进行多重更新。

　　 2). 从程序员的角度看：分为乐观锁和悲观锁。

　　1:乐观锁：完全依靠数据库来管理锁的工作。

　　 2:悲观锁：程序员自己管理数据或对象上的锁处理。

　　一般程序员一看到什么锁之类，觉的特别复杂，对专业的DBA当然是入门级知识了。可喜的是程序员不用去设置,控制这些锁，SQLServer通过设置事务的隔离级别自动管理锁的设置和控制。锁管理器通过查询分析器分析待执行的sql语句，来判断语句将会访问哪些资源，进行什么操作，然后结合设定的隔离级别自动分配管理需要用到的锁。

　　 2>:行版本控制:当启用了基于行版本控制的隔离级别时，数据库引擎将维护修改的每一行的版本。应用程序可以指定事务使用行版本查看事务或查询开始时存在的数据，而不是使用锁保护所有读取。通过使用行版本控制，读取操作阻止其他事务的可能性将大大降低。也就是相当于针对所有的表在查询时都会加上nolock，同样会产生脏读的现象，但差别在于在一个统一管理的地方。说到了基于行版本控制的隔离级别，这里有必要说下隔离级别的概念。

　　隔离级别的用处：控制锁的应用，即什么场景应用什么样的锁机制。

　　最终目的：解决并发处理带来的种种问题。

　　隔离级别的分类：

　　 1：未提交读,隔离事务的最低级别，只能保证不读取物理上损坏的数据;

　　 2：已提交读,数据库引擎的默认级；

　　 3：可重复读；

　　 4：可序列化；隔离事务的最高级别，事务之间完全隔离。

　　小结：NOLOCK 语句执行时不发出共享锁，允许脏读，等于 READ UNCOMMITTED事务隔离级别。nolock确实在查询时能提高速度，但它并不是没有缺点的，起码它会引起脏读。

　　 nolock的使用场景(个人观点)：

　　1:数据量特别大的表，牺牲数据安全性来提升性能是可以考虑的；

　　 2:允许出现脏读现象的业务逻辑，反之一些数据完整性要求比较严格的场景就不合适了，像金融方面等。

　　3:数据不经常修改的表，这样会省于锁定表的时间来大大加快查询速度。

　　综上所述，如果在项目中的每个查询的表后面都加nolock,这种做法并不科学，起码特别费时间，不如行版本控制来的直接有效。而且会存在不可预期的技术问题。应该有选择性的挑选最适合的表来放弃共享锁的使用。

　　最后说下nolock和with(nolock)的几个小区别：

　　 1:SQL05中的同义词，只支持with(nolock);

　　 2:with(nolock)的写法非常容易再指定索引。

跨服务器查询语句时不能用with (nolock) 只能用nolock

同一个服务器查询时则with (nolock)和nolock都可以用

比如

SQL code

select * from [IP].a.dbo.table1 with (nolock) 这样会提示用错误select * from a.dbo.table1 with (nolock) 这样就可以

posted @ 2011-08-10 23:57 小开的一天阅读(120) 评论(0) 编辑

2010年6月24日

JS按键大全

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
</head>
<body onkeyup="window.alert(showKeyName(event))">
按键测试，支持像 Ctrl+Alt+Shift+T 的组合键（注：非浏览器热键）
<script type="text/javascript">
function showKeyName(e)
{
var keyName;
switch(e.keyCode)
{
case 8:keyName = e.keyCode+"[退格]";break;
case 9:keyName = e.keyCode+"[Tab]";break;
case 13:keyName = e.keyCode+"[Enter]";break;
case 16:keyName = e.keyCode+"[Shift]";break;
case 17:keyName = e.keyCode+"[Ctrl]";break;
case 18:keyName = e.keyCode+"[Alt]";break;
case 19:keyName = e.keyCode+"[PauseBreak]";break;
case 20:keyName = e.keyCode+"[Caps Lock]";break;
case 27:keyName = e.keyCode+"[Esc]";break;
case 32:keyName = e.keyCode+"[空格]";break;
case 33:keyName = e.keyCode+"[PageUp]";break;
case 34:keyName = e.keyCode+"[PageDown]";break;
case 35:keyName = e.keyCode+"[End]";break;
case 36:keyName = e.keyCode+"[Home]";break;
case 37:keyName = e.keyCode+"[方向键左]";break;
case 38:keyName = e.keyCode+"[方向键上]";break;
case 39:keyName = e.keyCode+"[方向键右]";break;
case 40:keyName = e.keyCode+"[方向键下]";break;
case 45:keyName = e.keyCode+"[Insert]";break;
case 46:keyName = e.keyCode+"[Delete]";break;
case 91:keyName = e.keyCode+"[左Win]";break;
case 92:keyName = e.keyCode+"[右Win]";break;
case 93:keyName = e.keyCode+"[快捷菜单键]";break;
case 95:keyName = e.keyCode+"[Sleep]";break;
case 96:keyName = e.keyCode+"[小键盘区0]";break;
case 97:keyName = e.keyCode+"[小键盘区1]";break;
case 98:keyName = e.keyCode+"[小键盘区2]";break;
case 99:keyName = e.keyCode+"[小键盘区3]";break;
case 100:keyName = e.keyCode+"[小键盘区4]";break;
case 101:keyName = e.keyCode+"[小键盘区5]";break;
case 102:keyName = e.keyCode+"[小键盘区6]";break;
case 103:keyName = e.keyCode+"[小键盘区7]";break;
case 104:keyName = e.keyCode+"[小键盘区8]";break;
case 105:keyName = e.keyCode+"[小键盘区9]";break;
case 106:keyName = e.keyCode+"[*]";break;
case 107:keyName = e.keyCode+"[+]";break;
case 109:keyName = e.keyCode+"[-]";break;
case 110:keyName = e.keyCode+"[.]";break;
case 111:keyName = e.keyCode+"[/]";break;
case 112:keyName = e.keyCode+"[F1]";break;
case 113:keyName = e.keyCode+"[F2]";break;
case 114:keyName = e.keyCode+"[F3]";break;
case 115:keyName = e.keyCode+"[F4]";break;
case 116:keyName = e.keyCode+"[F5]";break;
case 117:keyName = e.keyCode+"[F6]";break;
case 118:keyName = e.keyCode+"[F7]";break;
case 119:keyName = e.keyCode+"[F8]";break;
case 120:keyName = e.keyCode+"[F9]";break;
case 121:keyName = e.keyCode+"[F10]";break;
case 122:keyName = e.keyCode+"[F11]";break;
case 123:keyName = e.keyCode+"[F12]";break;
case 144:keyName = e.keyCode+"[NumLock]";break;
case 145:keyName = e.keyCode+"[ScrollLock]";break;
case 186:keyName = e.keyCode+"[;]";break;
case 187:keyName = e.keyCode+"[=]";break;
case 188:keyName = e.keyCode+"[,]";break;
case 189:keyName = e.keyCode+"[-]";break;
case 190:keyName = e.keyCode+"[.]";break;
case 191:keyName = e.keyCode+"[/]";break;
case 192:keyName = e.keyCode+"[`]";break;
case 219:keyName = e.keyCode+"[[]";break;
case 220:keyName = e.keyCode+"[\\]";break;
case 221:keyName = e.keyCode+"[]]";break;
case 222:keyName = e.keyCode+"[']";break;
//case 255:keyName = e.keyCode+"[Power]";break;
case 255:keyName = e.keyCode+"[Wake]";break;
default:keyName = e.keyCode+"[" + String.fromCharCode(e.keyCode) + "]";break;
}
if((e.shiftKey)&&(e.keyCode!=16)){keyName = e.keyCode+"[Shift] + " + keyName;}
if((e.altKey)&&(e.keyCode!=18)){keyName = e.keyCode+"[Alt] + " + keyName;}
if((e.ctrlKey)&&(e.keyCode!=17)){keyName = e.keyCode+"[Ctrl] + " + keyName;}
return keyName;
}
</script>
<script language="javascript">
   window.document.onkeyup=function()
{
     alert(event.keyCode);
}
</script>
</body>
</html>

posted @ 2010-06-24 10:38 小开的一天阅读(209) 评论(0) 编辑

2010年6月21日

高亮效果

高亮功能主要是指对页面中指定区域的指定文字进行高亮显示，也就是背景着色。一般在搜索结果页面会经常用到这个功能。下面就为大家提供两种解决方案，分别用javascript和jquery插件实现。

使用Javascript实现

首先在<head>中引入下面javascript方法：

<script type="text/javascript">
//<![CDATA[ 
    //--------begin function fHl(o, flag, rndColor, url)------------------// 
    function fHl(o, flag, rndColor, url){ 
        /// <summary>
        ///     使用 javascript HTML DOM 高亮显示页面特定字词.
        ///     实例:
        ///         fHl(document.body, '纸伞|她'); 
        ///         这里的body是指高亮body里面的内容。
        ///         fHl(document.body, '希望|愁怨', false, '/'); 
        ///         fHl(document.getElementById('at_main'), '独自|飘过|悠长', true, 'search.asp?keyword='); 
        ///         这里的'at_main'是指高亮id='at_main'的div里面的内容。search.asp?keyword=指给关键字加的链接地址，
        ///         我这里加了一个参数，在后面要用到。可以是任意的地址。        
        /// </summary>
        /// <param name="o" type="Object">
        ///     对象, 要进行高亮显示的对象. 
        /// </param>
        /// <param name="flag" type="String">
        ///     字符串, 要进行高亮的词或多个词, 使用 竖杠(|) 分隔多个词 . 
        /// </param>
        /// <param name="rndColor" type="Boolean">
        ///     布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示. 
        /// </param>
        /// <param name="url" type="String">
        ///     URI, 是否对高亮的词添加链接.
        /// </param>                        
        /// <return></return>
        var bgCor=fgCor=''; 
        if(rndColor){ 
            bgCor=fRndCor(10, 20); 
            fgCor=fRndCor(230, 255); 
        } else { 
            bgCor='#F0F'; 
            fgCor='black'; 
        } 
        var re=new RegExp(flag, 'i'); 
        for(var i=0; i<o.childNodes.length; i++){     
            var o_=o.childNodes[i]; 
            var o_p=o_.parentNode; 
            if(o_.nodeType==1) { 
                fHl(o_, flag, rndColor, url);                 
             } else if (o_.nodeType==3) { 
                if(!(o_p.nodeName=='A')){ 
                    if(o_.data.search(re)==-1)continue; 
                    var temp=fEleA(o_.data, flag); 
                    o_p.replaceChild(temp, o_); 
                } 
            }
        } 
        //------------------------------------------------ 
        function fEleA(text, flag){ 
            var style=' style="background-color:'+bgCor+';color:'+fgCor+';" ' 
            var o=document.createElement('span'); 
            var str=''; 
            var re=new RegExp('('+flag+')', 'gi'); 
            if(url){ 
                str=text.replace(re, '<a href="'+url+ 
                '$1"'+style+'>$1</a>'); //这里是给关键字加链接，红色的$1是指上面链接地址后的具体参数。
            } else { 
                str=text.replace(re, '<span '+style+'>$1</span>'); //不加链接时显示
            } 
            o.innerHTML=str; 
            return o; 
        } 
        //------------------------------------------------ 
        function fRndCor(under, over){ 
            if(arguments.length==1){ 
                var over=under; 
                    under=0; 
            }else if(arguments.length==0){ 
                var under=0; 
                var over=255; 
            } 
            var r=fRandomBy(under, over).toString(16); 
                r=padNum(r, r, 2); 
            var g=fRandomBy(under, over).toString(16); 
                g=padNum(g, g, 2); 
            var b=fRandomBy(under, over).toString(16); 
                b=padNum(b, b, 2); 
                //defaultStatus=r+' '+g+' '+b 
            return '#'+r+g+b; 
            function fRandomBy(under, over){ 
                switch(arguments.length){ 
                    case 1: return parseInt(Math.random()*under+1); 
                    case 2: return parseInt(Math.random()*(over-under+1) + under); 
                    default: return 0; 
                } 
            }
            function padNum(str, num, len){ 
                var temp='' 
                for(var i=0; i<len;temp+=num, i++); 
                return temp=(temp+=str).substr(temp.length-len); 
            } 
        } 
    }
    //--------end function fHl(o, flag, rndColor, url)--------------------// 
//]]> 
</script>

上面的fHl方法就是用来实现高亮的，参数的含义在注释中有写。

然后在页面最后调用fHl方法，对指定区域指定文字高亮着色，例如：

<script type="text/javascript">
fHl(document.body, '高亮');   //对页面body的区域中的“高亮”文字背景着色
</script>

使用Jquery插件实现

jQuery Highlight Plugin是一款专门用来实现文本高亮显示的jquery插件，它用法简单且功能完善。

使用方法如下：

在<head>中引入jquery文件及插件文件jquery.highlight.js

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

在css中或通过jquery指定高亮区域的颜色：

 .highlight {background-color: #FFFF88; }

$(".highlight").css({ backgroundColor: "#FFFF88" });

设置需要高亮显示的词语或通过事件触发高亮显示。例如：

      $("h1").highlight("highlight");
      //高亮显示所有h1标签中的“highligh”

      $("body p").unhighlight();
      //取消所有body中段落里的高亮显示；

      $("p").highlight("jQuery highlight plugin");
      //高亮段落中的词条 “jQuery highlight plugin”

      $("p").highlight(["jQuery", "highlight", "plugin"]);
      //高亮段落中的 “jQuery”，“highlight”及“plugin”

      $("p").highlight("Highlight", { caseSensitive: true });
      //高亮段落中的 “Highlight”，区分大小写。

      $("p").highlight("light", { wordsOnly: true });
      //高亮段落中的 “light”，必须是完整单词，“highlight”中的“light”不会高亮

      $("p").highlight("highlight", { element: 'em', className: 'error' });
      //高亮段落中的 “hightlight”，并为其指定父标签为em，class为error

      $("p").highlight("highlight", { element: 'em', className: 'error' });
      //高亮段落中的 “hightlight”，并为其指定父标签为em，class为error

     $("body p").highlight("jQuery", { element: 'a', className: 'jQueryLink'});
     $("body p a.jQueryLink").attr({ href: 'http://jquery.com' });
    //高亮段落中的 “jQuery”，并为其加上链接。

在该插件主页可查看实际效果

下载该插件：jquery.highlight.js

版权声明：

本站内容受著作权法保护。个人网站、blog转载时请遵循 “署名-非商业用途-保持一致” 的创作共用协议；商业网站或媒体未授权不得复制本站内容。

正则替换高亮

<html>
<head>
   <title></title>
   <script type="text/javascript">
       //var str = '<a>a</a>替换成<a>tt</a><div>cao</div>ddddd<p>caocao</p>';
       //str = str.replace(/(<[^>]+?>)([^<>]+?)(<\/[^>]+?>)/g, '$1<font>$2</font>$3');
       //alert(str)

       //var str = "<xx>大大f小小</xx>";
       // 替换成 <xx>大大<font>Key</font>小小</xx>
       //str = str.replace(/(<([^>]+?)>[^a-zA-Z]*)([a-zA-Z]+)([^a-zA-Z]*<\/\2>)/g, '$1<font>$3</font>$4' );
       //alert(str);
       //var p=/<.+>(.+?)</.+>/gi;
var str = "<xx>大大ff小小</xx>";
var reg = /(<([^>]+?)>)([\s\S]*?)(<\/\2>)/g
var ret = [];
var keyword = ['f'];
while((result = reg.exec(str)) !== null) {
   ret.push(result[1] + result[3].replace(new RegExp('(' +keyword.join('|') + ')', 'g'), '<font>$1</font>' ) + result[4]);
}
alert(ret)
   </script>
</head>

<body>

</body>
</html>

posted @ 2010-06-21 12:39 小开的一天阅读(143) 评论(0) 编辑

2010年5月28日

jQuery event 源码注释

摘要: jQuery event 源码注释 /* * author:prk * date:2008-08-17 * comment:analyse of jquery event * */ jQuery.event = { // add 事件到一个元素上。 add : function(elem, types, handler, data) { if (elem.nodeType == 3 || e...阅读全文

posted @ 2010-05-28 15:40 小开的一天阅读(783) 评论(0) 编辑

2010年3月12日

HTML与CSS常用代码

=======HTML常用代码=======
------图象和文字的对齐------
<img src="URL" align="#"> #=top上, middle中, bottom下。
------图象在页面中的对齐/布局-------
<img src=URL align="#">#=left左，right右。这里表示文字在图片下面。<img src=URL align=left vspace=10 hspace=20>vspace与hspace表示距离。
------表格，跨多列的表元----------
<td colspan=#> #=列的数目跨多行的表元：<th rowspan=#> #=行的数目。
-------表格的标题---------------
<caption align=#>内容 </caption> #=left左, center中, right右。
<aption valign=#>内容</caption> #=top, bottom，表示标题在表格下面。
--------背景音乐-------------
<bgsound src="168.mid" loop="5"> #=WAV 文件的 URL。#=填数字，如果填-1，表示一直播放。
---------会移动的文字------------
方向：direction=# #=left左, right右。<marquee direction=left>右向左移</marquee>，<marquee direction=right>左向右移</marquee>。
方式: bihavior=# #=scroll, slide, alternate。<marquee behavior=scroll>一圈一圈绕着走</marquee>，<marquee behavior=slide>只走一次就歇了</marquee>，<marquee behavior=alternate>我来回走耶</marquee>。
带颜色背景，鼠标经过文字停住：<marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>
空白:hspace=# vspace=# #=数字。示范：<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=center>啦啦啦，我会移动耶！</marquee>大家好！
==========CSS常用代码===========
字体颜色 : color : #00903A;
背景颜色 : background-color : #7CFFE7;
--------------------------------------------------------------------------------
边框宽度 : border-width : 5px;
上边宽度 : border-top-width : 5px;
左边宽度 : border-left-width : 5px;
右边宽度 : border-right-width : 5px;
底边宽度 : border-bottom-width : 5px;
--------------------------------------------------------------------------------
边框颜色 : border-color : #000FF4;
上边颜色 : border-top-color : #10FF01;
左边颜色 : border-left-color : #FF3B04;
右边颜色 : border-right-color : #FF3CF3;
底边颜色 : border-bottom-color : #00D0C3;
--------------------------------------------------------------------------------
边框样式 : border-style : double; 可替换 dashed; dotted; none;
上边样式 : border-top-style : solid;
左边样式 : border-left-style : inset;
右边样式 : border-right-style : ridge;
底边样式 : border-bottom-style : solid;
--------------------------------------------------------------------------------
整体宽度 : width : 5px;
整体高度 : height : 5px;
溢出选项 : overflow : visible; 可替换 hidden; scroll; auto;
--------------------------------------------------------------------------------
内侧边距 : padding : 5px;
上内边距 : padding-top : 5px;
左内边距 : padding-left : 5px;
右内边距 : padding-right : 5px;
底内边距 : padding-bottom : 5px;
--------------------------------------------------------------------------------
外侧边距 : margin : 5px;
上外边距 : margin-top : 5px;
左外边距 : margin-left : 5px;
右外边距 : margin-right : 5px;
底外边距 : margin-bottom : 5px;
--------------------------------------------------------------------------------
文字字体 : font-family : fantasy;
文字大小 : font-size : 12pt;
文字粗细 : font-weight : bold;
font-weight的值有normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
文字样式 : font-style : italic;
文字变量 : line-height : 110%;
--------------------------------------------------------------------------------
清除属性 : clear : left; 可替换 right; both; none;
浮动属性 : float : left; 可替换 right; none;
水平排列 : text-align : left; 可替换 right; center; justify;
文本修饰 : text-decoration : underline; 可替换 overline; underline overline; line-through; blink;
文本缩进 : text-indent : 5em;
文字间距 : letter-spacing : 5px;
字母间距 : word-spacing : 5px;
文本转换 : text-transform : capitalize; 可替换 lowercase; uppercase;
垂直排列 : vertical-align : baseline; 可替换 top; middle; bottom; text-top; text-bottom; super; sub; 3em; 30%;
--------------------------------------------------------------------------------
背景图片 : background-image : url(tianyi.gif);
背景拉伸 : background-repeat : repeat; 可替换 repeat-x; repeat-y; no-repeat;
背景定位 : background-position : left; 可替换 right; top; left top; right bottom; 30% 50%;
附加属性 : background-attachment : fixed; 可替换 scroll;
--------------------------------------------------------------------------------
显示属性 : display : none; 可替换 block; inline; run-in; compact; list-item; marker;
是否可见 : visibility : visible; 可替换 hidden;
资源定位 : position : static; 可替换 relative; absolute; fixed;
距离顶部 : top : 5px;
距离左边 : left : 5px;
距离右边 : right : 5px;
距离底边 : bottom : 5px;
优先等级 : z-index : 5;
鼠标指针 : cursor : crosshair; 可替换 default; pointer; move; text; wait; help; n-resize; s-resize; w-resize; e-resize; ne-resize; nw-resize; se-resize; sw-resize;

posted @ 2010-03-12 23:18 小开的一天阅读(85) 评论(0) 编辑

CSS常用代码1

==========CSS常用代码===========
字体颜色 : color : #00903A;
背景颜色 : background-color : #7CFFE7;
--------------------------------------------------------------------------------
边框宽度 : border-width : 5px;
上边宽度 : border-top-width : 5px;
左边宽度 : border-left-width : 5px;
右边宽度 : border-right-width : 5px;
底边宽度 : border-bottom-width : 5px;
--------------------------------------------------------------------------------
边框颜色 : border-color : #000FF4;
上边颜色 : border-top-color : #10FF01;
左边颜色 : border-left-color : #FF3B04;
右边颜色 : border-right-color : #FF3CF3;
底边颜色 : border-bottom-color : #00D0C3;
--------------------------------------------------------------------------------
边框样式 : border-style : double; 可替换 dashed; dotted; none;
上边样式 : border-top-style : solid;
左边样式 : border-left-style : inset;
右边样式 : border-right-style : ridge;
底边样式 : border-bottom-style : solid;
--------------------------------------------------------------------------------
整体宽度 : width : 5px;
整体高度 : height : 5px;
溢出选项 : overflow : visible; 可替换 hidden; scroll; auto;
--------------------------------------------------------------------------------
内侧边距 : padding : 5px;
上内边距 : padding-top : 5px;
左内边距 : padding-left : 5px;
右内边距 : padding-right : 5px;
底内边距 : padding-bottom : 5px;
--------------------------------------------------------------------------------
外侧边距 : margin : 5px;
上外边距 : margin-top : 5px;
左外边距 : margin-left : 5px;
右外边距 : margin-right : 5px;
底外边距 : margin-bottom : 5px;
--------------------------------------------------------------------------------
文字字体 : font-family : fantasy;
文字大小 : font-size : 12pt;
文字粗细 : font-weight : bold;
文字样式 : font-style : italic;
文字变量 : line-height : 110%;
--------------------------------------------------------------------------------
清除属性 : clear : left; 可替换 right; both; none;
浮动属性 : float : left; 可替换 right; none;
水平排列 : text-align : left; 可替换 right; center; justify;
文本修饰 : text-decoration : underline; 可替换 overline; underline overline; line-through; blink;
文本缩进 : text-indent : 5em;
文字间距 : letter-spacing : 5px;
字母间距 : word-spacing : 5px;
文本转换 : text-transform : capitalize; 可替换 lowercase; uppercase;
垂直排列 : vertical-align : baseline; 可替换 top; middle; bottom; text-top; text-bottom; super; sub; 3em; 30%;
--------------------------------------------------------------------------------
背景图片 : background-image : url(tianyi.gif);
背景拉伸 : background-repeat : repeat; 可替换 repeat-x; repeat-y; no-repeat;
背景定位 : background-position : left; 可替换 right; top; left top; right bottom; 30% 50%;
附加属性 : background-attachment : fixed; 可替换 scroll;
--------------------------------------------------------------------------------
显示属性 : display : none; 可替换 block; inline; run-in; compact; list-item; marker;
是否可见 : visibility : visible; 可替换 hidden;
资源定位 : position : static; 可替换 relative; absolute; fixed;
距离顶部 : top : 5px;
距离左边 : left : 5px;
距离右边 : right : 5px;
距离底边 : bottom : 5px;
优先等级 : z-index : 5;
鼠标指针 : cursor : crosshair; 可替换 default; pointer; move; text; wait; help; n-resize; s-resize; w-resize; e-resize; ne-resize; nw-resize; se-resize; sw-resize;
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lenhan12345/archive/2006/12/22/1453079.aspx

posted @ 2010-03-12 23:12 小开的一天阅读(65) 评论(0) 编辑

CSS常用代码结构

常用代码结构：

div：主要用于布局，分割页面的结构
ul/ol：用于无序/有序列表
span：没有特殊的意义，可以用作排版的辅助，例如：

<li><span>(4.23)</span>隐居豆腐店</li>
然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

h1-h6：标题
h1-h6 根据重要性依次递减
h1 为最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如：

<label for="user-password">密　码</label>
<input type="password" name="password" id="user-password" />
fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：
<form>
<fieldset>
<legend>title</legend>
<label for="user-password">密　码</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>
dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，例如：

<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>
<dt>什么是XHTML？</dt>
< dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似 HTML的角色的XML。本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>
</dl>
C #content

S #subcol

M #maincol

X #xcol

这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名：
根据w3c网站上给出的,最好是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种

.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

常用的CSS命名规则:

头：header　　内容：content/container　　尾：footer　　导航：nav　　侧栏：sidebar

栏目：column　　页面外围控制整体布局宽度：wrapper　　左右中：left right center

登录条：loginbar　　标志：logo　　广告：banner　　页面主体：main　　热点：hot

新闻：news　　下载：download　　子导航：subnav　　菜单：menu

子菜单：submenu　　搜索：search　　友情链接：friendlink　　页脚：footer

版权：copyright　　滚动：scroll　　内容：content　　标签页：tab

文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title

加入：joinus　　指南：guild　　服务：service　　注册：regsiter

状态：status　　投票：vote　　合作伙伴：partner

(二)注释的写法:

　　/* Footer */

　　内容区

　　/* End Footer */

(三)id的命名:

(1)页面结构

　　容器: container　　页头：header　　内容：content/container

　　页面主体：main　　页尾：footer　　导航：nav

　　侧栏：sidebar　　栏目：column　　页面外围控制整体布局宽度：wrapper

　　左右中：left right center

(2)导航

　　导航：nav　　主导航：mainbav　　子导航：subnav

　　顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar

　　右导航：rightsidebar　　菜单：menu　　子菜单：submenu

　　标题: title　　摘要: summary

(3)功能

　　标志：logo　　广告：banner　　登陆：login　　登录条：loginbar

　　注册：regsiter　　搜索：search　　功能区：shop

　　标题：title　　加入：joinus 　状态：status　　按钮：btn

　　滚动：scroll　　标签页：tab　　文章列表：list　　提示信息：msg

　　当前的: current　　小技巧：tips　　图标: icon　　注释：note

　　指南：guild　服务：service　　热点：hot　　新闻：news

　　下载：download　　投票：vote　　合作伙伴：partner

　　友情链接：link　　版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

　　.red { color: red; }

　　.f60 { color: #f60; }

　　.ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’作为名称,如

　　.font12px { font-size: 12px; }

　　.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

　　.left { float:left; }

　　.bottom { float:bottom; }

(4)标题栏样式,使用’类别+功能’的方式命名,如

　　.barnews { }

　　.barproduct { }

注意事项::

　　1.一律小写;

　　2.尽量用英文;

　　3.不加中杠和下划线;

　　4.尽量不缩写，除非一看就明白的单词.

　　主要的 master.css　　模块 module.css　　基本共用 base.css

　　布局，版面 layout.css　　主题 themes.css　　专栏 columns.css

　　文字 font.css　　表单 forms.css　　补丁 mend.css　　打印 print.css

<$ 该文章转载自 http://www.oujiebin.cn/ $>

posted @ 2010-03-12 23:08 小开的一天阅读(67) 评论(0) 编辑

2010年3月10日

addEventListener 和attachEvent用法

摘要: 对于IE的attachEvent方法可能大家都比较熟，现在说说FireFox的addEventListener的用法。addEventListener的参数一共有三个，语法为：element.addEventListener(type,listener,useCapture)下面是详解其中element是要绑定函数的对象。type是事件名称，要注意的是"onclick"要改为"click","on...阅读全文

posted @ 2010-03-10 15:44 小开的一天阅读(127) 评论(0) 编辑

2010年3月2日

Width clientWidth offsetWidth实例

摘要: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"><ht...阅读全文

posted @ 2010-03-02 17:28 小开的一天阅读(808) 评论(0) 编辑

2010年2月28日

JS类库 <转>

摘要: 1/**//*------------------------------------------------------------2*S.SamsLifexperience3*CopyRight(C)2003-2007S.SamsLifexperienceScriptClassLib4*MSNLive:S.Sams#msn.com5*Http://blog.8see.net/6*UPdateb...阅读全文

posted @ 2010-02-28 10:17 小开的一天阅读(63) 评论(0) 编辑

仅列出标题下一页

公告

昵称：小开的一天
园龄：2年9个月
粉丝：8
关注：0

2012年2月

日

一

二

三

四

五

六

搜索

常用链接

我的标签

sql server(1)

版权声明：

公告

搜索

常用链接

最新随笔

我的标签

随笔分类

随笔档案

最新评论

阅读排行榜

评论排行榜

推荐排行榜