• js窗口移动的方法

    2005-11-30

    一旦你得到了表示窗口的变量，你就能通过各种方法来操纵它。JavaScript提供了许多方法与属性，我们可以使用它们来控制窗口。

    移动、滚动、改变大小

    下面的方法（N4+，IE4+）负责个定窗口的移动、滚动以及大小改变操作：

    // 移动窗口的屏幕位置到指定的偏移x 、y（绝对移动）

    window.moveTo(iX, iY)

    // 移动窗口的屏幕位置到指定的偏移x 、y（相对移动）

    window.moveBy(iX, iY)

    // 滚动窗口的屏幕位置到指定的偏移x 、y（绝对滚动）

    window.scrollTo(iX, iY)

    // 滚动窗口的屏幕位置到指定的偏移x 、y（相对滚动）

    window.scrollBy(iX, iY)

    // 改变窗口大小到指定的高度与宽度（绝对改变大小）

    window.resizeTo(iWidth, iHeight)

    // 改变窗口大小到指定的高度与宽度（相对改变大小）

    window.resizeBy(iX, iY)

    注意，这些方法都属于window对象，所以它们智能在当前窗口或者其他可以引用的窗口被执行。如果你想动态设置窗口的位置和尺寸，就可以在窗口创建后使用move和resize方法。

    Tag：文章分享 JScript
    Ghost 发表于12:05 | 阅读全文 | 评论 0 | 编辑 | 推荐

  • [原]关于使用CSS居中(包括水平/垂直)

    2005-11-28

    今天有网友问到用CSS的text-align: center属性在FF中不起作用的问题，找了一下网上的资料，整理了一下：
    水平居中的问题可以用以下方法解决：
    先看一下body的CSS样式：
    ---------------------------------------------
    body{ margin:0;padding:0;text-align:center;}
    ---------------------------------------------
    这里的body把margin与padding设置为0，这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中。
    在需要水平居中的DIV层添加以下属性：
    -------------------------------------------
    margin-left: auto;
    margin-right: auto;
    -------------------------------------------
    也可写成：
    -------------------------------------------
    margin:0 auto;
    -------------------------------------------
    这样在FF中就可以居中了，在IE中别忘了在开头加上DTD哦，不然可是不起作用的：
    -------------------------------------------------------------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    ------------------------------------------------------------

    如何使图片在DIV 中垂直居中

    用背景的方法。举例：
    ----------------------------------------------------------
    body{BACKGROUND: #FFF url(http://www.blogbus.com/images/site/blogbus_logo.gif)  no-repeat center;}
    ----------------------------------------------------------
    关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"

    如何使文本在DIV中垂直居中

    果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：
    ------------------------------------------------------
    <html>
    <head>
    <style>
    body{TEXT-ALIGN: center;}
    #center{ MARGIN-RIGHT: auto;
    MARGIN-LEFT: auto;
    height:200px;
    background:#F00;
    width:400px;
    vertical-align:middle;
    line-height:200px;
    }
    </style>
    </head>
    <body>
    <div id="center"><p>test content</p></div>
    </body>
    </html>
    --------------------------------------------------------
    说明：
    vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
    不过这个方法还不是最好的方法，目前也只能先用用咯。

    Tag：CSS 代码分享 原创
    Ghost 发表于10:33 | 阅读全文 | 评论 0 | 编辑 | 推荐

  • CSS 锦囊

    2005-11-25

    CSS 锦囊

    最后更新：2004.03.05

    翻译：onestab [2004.03.09]
    原文：mezzoblue CSS Crib Sheet

    在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。

    如果您有所补充，请在这里发表您的意见.

    本文的其他语言版：法语, 德语, 西班牙语 和 匈牙利语。 欢迎提供其他翻译。

    有疑问，先验证
    在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。
    在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。
    如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。
    确保您想要的效果真的存在
    许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定样式，您用的就是私有代码，除了IE之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，别指望在不同的浏览器中得到一致的效果。
    如果布局中一定要用浮动对象，别忘了适时使用清除（clear）属性。
    浮动元素似易实难，而且难以驾驭。如果您发现浮动对象伸出了容器的边界，或者不像您所期望的那样显示，请检查您的期望是否正确。关于这个问题请看Eric Meyer 的教程
    边距的合并：可用padding 或 border 来避免。
    您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins，边距的合并可能就是问题的根源。 Andy Budd 对此的解释也许能为你解惑。
    避免将 padding/border 和固定宽度同时应用到同一元素。
    IE5 错误的区块模型是罪魁祸首，是它把事情弄得乱七八糟。虽然有补救方案，不过最好是绕过这个问题，当子元素的宽度固定时，为其父元素指定padding。
    避免IE下未指定样式内容的闪烁。
    如果您用 @import 来输入外部样式表，早晚会发现IE有“闪烁”的毛病。在应用CSS样式之前，未格式化的HTML文本会短暂地出现。这是可以避免的.
    别指望 min-width 在IE中有用。
    IE不支持它，但是它将 width 当作 min-width，所以通过一些 IE 的过滤技巧(filtering)，可以实现同样的最终效果。
    走投无路时，试一试减少宽度
    由于舍入误差，有时 50% 加上 50% 等于 100.1%，破坏某些浏览器中的布局。不妨试试将 50% 减到 49%，甚至 49.9%。
    IE 中显示不正常？
    可能是 Peekaboo 臭虫在作怪，尤其是当鼠标经过超链接时能显示正常。修补方法见Position is Everything。
    如果使用了锚点，在应用超链接样式时要特别小心。
    如果您在代码中使用了传统的锚点(<a name="anchor">)，您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形，你可以使用 id，或者使用鲜为人知的语法: :link:hover, :link:active
    记住“LoVe/HAte”（爱/恨）链接规则
    要以下面的顺序指定超链接伪类：Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了 :focus，次序应为 LVHFA(“Lord Vader's Handle Formerly Anakin”，Matt Haughey这样建议)。
    请记住“TRouBLED”（麻烦的）边框。
    边框(border)、边距(margin)和补白(padding)的简写次序为：顺时针方向从上开始，即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零，右边距为1px，依此类推。
    非零值要指明单位。
    在用CSS指定字体、边距或大小时，必须指明所用的单位（唯一的例外是 line-height，很奇怪，它不需要单位）。某些浏览器对未指明单位的处理方法不足为凭。零就是零，不管是 px 还是 em。其他的非零值都要明确指定单位。例如： padding: 0 2px 0 1em;
    测试不同的字体大小。
    像 Mozilla 和 Opera 这样的高级浏览器都允许你改变字体大小，不管你用什么字体单位。某些用户的默认字体大小肯定和你的不同，尽最大努力去满足他们。
    测试时用嵌入式样式，发布时再改为外部输入。
    将样式表嵌入在你的 HTML 源代码中，在测试时可以消除许多缓存引起的错误，尤其是某些 Mac 下的浏览器。但在发布前，一定要记住将样式表移到外部文件，用 @import 或 <link>引入。
    加上明显的边框有助于布局调试。
    像 div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的重叠或空白问题。
    图片路径不要用单引号。
    当设置背景图片时，要坚持用双引号。尽管看起来好像多此一举，但是如果不这么做，IE5/Mac 会噎住。
    Mac IE5 对空的样式表比较感冒，会增加页面的装入时间。建议样式表中至少应该有一条规则（哪怕是注释也好），免得 MacIE噎住。

    还有一些建议虽然不针对某些功能，但是在开发过程中值得注意：

    好好组织您的CSS文件
    恰当地成块注释CSS，将相似的CSS选择符编为一组，养成一致的命名习惯和空白格式（为跨平台考虑，建议用空白字符而不是tab。）以及适当的次序。
    以功能（而不是外观）为类和ID命名
    假如您创建了一个 .smallblue 类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。
    组合选择符
    保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。
    使用图片替换技术时要考虑亲和力
    已经发现传统的FIR在屏幕阅读器，以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法，要根据具体情况，慎重使用。
    Tag：CSS 文章分享
    Ghost 发表于18:33 | 阅读全文 | 评论 0 | 编辑 | 推荐

  • [转]XHTML+CSS兼容性解决方案小集

    2005-11-25

        使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^

    　　1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
    div{margin:30px!important;margin:28px;}
    注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
    div{maring:30px;margin:28px}
    重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

    　　2.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
    div{width:300px!important;width  /**/:340px;margin:0  10px  0  10px}
    ，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

    　　3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
    ul{margin:0;padding:0;}
    就能解决大部分问题

    　　4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为
    <script  type="text/javascript">
    就可以了
    Tag：文章分享 CSS
    Ghost 发表于18:21 | 阅读全文 | 评论 0 | 编辑 | 推荐

  • 去掉网页链接上点击时的虚线

    2005-11-24

    也许你会觉得当点击时焦点出现的虚线很不好看，那就让我们把它去掉吧！

    一，在<a>标签中加入onFocus="this.blur()"语句：
    -----------------------------------------------------------
    <a href="#" onFocus="this.blur()">try</a>
    -----------------------------------------------------------

    二，在<a>标签中加入hidefocus：
    -----------------------------------------------------------
    <a href="###" hidefocus>link</a>
    -----------------------------------------------------------

    三，如果连接太多，可以用外部链接 .HTC 文件。
    如，blur.htc 文件内容如下：
    ----------------------------------------------------------
    <public:attach event="onfocus" onevent="makeblur()"/>
    <script language="javascript">
    function makeblur(){
    this.blur();
    }
    </script>
    -----------------------------------------------------------
    在 CSS 中加入如下代码：
    -----------------------------------------------------------
    A { behavior:url(blur.htc); }
    -----------------------------------------------------------

    四，使用CSS样式，可加入代码：
    -----------------------------------------------------------
    a {blr:expression(this.onFocus=this.blur())}
    -----------------------------------------------------------
    这样，站内所有的文章都实现了无虚线效果了。

    Tag：代码分享 CSS
    Ghost 发表于16:12 | 阅读全文 | 评论 0 | 编辑 | 推荐
共7页 第一页 上一页 1 2 3 4 5 6 7 下一页 最后一页