推荐阅读
巧用Dreamweaver CS3对表格进行排序
下面就看一下具体的排序过程吧！ 1.将光标移动到表格内任一单元格内，或选定表格，单击“Command/Sort Table…”，打开Sort Table对话框，如图所示。 2.在对话框中进行如下的选择： 在Sort By选项中选择要排序的Column(列)。 在Order选项中选择是根据alphabetically(字母)还是根据Numberically(数字)进行排序。 当列的内容是数字的时候这个选项是非常重要的。数字的排序是对列表按照一位和二位这样进行的(如1, 10, 2, 20, 3, 30)，而不是一个整洁的数字序列(如1, 2, 3,10, 20, 30)。 选取排列顺序是上升-Ascending(A to Z)，还是下降-Descending(Z to A)。 在对成绩表按总分或名次排序时，设置为： Sort By：Column5或Column6 Order：Numberically及Descending 3.要在不同的列进行次一级的排序，在Then By弹出菜单中指定排序选项。 4.选取Sort Includes First Row选项可以将第一行在排序时包括进去。假如第一行是不能移动的标题行，则不要选这个选项，如对成绩表排序时就不能选中此项。 5.对于Sort THEAD Rows(If Any)、Sort TFOOT Rows(If Any)两选项，是Dreamweaver CS3中新增加的。 Sort THEAD Rows(If Any)：排序时是否包含THEAD行。 Sort TFOOT Rows(If Any)：排序时是否包含TFOOT行。 6.Keep TR Attributes With Sorted Row：保持TR属性同排序行的一致。若选中此项，TR属性(例如颜色)将同排序行中单元格中的属性一同变化，否则将不变化。 例如，对图1所示成绩表的排序中，选中Keep TR Attributes With Sorted Row后，排序结果如下图所示，第三行中灰色背景排序时随同整行数据一同变化。 不选中后排序结果如下图所示，第三行中的数据移动了，而背景色灰色没有变化。 7.最后点击Apply或OK按钮，完成了表格排序操作，好了，现在可以交差了！
Samsung EX2F展F室任⒐獾某领o世界
咖啡厅、有气氛的餐厅、还有趣味的小店都是我们常去的场所，以前常常被认为小相机在这些昏暗场所没办法发挥，不过Samsung EX2F 具备最大光圈 F1.4 跟 1/1.7" BSI 背照式 CMOS 感光组件，巧妙的告诉我们，在这样的地方，小小身躯也能将这一刻的时光凝结起来。 喧闹城市里的寂静 离开日本的前一天，在大阪市内的小径来趟幽静的探险。记得那天午后，从商店街拐个弯就只剩下偶尔经过的脚踏车铃铛声，猫儿也慵懒的横在路中，沿路走过充满着昭和风味的小径，而小巷的尽头就是长屋「肌沽恕３の菔墙户时期以来的传统住屋，在这样的老房子里正藏着几间各有风情、古今和洋相互融会的小店。一推开门，正是长屋里面的 CRYDDERI Café。 长屋可说是日本最早的集合式住宅，如今也摇身一变成在幽静巷弄里的趣味小店铺。P程序自动模式、光圈 F2.8、快门 1/250秒、感亮度 ISO 80、曝光补偿0.7EV、RAW档拍摄调整。 沿着空崛一代恣意行走，在巷弄里巧遇午睡的小猫咪，用了翻转屏幕也可以轻松的拍下这刻。P程序自动模式、光圈 F4.0、快门 1/250秒、感亮度 ISO 80 、RAW档拍摄调整。 店内有各式各样的手工作品，也维持了复古的样式，能带着 EX2F 来实在是太好了。一般我们带着小 DC 遇上室内的微光环境时，比较担心就是光源不足而不容易拍摄，不过 EX2F 的 F.14 大光圈 和 1/1.7” BSI CMOS 在这边起上很好的作用!大光圈带来较足够的进光量，增加了手持拍摄成功的机率，且背照式感光组件也能提供高 ISO 下更纯静的画质表现，令我可以相当放心的拍摄。
CDR常用工具栏上面的复制与粘贴的介绍
在复制对象时，一般是复制工具与粘贴工具一起使用的。下面就给大家详细介绍一下，这二个工具的使用过程：1、复制工具，是将一个或多个对象的副本放到剪贴板里面。2、粘贴工具，将剪贴板内容放入文档中。3、怎么使用这二个工具呢，选中对象，点击复制工具或是ctrl+C，原对象还在，不会消失。4、然后点击粘贴工具或是按Ctrl+V。就可以在原对象上面粘贴一个副本。5、用选择工具，就可以把副本移出来。你可以试一试。
最新发布
WEB2.0标准教程:第十天 自适应高度
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)： <style type="text/css"> #pagebox{ margin:0px; PADDING:20px; BACKGROUND: #FFF; FONT-FAMILY: arial,'宋体','新宋体',verdana,sans-serif; WIDTH:600px; } #header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;} #mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; } #menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; } #content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;} #sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; } #footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; } </style> <div id="pagebox">Body <div id="header">这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}</div> <div id="mainbox"> 这里是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包含了#menu,#sidebar和#content <div id="menu">这里是#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }</div> <div id="sidebar"><p>这里是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }，背景颜色用的是#main的背景色</p></div> <div id="content"><p>这里是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}</p> <p>这里是主要内容，根据内容自动适应高度</p><p>这里是主要内容，根据内容自动适应高度</p> <p>这里是主要内容，根据内容自动适应高度</p> </div> </div> <div id="footer">这里是#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。</div> </div> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 这个例子的页面主要代码如下：具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就自动下移。这样就实现了高度的自适应。另外值得注意的是：#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。这个方法存在另一个问题，就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色，因为在Mozilla等浏览器中#mainbox的背景色失效。)好了，主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。
阻碍你学习CSS的因素 思维的转变 HTML结构化
我们通常采用DIV元素来将这些结构定义出来，类似这样： 以下是代码片段：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.suncss.com</title> <style type="text/css"> <!-- .code{ color:#666666; } table {border-collapse:collapse;} td,th {border:#000 solid 1px;} --> </style> </head> <body bgcolor="#FFFFFF"> <table border="0" cellspacing="0"> <tbody> <tr> <th>HTML属性 </th> <th>CSS方法 </th> <th>说明</th> </tr> <tr> <td class="code">align="left"<br /> align="right" </td> <td class="code">float: left; <br /> float: right;</td> <td><p>使用CSS可以浮动 <em>任何元素</em>:图片、段落、div、标题、表格、列表等等 </p> <p>当你使用float属性，必须给这个浮动元素定义一个宽度。 </p></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">marginwidth="0" leftmargin="0" marginheight="0" topmargin="0"</font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">margin: 0; </font></strong></span></td> <td><p>使用CSS, <span class="code"><strong><font face="Verdana" color="#60a179">margin</font></strong></span>可以设置在<em>任何</em>元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。 </p> </P></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">vlink="#333399" alink="#000000" link="#3333FF"</font></strong></span></td> <td><p><span class="code"><strong><font face="Verdana" color="#60a179">a:link #3ff;<br /> a:visited: #339;<br /> a:hover: #999;<br /> a:active: #00f; </font></strong></span> </p></td> <td><p>在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。 <span class='Hbz109'></span> </p></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">bgcolor="#FFFFFF"</font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">background-color: #fff; </font></strong></span></td> <td><p>在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。 </p> </P></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">bordercolor="#FFFFFF"</font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">border-color: #fff;</font></strong></span></td> <td><p>任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left </p> </P></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">border="3"<br /> cellspacing="3" </font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">border-width: 3px; </font></strong></span></td> <td><p>用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 </p> </P> <p>你可以使用 <span class="code"><strong><font face="Verdana" color="#60a179">table</font></strong></span>, <span class="code"><strong><font face="Verdana" color="#60a179">td</font></strong></span> or <span class="code"><strong><font face="Verdana" color="#60a179">th</font></strong></span> 这些选择器. </p> </P> <p>如果你需要设置无边框效果，可以使用CSS定义：<span class="code"><strong><font face="Verdana" color="#60a179"> border-collapse: collapse;</font></strong></span> </p> </P></td> </tr> <tr> <td><p><span class="code"><strong><font face="Verdana" color="#60a179"><br clear="left"><br /> <br clear="right"><br /> <br clear="all"> </font></strong></span> </p> </P></td> <td><p><span class="code"><strong><font face="Verdana" color="#60a179">clear: left;<br /> clear: right;<br /> clear: both; </font></strong></span> <span class='Hbz109'></span> </p></td> <td><p>许多2列或者3列布局都使用 <span class="code"><strong><font face="Verdana" color="#60a179">float</font></strong></span>属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用<span class="code"><strong><font face="Verdana" color="#60a179">clear</font></strong></span>属性. </p> </P></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">cellpadding="3"<br /> vspace="3"<br /> hspace="3" </font></strong></span></td> <td><span class="code"><strong><font face="Verdana" color="#60a179">padding: 3px; </font></strong></span></td> <td><p></p></td> </tr> <tr> <td><span class="code"><strong><font face="Verdana" color="#60a179">align="center"</font></strong></span></td> <td><p><span class="code"><strong><font face="Verdana" color="#60a179">text-align: center;</font></strong></span> </p> </P> <p><span class="code"><strong><font face="Verdana" color="#60a179">margin-right: auto; margin-left: auto; </font></strong></span> </p> </P></td> <td><p><span class="code"><strong><font face="Verdana" color="#60a179">Text-align</font></strong></span> 只适用于文本. </p> </P> <p>象div，p这样的块级怨毒可以通过<span class="code"><strong><font face="Verdana" color="#60a179">margin-right: auto; </font></strong></span>和<span class="code"><strong><font face="Verdana" color="#60a179">margin-left: auto;</font></strong></span>来水平居中 <span class='Hbz109'></span> </p></td> </tr> </tbody> </table> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 一些令人遗憾的技巧和工作环境 由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。 另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。 理解浮动行为 Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear)，阅读《How To Clear Floats Without Structural Markup》将非常有帮助。
Web标准化之form语义结构的实例
除了以上方法，我们还可以用label套嵌整个表单组件和文本标签，如： 4、使用optgroup标签 optgroup标签的作用是在选择列表中定义了一组选项。我们可以选用optgroup标签给select元素的options分类，并使用label属性，属性值会在下拉列表（select）里显示为一个不可选的、缩进标题。注意：optgroup 不支持嵌套。 IE6.0 中存在一个小Bug（FireFox 中不存在）：使用键盘方向键进行选择时，在 IE 中，当选中项由一个optgroup的选项换成另一optgroup 的选项时，不会触发onchange。解决办法是：增加 onkeydown 或 onkeyup 事件协助解决。5、使用button标签 定义与用法 定义为一个提交按钮。在button元素内你可以放置内容，像文本（text）或者图片（images）。这是这个元素和input元素按钮的区别。
关于使用CSS居中(包括水平/垂直)
用CSS如何使DIV层水平居中这两天开始对网志进行大刀阔斧的页面更改.今天碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索和亲自实验得出以下结论:正确的也是对页面构造没有影响的设置如下:对需要水平居中的DIV层添加以下属性:margin-left: auto;margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.问题到底出在哪里呢?感谢网友乐天无用帮忙找出了这个邪门问题的原因.原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.问题并不在CSS而在XHTML网页本身.需要加上这样的代码才能使得上述设置有效果: 说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。如何使图片在DIV 中垂直居中用背景的方法。举例：
同一个页面用多个id有什么影响
我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：id一个页面只可以使用一次，class可以多次引用。有网友问，id和class好象没什么区别，我在页面中用了多个id在IE中显示也正常，用多个id有什么影响吗？回答：第一影响就是不能通过W3的校验。在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆； class是一个样式，可以套在任何结构和内容上，就象一件衣服；概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。web标准希望大家用严格的习惯来写代码，例如：你可以用<b></b>显示粗体，也可以用<strong></strong>来显示，但W3C 建议大家用<strong>，因为<strong>更有语义如果对这些细节问题不重视，觉得无所谓，那么你就没必要向xml过渡了，也没必要学习web标准了，因为web标准应用就是从这些小细节上的改变开始，否则用现在的html不是也可以？
巧用expression区分只读文本框和普通文本框的背景色
当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量. 这里,使用expression来提供一种解决方案,只需要每个页面引入这个css即可,其它的都由程序自己判断,如下:<style> input{background-color:expression((this.readOnly && this.readOnly==true)?"#cccccc":"")} </style> <INPUT TYPE="text" NAME=""> <INPUT TYPE="text" NAME="" readonly> <INPUT TYPE="text" NAME=""> <INPUT TYPE="text" NAME="" readonly> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
你知道这些css网页设计技巧吗
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文件中放在后面的类的属性起作用。
用CSS层叠样式表完成可以控制的闪烁效果
上面这个示例就能实现上面所的效果，由于这里是抓取的一张图片，不能看到动态效果，只要按下面介绍的方法，制作一个试试，其效果是一目了然的。其制作思路是:采用了CSS的“Glow”滤镜产生光晕效果，利用CSS的属性可动态改变的特性，用一小段javascript程序来每一秒钟改变一次属性值，从而实现闪烁的效果，再用两个事件(onmouseover和onmouseout)调用Javascript程序来控制是否闪烁。 制作方法: 1、制作一个Glow滤镜，CSS滤镜的设置方法请参看“CSS滤镜应用技巧”的有关文章。在此不再重复。不是使用Dreamweaver的网友，请把下面的代码复制到网页源代码的〈head〉与〈/head〉之间: 〈style type="text/css"〉 〈!-- .glow1 { filter:glow(color=#FF0000,strengh=2)} --〉 〈/style〉 2、插入一个图层，取名为:bob。在图层上写上一段文字。再在图层上加载一个Glow滤镜，并加上两个事件以实现当鼠标移到文字上时强制停止闪烁，当鼠标移开文字时继续闪烁。代码:onclick="stopflash(this)"，这句代码的作用是:一旦鼠标移到文字上，将调用程序的“stopflash(this)”函数来停止闪烁; onmouseout="init()"，这句代码的作用是:一旦鼠标移开文字，将调用程序的“init()”函数来使光晕闪烁。本例完成后图层标记的代码是这样的: 〈div id="bob" style="position:absolute; width:572px; height:35px; z-index:1" class="glow1" onmouseover="stopflash(this)" onmouseout="init()"〉
用CSS代码轻松Diy你的网页滚动条
网页滚动条代码及其解释如下：（复制时请将大写尖括号改为小写） 以下是引用片段：＜Style type="text/CSS"＞ ＜!-- Body { scrollbar-face-color:#C0C0C0; （表面） scrollbar-highlight-color:#FFFFFF;（亮边） scrollbar-3dlight-color:#C0C0C0;（3D亮边） scrollbar-darkshadow-color:#000000; （3D暗边） scrollbar-Shadow-color:#808080;（阴影） scrollbar-arrow-color:#000000; （箭头） scrollbar-track-color:#E0E0E0;（滚动区） } --＞ ＜/Style＞ 以上的代码，从Body以下的，凡是#号后面的，都是颜色代码，颜色代码为16进制。而括号内的文字是对左边代码的注释，在加入网页代码时不要输入。这样一来，你就可以DIY自己的网页滚动条了。