一个符合w3c标准（css&xhtml）的页子！_符合w3c的标准css-优快云博客

本文链接：https://blog.youkuaiyun.com/cncca/article/details/417250

博客展示了CSS文件和HTML页面代码。CSS文件对页面各部分的样式进行了详细设置，如字体、背景、布局等。HTML页面引用了该CSS文件，并使用JavaScript实现了鼠标悬停效果，同时包含多个超链接和验证链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先是css文件：

=====================================start=======================================

BODY {
MARGIN-TOP: auto; FONT-SIZE: 12px; BACKGROUND: #fff; MARGIN-BOTTOM: auto; FONT-FAMILY: arial,verdana,sans-serif; TEXT-ALIGN: center
}
#top {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; WIDTH: 766px; MARGIN-RIGHT: auto; PADDING-TOP: 0px; HEIGHT: 120px
}
#body {
MARGIN-LEFT: auto; WIDTH: 766px; MARGIN-RIGHT: auto
}
#contain {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #ccc; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 766px; PADDING-TOP: 0px; HEIGHT: 400px
}
#bottom {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; WIDTH: 766px; MARGIN-RIGHT: auto; PADDING-TOP: 0px; HEIGHT: 50px
}
#left {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #eee; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 2px 2px 2px 0px; WIDTH: 198px; PADDING-TOP: 0px; HEIGHT: 396px
}
#right {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #eee; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 2px 0px; WIDTH: 566px; PADDING-TOP: 0px; HEIGHT: 396px
}
#chanel {
FONT-SIZE: 14px; BACKGROUND: #387fd1; MARGIN-LEFT: auto; WIDTH: 766px; MARGIN-RIGHT: auto; PADDING-TOP: 5px; HEIGHT: 30px
}
.TopNavCellLink {
BORDER-RIGHT: 0px; PADDING-RIGHT: 5px; BORDER-TOP: 0px; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; BORDER-LEFT: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: 0px
}
.TopNavCellLinkHover {
BORDER-RIGHT: #84bfe9 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #84bfe9 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 2px; BORDER-LEFT: #84bfe9 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #84bfe9 1px solid; BACKGROUND-COLOR: #0074bf
}
A {
COLOR: #ffffff; TEXT-DECORATION: none
}
====================================end=================================

html页面(default.htm)

===================================start=================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<title>无标题文档</title>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<link href="default_files/css.css" type=text/css rel=stylesheet>
<script type="text/javascript">
function SetTopNavSiteMapLinkBorder(strTdId, fIsHover)
{
if (!document.getElementById ||
'undefined' == typeof(document.getElementById))
return;

var tdCell = document.getElementById(strTdId);
if ('undefined' == typeof(tdCell) ||
null == tdCell ||
'undefined' == typeof(tdCell.className))
return;

if (fIsHover)
tdCell.className = 'TopNavCellLinkHover';
else
tdCell.className = 'TopNavCellLink';
}
</script>
<DIV id=top>此处显示 id "top" 的内容</DIV>
<DIV id=chanel><a class=TopNavCellLink id=link
οnmοuseοver="javascript:SetTopNavSiteMapLinkBorder('link', true);"
οnmοuseοut="javascript:SetTopNavSiteMapLinkBorder('link', false);"
href="http://localhost/QuickStart/default.aspx#">WEB 标准</a> <FONT
color="#84bfe9">|</FONT> <a class=TopNavCellLink id=link2
οnmοuseοver="javascript:SetTopNavSiteMapLinkBorder('link2', true);"
οnmοuseοut="javascript:SetTopNavSiteMapLinkBorder('link2', false);"
href="http://localhost/QuickStart/default.aspx#">WEB 开发</a></DIV>
<DIV id=body>
<DIV id=contain>
<DIV id=left>此处显示 id "left" 的内容 <a id=HyperLink1 style="WIDTH: 150px"
href="http://localhost/QuickStart/default.aspx?page=1">连接</a> <SPAN id=Label1
style="WIDTH: 149px"></SPAN></DIV>
<DIV id=right>此处显示 id "right" 的内容</DIV></DIV></DIV>
<DIV id=bottom>
<p><a
href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.agoodidea.com.cn/QuickStart/default.htm"
target=_blank><IMG class=logo alt="Valid CSS!" src="default_files/vcss.gif">
</a><a
href="http://validator.w3.org/check?uri=http://www.agoodidea.com.cn/QuickStart/default.htm"
target=_blank><IMG class=logo alt="Valid XHTML 1.0!"
src="default_files/valid-xhtml10"></a> </p></DIV></html>