作者：彭飞 网名：roc大鹏展翅 BLOG:http://blog.csdn.net/tcrazyalways/
昨天，拼了，不去考四级了，为了研究XHTM+CSS标准网站的制作，小改了一下给老师做的课堂的一个小部分，代码如下，嘿嘿，很辛苦，不过回过头来一看，其实也很简单，WEB标准确实减少了冗繁的代码，相对于以往的普通网站，XHTM+CSS过渡型的标准制作，将表现，框架和行为相分离，确实很明了，建议观看：http://www.w3cn.org，很不错的一个网站哦。以下代码均已通过W3C测试，符合标准。
course.html代码：
<!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" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="author" content="彭飞,tcrazyalways(at)mail.csdn.net" />
<meta name="copyright" content="徐明,彭飞" />
<meta name="description" content="徐明老师电视摄像网络课堂之精彩课堂篇" />
<meta name="keywords" content="电视画面基础,电视摄像造型元素,固定画面,运动摄像技巧,光学镜头及其应用,电视画面调度,电视记者素质" />
<link rel="stylesheet" href="sty.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>电视摄像网络课程——精彩课堂</title>
</head>
<body id="xmkt">
<!--logo条-->
<div id="up">
<img src="images/logo.jpg" alt="logo条" width="1024" height="30" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="840, 7, 873, 25" href="../index.htm" alt="索引" />
<area shape="rect" coords="892, 6, 943, 26" href="../index.htm" alt="索引" />
</map>
</div>
<!--Flash菜单栏-->
<div id="left">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="400">
<param name="movie" value="images/test.swf" />
<param name="quality" value="high" />
</object>
</div>
<!--站内导航-->
<div id="rightup">
站内导航
</div>
<div id="right">
<form name="form1" method="post" action="">
<select name="select" size="1" >
<option style="color: #C0C0C0;">课堂介绍(Intro)</option>
<option style="color: #C0C0C0;">视频欣赏(Video)</option>
<option style="color: #C0C0C0;">电子文档(Document)</option>
<option style="color: #C0C0C0;">疑难问答(FAQ)</option>
<option style="color: #C0C0C0;">影视社区(Forum)</option>
</select>
</form>
</div>
<!--知识要点-->
<div id="dleft">
</div>
<div id="dmid">
</div>
<div id="dright">
<ul>
<li><a href="#">(2004.11.27)网站正在建设中</a></li>
<li><a href="#">(2004.11.27)网站正在建设中</a></li>
<li><a href="#">(2004.11.27)网站正在建设中</a></li>
<li><a href="#">(2004.11.27)网站正在建设中</a></li>
</ul>
</div>
<div id="bot">
</div>
<div id="rzs">
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" />
</a>
</div>
<div id="rz">
<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>
</div>
</body>
</html>
sty.css代码：
#xmkt {
MARGIN: 0px;
PADDING: 0px;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
/*定义上栏*/
#up {
MARGIN: 0px;
WIDTH: 1024px;
MARGIN: 0px;
PADDING: 0px;
}
/*定义左栏*/
#left {
MARGIN: 0px;
WIDTH: 760px;
MARGIN: 0px;
PADDING: 0px;
}
/*定义右上栏*/
#rightup {
POSITION: absolute;
text-align: center;
TOP: 90px;
LEFT: 760px;
height: 70px;
WIDTH: 264px;
MARGIN: 0px;
PADDING: 0px;
font-size: 12pt;
font-weight: bold;
color: #999999;
}
/*定义右下栏*/
#right {
POSITION: absolute;
text-align : center;
TOP: 130px;
LEFT: 760px;
HEIGHT: 30px;
WIDTH: 264px;
MARGIN: 0px;
PADDING: 0px;
}
/*定义下左栏*/
#dleft {
MARGIN: 0px;
WIDTH: 21px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(images/tiao1.gif) no-repeat top;
}
/*定义下中栏*/
#dmid {
POSITION: absolute;
TOP: 400px;
LEFT: 21px;
MARGIN: 0px;
WIDTH: 1px;
height: 250px;
PADDING: 0px;
BACKGROUND: url(images/dot_line01.gif) repeat-y;
}
/*定义下右栏*/
#dright {
POSITION: absolute;
Top: 440px;
LEFT: 22px;
WIDTH: 738px;
height: 250px;
PADDING: 0px;
BACKGROUND: url(images/tu.jpg) no-repeat top 30px;
}
#dright ul {
POSITION: absolute;
Top: 60px;
LEFT: 22px;
MARGIN: 0px;
PADDING: 0px;
}
#dright li {BACKGROUND: url(images/new.gif) no-repeat left 0px;}
#dright li a{left: 10px;}
/*定义底栏*/
#bot {
POSITION: absolute;
Top: 660px;
WIDTH: 1024px;
HEIGHT: 30px;
BACKGROUND: url(images/bg.jpg) no-repeat;
}
#rzs {
POSITION: absolute;
Top: 690px;
HEIGHT: 31px;
WIDTH: 88px
}
#rz {
POSITION: absolute;
TOP:690px;
LEFT: 90px;
HEIGHT: 31px;
WIDTH: 88px
}
style.css代码：
A:link { text-decoration:none; font-size:9pt; color:#999999}
A:visited { text-decoration:none; font-size:9pt; color:#999999}
A:hover { text-decoration:none; font-size:9pt; color:#499300}
A:active { text-decoration:none; font-size:9pt; Color:#999999}
|
本类阅读TOP10