About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • May

    9

    在大多数情况下,在让 DIV 的层浮动时,普通的 DIV 层是会自动插入到浮动层的下面,如下样例代码可能网页美工都很熟悉:

    <div id="div1" style="width:100px;height:100px;background-color:red;float:left;">这是一个浮动的DIV1层</div>
    <div id="div2" style="width:100%;height:100%;background-color:gray;">这是一个普通的DIV2层,显示在了DIV1下面</div>

    但涉及到 Flash 影片元素作为网页内容时,它与其它的 DIV 层往往会有一些奇葩的问题,导致 DIV 层被 Flash 遮挡。解决方法如下:

    第一步:设置 HTML 包装器中 wmode 属性值为 opaque(关于 wmode 的详细介绍参考《Flash HTML 包装器中 wmode 属性详解》):

    <object id='flashObject' ....>
        <param ....>
        <param name='wmode' value='opaque'>
        <embed ... wmode='opaque'>
        </embed>
    </object>

    第二步:设置被遮挡对象的 z-index 值(z-index 必须结合定位元素使用,否则是无效的,例如 position:absolute;,关于 z-index详细介绍参考《CSS z-index 属性》):

    /*
    浮动的 DIV 层 z-index 比 Flash 文件的的大
    并且需结合定位元素如 position,top,left等相关元素
    */

    #flashContent { 
        width:500px
        height:500px;
        z-index:1;
    }
    #divFloat{
        width:100px;
        height:100px;
        background-color:red;
        float:left;
        position:absolute;
        z-index:9999;
        top:0px;
        left:0px;
    }

    当 Flash 作为网页元素一部份被放在 HTML 显示时情况往往有可能是很复杂的,比如当一个 DIV 代码片段置于 Flash 影片代码之后,仅设置 position 与 z-index 可能会造成 DIV 布局定位不准确的情况,所以上面将可能遇到的几个属性值如 top 与 left 也列举进去了。

    More...

    May

    8

    DIV + CSS 入门级视频教程

    • 0 Comments
    • HTML,CSS

    很多时候,很多从业人员可能并不是专业的网页开发人员,但可能因为这样或那样的原因需要接触到 HTML 与 CSS,尤其是涉及一些文本或字处理相关游戏或软件开发的人员。这套视频教程出自于“自学 it 网”,比较简单,适合想要了解 HTML 与 CSS 的概要的人员。

    观看视频教学属于被动式学习,如果是想要专业学习的话推荐购买专业的书籍系统的学习吧。本文内容链接全部为外部链接,不保证长期有效性。

    More...