如何使用CSS来进行网页排版

<liid="nine"><atitle="常见问题"href="http://www.w3cn.org/faq.html">常见问题</a></li>

</ul>

</div>

样式表代码

以下是引用片段：

#submenu{

MARGIN:0px8px0px8px;

PADDING:4px0px0px0px;

BORDER:#fff1pxsolid;

BACKGROUND:#dfdfdf;

COLOR:#666;

HEIGHT:25px;}

#submenuul{

CLEAR:left;

MARGIN:0px;

PADDING:0px;

BORDER:0px;

LIST-STYLE-TYPE:none;

TEXT-ALIGN:center;

DISPLAY:inline;

}

#submenuli{

FLOAT:left;

DISPLAY:block;

MARGIN:0px;

PADDING:0px;

TEXT-ALIGN:center}

#submenulia{

DISPLAY:block;

PADDING:2px3px2px3px;

BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;

FONT-WEIGHT:bold;

WIDTH:100%;

COLOR:#444;

TEXT-DECORATION:none;

}

#submenulia:hover{

BACKGROUND:url(images/icon_dot_lmenu2.gif)#C61C18no-repeat2px8px;

COLOR:#fff;}

#submenuulli#oneA{WIDTH:60px}

#submenuulli#twoA{WIDTH:80px}

#submenuulli#threeA{WIDTH:80px}

#submenuulli#fourA{WIDTH:90px}

#submenuulli#fiveA{WIDTH:80px}

#submenuulli#sixA{WIDTH:80px}

#submenuulli#sevenA{WIDTH:60px}

#submenuulli#eightA{WIDTH:90px}

#submenuulli#nineA{WIDTH:80px}

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

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