“XHTML/HTML” 相关主题的文章存档：

搜狐首页HTML标签树

2007年5月24日 | 作者: 牧天 | 分类: XHTML/HTML | 评论: 3

搜狐首页HTML结构树

上图是www.sohu.com的首页标签树，看上去好艺术，为了生成这张图片等了好久，居然让我的Firefox吃满了CPU。
http://www.aharef.info/static/htmlgraph/
可以将你的网页的HTML标签树生成一个结构图。

The colors mean:
blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags

从flickr上还可以找到更多的结构图输出截图：
http://www.flickr.com/photos/tags/websitesasgraphs/

在IE5.0/IE5.5/IE6中使用条件注释

2006年8月26日 | 作者: 牧天 | 分类: XHTML/HTML | 评论: 1

浏览器条件注释的话题已经是老生常谈了，以前曾发过一篇IE和非IE浏览器的条件注释，但只提了demo，分析的不够详尽。今天又重新研究了一下这个话题，发现下面的一篇译文对 在IE5.0/IE5.5/IE6中使用条件注释 分析得十分透彻(目前IE7 Beta对条件注释支持还不是很好，尚等待正式版的发行)：

原作地址: http://www.quirksmode.org/css/condcom.html
作者: ppk
翻译地址: http://www.surfchen.org/?p=94
翻译: surfchen

条件注释只能用于Explorer 5+ Windows(以下简称IE)。
如果你安装了多个IE，条件注释（Conditional comments）将会以最高版本的IE为标准（一般为IE 6）。
我听说（但没测试过），当在条件注释中使用了小数点，且只安装了IE5.0的时候，将会产生一个不正确的判断。 感兴趣？继续阅读 »

利用条件注释制作下拉菜单

2006年4月20日 | 作者: 牧天 | 分类: XHTML/HTML | 尚无评论

上篇文章里提到了条件注释，就是判断浏览器类型，然后定义什么浏览器下显示什么内容。
这个dropmenu（下拉菜单）模型来自 cssplay，使经过作者多次的研究和反复的测试才做出来的。我想那这个模型来实践一下条件注释的原理。
先看一个 最简单的模型

XHTML:

  1. <div class="menu">
  2.  
  3. <ul>
  4. <li><a class="drop" href="../menu/index.html">DEMOS
  5. <!--[if IE 7]><!-->
  6. </a>
  7. <!--<![endif]-->
  8. <!--IE7时显示</a>标签-->
  9. <table><tr><td>
  10.  <ul>
  11.  <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
  12.  <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
  13.  <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  14.  <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  15.  <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders</li>
  16.  <li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
  17.  <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>
  18.  <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
  19.  <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
  20.  <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
  21.  </ul>
  22. </td></tr></table>
  23.  
  24. <!--[if lte IE 6]>
  25. </a>
  26. <![endif]-->
  27. <!--IE6时显示</a>标签-->
  28. </li>
  29. </ul>
  30. </div>

感兴趣？继续阅读 »

IE 和非 IE 浏览器的条件注释

2006年4月18日 | 作者: 牧天 | 分类: XHTML/HTML | 尚无评论

下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果

  1. <!--[if IE]>
  2. <h1>您正在使用IE浏览器</h1>
  3. <![endif]-->
  4.  
  5. <!--[if IE 5]>
  6. <h1>版本 5</h1>
  7. <![endif]-->
  8.  
  9. <!--[if IE 5.0]>
  10. <h1>版本 5.0</h1>
  11. <![endif]-->
  12.  
  13. <!--[if IE 5.5]>
  14. <h1>版本 5.5</h1>
  15. <![endif]-->
  16.  
  17. <!--[if IE 6]>
  18. <h1>版本 6</h1>
  19. <![endif]-->
  20.  
  21. <!--[if IE 7]>
  22. <h1>版本 7</h1>
  23. <![endif]-->

感兴趣？继续阅读 »

关于“网页设计制作”的基础知识概要

2006年4月8日 | 作者: 牧天 | 分类: Tips, XHTML/HTML | 评论: 5

主校区Web技术宣讲会

前天晚上，6G 站员一行去新校区举办了“网页制作与网站建设”技术宣讲会。

由于新校区那边主要都是大一的新生，估计他们在网页设计制作这方面有所了解或了解较多的人很少，所以我们准备的讲座内容都是比较基础而又带有启发性的。

下面是我在讲座时的主要提纲，总结得很粗糙，而且好多需要扩展的地方都是直接讲出来或是给他们演示出来的，并没有写在这里，提纲发在这里，仅供大家做个参考！ 感兴趣？继续阅读 »

简明 HTML CSS 开发规范

2006年3月3日 | 作者: 牧天 | 分类: CSS, XHTML/HTML | 尚无评论

//总论

本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。

/基 本 要 求

1. 在网站根目录中开设images、common、temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash、avi、quick time 等多媒体文件 。
2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 感兴趣？继续阅读 »

非图片、滤镜制作的阴影窗口

2005年12月12日 | 作者: 牧天 | 分类: CSS, XHTML/HTML | 评论: 1

带阴影效果窗口最常见和方便的方法是使用滤镜，可以直接定义，但仅局限于IE环境使用。

其次是使用阴影图片做偏移背景图实现，兼容性很好。

阴影可以看作一种平滑的色阶过渡，由深到浅。于是我们可以采用多层覆盖模拟这种过度。这种方法只是在技术角度模拟出滤镜效果，纯XHTML/CSS实现，兼容IIE6和FF1.5，最终效果图：

最终效果图 感兴趣？继续阅读 »

共2页：1[2]下一页>