• xhtml+css符合标准的WEB设计


    XHTML代码规范

    1.所有的标记都必须要有一个相应的结束标记
    2.所有标签的元素和属性的名字都必须使用小写
    3.所有的XML标记都必须合理嵌套
    4.所有的属性必须用引号""括起来
    5.把所有<和&特殊符号用编码表示
    6.给所有属性赋一个值
    7.不要在注释内容中使“--”

    HEAD区示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="Keywords" content="keyword1,keyword2" />
    <meta name="Description" content="description about the site or page" />
    <link href="/style/common.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
    <script language="JavaScript" src="/js/common.js" type="text/javascript"></script>
    <title>这是一个标题</title>
    </head>

    常用代码结构

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

    <li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>
    然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果

    h1-h6:标题

    label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,例如:
    <label for="user-password">密 码</label>
    <input type="password" name="password" id="user-password" />

    fildset & legend:fildset套在表单外,legend用于描述表单内容。例如:
    <form>
    <fildset>
    <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>

    命名参考

    头:header
    内容:content/container
    尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体布局宽度:wrapper
    命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如user-list

    用CSS做1px边框的表格

    #maincontent table{
      border-collapse:collapse;
      border-bottom:1px solid #000000;
      border-left:1px solid #000000;
    }
    #maincontent th{
      border-top:1px solid #000000;
      border-right:1px solid #000000;

    }
    #maincontent td{
      border-top:1px solid #000000;
      border-right:1px solid #000000;
    }
  • 相关阅读:
    【Uvalive4960】 Sensor network (苗条树,进化版)
    【UVA 1151】 Buy or Build (有某些特别的东东的最小生成树)
    【UVA 1395】 Slim Span (苗条树)
    【UVA 10600】 ACM Contest and Blackout(最小生成树和次小生成树)
    【UVA 10369】 Arctic Network (最小生成树)
    【UVA 10816】 Travel in Desert (最小瓶颈树+最短路)
    【UVA 11183】 Teen Girl Squad (定根MDST)
    【UVA 11865】 Stream My Contest (二分+MDST最小树形图)
    【UVA 11354】 Bond (最小瓶颈生成树、树上倍增)
    【LA 5713 】 Qin Shi Huang's National Road System (MST)
  • 原文地址:https://www.cnblogs.com/heters/p/1287629.html
Copyright © 2020-2023  润新知