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...

    May

    8

    a 伪类的顺序(LVHA)

    • 0 Comments
    • HTML,CSS

    给你一个鄙视 WEB 前端 HTML 网页开发者的理由——a 伪类的顺序:a:link、a:visited、a:hover、a:active。

    备注:为了兼容一些老式的浏览器, a:link 一般直接写a,而不是写 a:link;新式的浏览器能直接识别 a 为 a:link。

    May

    7

    块状元素
    内联元素
    address - 地址
    blockquote - 块引用
    center - 举中对齐块
    dir - 目录列表
    div - 常用块级容易,也是CSS layout的主要标签
    dl - 定义列表
    fieldset - form控制组
    form - 交互表单
    h1 - 大标题
    h2 - 副标题
    h3 - 3级标题
    h4 - 4级标题
    h5 - 5级标题
    h6 - 6级标题
    hr - 水平分隔线
    isindex - input prompt
    menu - 菜单列表
    noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
    noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
    ol - 有序表单
    p - 段落
    pre - 格式化文本
    table - 表格
    ul - 无序列表
    a - 锚点
    abbr - 缩写
    acronym - 首字
    b - 粗体(不推荐)
    bdo - bidi override
    big - 大字体
    br - 换行
    cite - 引用
    code - 计算机代码(在引用源码的时候需要)
    dfn - 定义字段
    em - 强调
    font - 字体设定(不推荐)
    i - 斜体
    img - 图片
    input - 输入框
    kbd - 定义键盘文本
    label - 表格标签
    q - 短引用
    s - 中划线(不推荐)
    samp - 定义范例计算机代码
    select - 项目选择
    small - 小字体文本
    span - 常用内联容器,定义文本内区块
    strike - 中划线
    strong - 粗体强调
    sub - 下标
    sup - 上标
    textarea - 多行文本输入框
    tt - 电传文本
    u - 下划线
    var - 定义变量

    May

    7

    HTML 标签

    • 0 Comments
    • HTML,CSS

    a, abbr, b, base, body, br, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, head, hr, html, i, img, li, link, meta, ol, p, s, script, span, strong, style, title, u, ul, acronym, address, applet, area, basefont, bdo, big, blockquote, button, caption, center, cite, code, col, colgroup, del, dfn, dir, font, frame, frameset, iframe, input, ins, isindex, kbd, label, legend, map, menu, noframes, noscript, object, optgroup, option, param, pre, q, samp, select, small, strike, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, var