新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> 讨论HTML、XHTML、Web2.0、Ajax、XUL, ExtJS, jQuery, JSON、Social Networking System(SNS)、Rich Internet Applications (RIA)、Tagging System、Taxonomy(tagsonomy,folkonomy)、XForms、XFrames、XInclude, XBL (XML Binding Language)等话题
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - XML技术『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』 → 『循序渐进12天学习XHTML』 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 257407 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子 浏览下一篇主题
     * 贴子主题: 『循序渐进12天学习XHTML』 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     纯色理想 帅哥哟,离线,有人找我吗?
      
      
      威望:4
      等级:大三暑假(TOFEL考了650分!)
      文章:50
      积分:760
      门派:XML.ORG.CN
      注册:2004/8/6

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给纯色理想发送一个短消息 把纯色理想加入好友 查看纯色理想的个人资料 搜索纯色理想在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看纯色理想的博客11
    发贴心情 第11天:不用表格的菜单


    布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:

    样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
    页面代码:<div id="logo"><a title="网页设计师" href="http://www.w3cn.org/" ><img height="80" alt="链接到w3cn.org首页" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>
    以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。需要说明的是,为了使网页有更好的易用性,web标准要求大家给所有的、属于正式内容的图片,加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字),所以不要只写成无意义的图片名称。

    接下来是定义菜单。

    1.不用表格的菜单(纵向)
    我们先来看菜单的最终效果:

    什么是网站标准
    使用标准的好处
    怎样过渡
    相关教程
    工具
    资源及链接

    通常方法我们至少嵌套2层表格来实现这样的菜单,间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现;背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码,你会看到只有如下几句:

    <div id="menu">
    <ul>
    <li><a title="网站标准" href="http://www.w3cn.org/webstandards.html">什么是网站标准</a></li>
    <li><a title="标准的好处" href="http://www.w3cn.org/benefits.html">使用标准的好处</a></li>
    <li><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li>
    <li><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li>
    <li><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li>
    <li><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li>
    </ul>
    </div>
    没有用任何table,而用的是无序列<li>,整个菜单的效果实现的秘密完全在于id="menu",我们再来看CSS中关于menu的定义:

    (1)首先定义了menu层的主要样式:

    #menu {
    MARGIN: 15px 20px 0px 15px;  /*定义层的外边框距离*/
    PADDING:15px;    /*定义层的内边框为15px*/
    BACKGROUND: #dfdfdf;   /*定义背景颜色*/
    COLOR: #666;    /*定义字体颜色*/
    BORDER:#fff 2px solid;  /*定义边框为2px白色线条*/
    WIDTH:160px;    /*定义内容的宽度为160px*/
    }
    (2)其次定义无序列表的样式:

    #menu ul {
    MARGIN: 0px;
    PADDING: 0px;
    BORDER: medium none; /*不显示边框*/
    LINE-HEIGHT: normal;
    LIST-STYLE-TYPE: none;

    }
    #menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}
    说明:这里用的是id选择器的派生方法定义(参考第7天:CSS入门的介绍)了在menu层中的子元素<ul>和<li>的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式,即:不显示小圆点(我们后面用自己的图标来代替小圆点)。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。

    (3)定义onmouseover效果

    #menu li a {
    PADDING:5px 0px 5px 15px;
    DISPLAY: block;
    FONT-WEIGHT: bold;
    BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
    WIDTH: 100%;
    COLOR: #444;
    TEXT-DECORATION: none;
    }
    #menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
    COLOR: #fff; }
    解释如下:

    "display:block;"表示将标签a当作块级元素来显示,使得链接变成一个按钮;
    "BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"这一句定义了替代li的小圆点的图标。"transparent"指背景为透明,"2px 8px"指定图标的位置是距左边2px,距上边8px。这一句也可以拆分写成四句:"BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"
    "#menu li a:hover"定义了当鼠标移动到链接上以后的颜色变化和小图标变化。
    ok,不用表格的菜单就这样实现了。大家可以明显感觉到,原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。

    2.不用表格的菜单(横向)
    上面是纵向的菜单,如果要显示横向菜单,用li也可以吗?当然是可以的,下面给出代码,效果就在本页顶部:

    页面代码

    <div id="submenu">
    <ul>
    <li id="one"><a title="首页" href="http://www.w3cn.org/">Home</a></li>
    <li id="two"><a title="关于我们" href="http://www.w3cn.org/aboutus.html">关于我们</a></li>
    <li id="three"><a title="网站标准" href="http://www.w3cn.org/webstandards.html">网站标准</a></li>
    <li id="four"><a title="标准的好处" href="http://www.w3cn.org/benefits.html">标准的好处</a></li>
    <li id="five"><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li>
    <li id="six"><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li>
    <li id="seven"><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li>
    <li id="eight"><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li>
    <li id="nine"><a title="常见问题" href="http://www.w3cn.org/faq.html">常见问题</a></li>
    </ul>
    </div>
    样式表代码

    #submenu {
    MARGIN: 0px 8px 0px 8px;
    PADDING: 4px 0px 0px 0px;
    BORDER: #fff 1px solid;
    BACKGROUND: #dfdfdf;
    COLOR: #666;
    HEIGHT:25px; }

    #submenu ul {
    CLEAR: left;
    MARGIN: 0px;
    PADDING:0px;
    BORDER: 0px;
    LIST-STYLE-TYPE: none;
    TEXT-ALIGN: center;
    DISPLAY:inline;
    }

    #submenu li {
    FLOAT: left;
    DISPLAY: block;
    MARGIN: 0px;
    PADDING: 0px;
    TEXT-ALIGN: center}

    #submenu li a {
    DISPLAY: block;
    PADDING:2px 3px 2px 3px;
    BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
    FONT-WEIGHT: bold;
    WIDTH: 100%;
    COLOR: #444;
    TEXT-DECORATION: none;
    }

    #submenu li a:hover {
    BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
    COLOR: #fff; }

    #submenu ul li#one A { WIDTH: 60px}
    #submenu ul li#two A { WIDTH: 80px}
    #submenu ul li#three A { WIDTH: 80px}
    #submenu ul li#four A { WIDTH: 90px}
    #submenu ul li#five A { WIDTH: 80px}
    #submenu ul li#six A { WIDTH: 80px}
    #submenu ul li#seven A { WIDTH: 60px}
    #submenu ul li#eight A { WIDTH: 90px}
    #submenu ul li#nine A { WIDTH: 80px}

    以上代码不逐一分析了。横向菜单的关键在于:定义<li>样式时的"FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递,从对象中删除行,通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度,控制菜单的间隔。好了,你也可以动手试试,用li实现各种各样的菜单样式。

    Tips:如果你子菜单的宽度总和大于层的宽度,菜单会自动折行,利用这个原理可以实现单个无序列表的2列或者3列排版,这是原来HTML很难实现的。

    感谢zhuweiwei指出横向菜单的bug,本文7月6日修正。

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/9/22 10:24:00
     
     纯色理想 帅哥哟,离线,有人找我吗?
      
      
      威望:4
      等级:大三暑假(TOFEL考了650分!)
      文章:50
      积分:760
      门派:XML.ORG.CN
      注册:2004/8/6

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给纯色理想发送一个短消息 把纯色理想加入好友 查看纯色理想的个人资料 搜索纯色理想在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看纯色理想的博客12
    发贴心情 第12天:校验及常见错误
    辛苦了好多天,我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准?W3C和一些志愿者网站提供了在线校验程序,来帮助我们检查页面是否符合标准,并提供了修正错误的帮助信息。这些校验非常有用,是我调试页面第一步要做的事情。

    1.XHTML校验
    校验网址:http://validator.w3.org/
    校验方式:网址校验、文件上传校验
    校验成功,会显示"This Page Is Valid XHTML 1.0 Transitional!",如图:


    校验失败,会显示更多校验选项和错误信息,如图:


    一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。

    XHTML校验常见错误原因对照表
    No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
    No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
    end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
    an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。
    element "DIV" undefined---DIV标签不能用大写,要改成小写div。
    required attribute "alt" not specified---图片需要加alt属性。
    required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。
    其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的,比如忘记了一个</li>其他<li>标签都会报错,所以不要看到一堆的错误害怕,通常解决了一个错误,其他的错误也都没有了。如果你的页面通过XHTML1.0校验,可以在页面上放置这么一个图标: 代码如下:

    <p> <a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p>
    2.CSS2校验
    校验网址:http://jigsaw.w3.org/css-validator/
    校验方式:网址校验、文件上传校验、直接贴入代码校验
    校验成功,会显示"恭喜恭喜,此文档已经通过样式表校验! ",hoho,校验信息支持中文噢。如图:


    校验失败,会显示两类错误:错误和警告。错误表示一定要修正,否则无法通过校验;警告表示有代码不被W3C推荐,建议修改。

    CSS2校验常见错误原因对照表
    (错误)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加"#"号,即#909090
    (错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值,正确写法6px
    (错误)属性 scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性
    (错误)值 cursorhand不存在 : hand是非标准属性值,修改为cursor:pointer
    (警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候,最后以一个类别的字体结束,例如"sans-serif",以保证在不同操作系统下,网页字体都能被显示。
    (警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值,校验程序无法判断和提供相应的警告信息。
    同样,通过检验后,可以放置一个CSS校验通过图标,代码如下:

    <p> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p>

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/9/22 10:26:00
     
     y1_f2 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:6
      积分:100
      门派:XML.ORG.CN
      注册:2004/11/2

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给y1_f2发送一个短消息 把y1_f2加入好友 查看y1_f2的个人资料 搜索y1_f2在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看y1_f2的博客13
    发贴心情 
    好啊!!!!!!
    置顶!!!!
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/11/4 22:11:00
     
     rdcaixd 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:0
      积分:54
      门派:XML.ORG.CN
      注册:2004/11/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给rdcaixd发送一个短消息 把rdcaixd加入好友 查看rdcaixd的个人资料 搜索rdcaixd在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看rdcaixd的博客14
    发贴心情 
    非常感谢!!
    我复制回去好好研究。
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/11/11 16:54:00
     
     xmzhy 帅哥哟,离线,有人找我吗?狮子座1978-8-18
      
      
      威望:5
      等级:计算机学士学位
      文章:385
      积分:2003
      门派:XML.ORG.CN
      注册:2003/10/22

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给xmzhy发送一个短消息 把xmzhy加入好友 查看xmzhy的个人资料 搜索xmzhy在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看xmzhy的博客15
    发贴心情 
    thank
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/11/12 11:44:00
     
     tianlang 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:3
      积分:70
      门派:XML.ORG.CN
      注册:2004/11/27

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给tianlang发送一个短消息 把tianlang加入好友 查看tianlang的个人资料 搜索tianlang在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看tianlang的博客16
    发贴心情 
    hao  dongxi
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/11/30 10:58:00
     
     chon81 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:3
      积分:69
      门派:XML.ORG.CN
      注册:2004/4/6

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给chon81发送一个短消息 把chon81加入好友 查看chon81的个人资料 搜索chon81在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看chon81的博客17
    发贴心情 
    good!
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/2 18:09:00
     
     嘻哈标明 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:1
      积分:61
      门派:XML.ORG.CN
      注册:2004/12/3

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给嘻哈标明发送一个短消息 把嘻哈标明加入好友 查看嘻哈标明的个人资料 搜索嘻哈标明在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看嘻哈标明的博客18
    发贴心情 
    支持。我现在开始做我的XHTML+CSS网站了。
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/3 14:57:00
     
     嘻哈标明 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:1
      积分:61
      门派:XML.ORG.CN
      注册:2004/12/3

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给嘻哈标明发送一个短消息 把嘻哈标明加入好友 查看嘻哈标明的个人资料 搜索嘻哈标明在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看嘻哈标明的博客19
    发贴心情 
    看后了解很多,下面是我的心得:
    1、用XHTML+CSS做网站在XHMTL页面几手看到那些html语言,比如表格。
    2、一大半排版结构都在CSS完成,然后在XHTML页面用层嵌入一个层实现。
    3、在CSS里大多都用 #menu { } , #submenu ul { }, #menu li a {}来完成菜单样式,实现好看的按钮。把这些放到一个文件里,能够统一整站的风格!

    这是我小小的了解,还有什么漏的,希望各位DX指点,在下感激不尽。

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/3 16:43:00
     
     wetfeather 帅哥哟,离线,有人找我吗?
      
      
      等级:大一新生
      文章:4
      积分:74
      门派:XML.ORG.CN
      注册:2004/12/12

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给wetfeather发送一个短消息 把wetfeather加入好友 查看wetfeather的个人资料 搜索wetfeather在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看wetfeather的博客20
    发贴心情 
    非常感谢!!
    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/12/12 11:27:00
     
     GoogleAdSense
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/3/28 15:05:25

    本主题贴数49,分页: [1] [2] [3] [4] [5]

    管理选项修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 解固 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    125.000ms