提示：请使用 span来组合行内元素，以便通过样式来格式化它们。注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。可以对同一个 span 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。提示：事实上，您也许已经注意到了，W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，但是我们的做法是：使用“提示”使用span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。
<html>
<head>
<style type=text/css>
body {font:15px 微软雅黑;
margin:0px auto;
text-align:center;
}
#container {width:100%;
margin:auto;}
#tabs {position:relative;
float:right;
width:100%;
font-size:93%;
border-bottom:1px solid #F45551;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li { display:inline;
margin:0;
padding:0;
}
#tabs a {float:left;
background:url(tableft9.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {float:left;
display:block;
background:url("tabright9.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
#Header {width:800px;
margin:0 auto;
height:100px;
padding: 20px;
}
#Main {text-align:left;
width:800px;
margin:-70 auto;
height:600px;
}
#Footer {width:800px;
margin:10 auto;
height:50px;
clear:both;
background:#00FFFF
}
#side { float: left;
width: 10em;
background: ;
padding: 15px 25px;
}
.sidetext {padding:10;
color:black;
}
h2 {font:2em 幼圆;
}
td {color:navy;
padding:15px;
height:200px;
border:1px solid white;
}
#film {font:.8em;
color:black;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="tabs">
<ul>
<li><a href="#" title="菜单1"><span>菜单1</span></a></li>
<li><a href="#" title="菜单2"><span>菜单2</span></a></li>
<li><a href="#" title="菜单3"><span>菜单3</span></a></li>
<li><a href="#" title="菜单4"><span>菜单4</span></a></li>
<li><a href="#" title="菜单5"><span>花样年华</span></a></li>
<li><a href="#" title="菜单6"><span>博客</span></a></li>
<li><a href="#" title="菜单7"><span>联系我们</span></a></li>
</ul>
</div>
</div>
<div id="Main">
<div id="Side">
<div class="sidetext">
<h2>标题1</h2>
<p>文本内容
<h2>标题2</h2>
<p>文本内容
<h2>标题3</h2>
<p>文本内容
</div>
</div>
<table>
<tr>
<td id="film"><img src="图片/1.jpg" ><p>肖申克的救赎
<td>剧情介绍: <span id="film"> 阿瑞1927年因谋杀罪被判无期徙刑，数次假释都未获成功。年轻的银行家因被判决谋杀自己的妻子罪名成立，被送往美国的肖申克监狱终身监禁。他外表看似懦弱，但内心坚定，从进监狱的那天开始就决定一定要离开这里。 他在监狱里遇见了因失手杀人被判终身监禁的摩根·费曼，两人很快成为好友。肖申克监狱是当时最黑暗的监狱，点狱长利用罪犯做苦役，为自己捞了不少好处。 面对这样的环境，他没有自甘堕落，他办监狱图书室，为囚犯播放美妙的音乐，还利用自己的知识帮助大家打点自己的财务。典狱长很快的发现了他的特长，让他帮助自己清洗黑钱做假帐。 在监狱的黑暗生活里，他从未放弃过对自由、对美好生活的追求,他要用自己的实际行动来实现对自己的救赎！ ...
</tr>
<tr>
<td id="film"><img src="图片/2.jpg"><p>教父1
<td>剧情介绍: <span id="film"> 1945年夏天，美国本部黑手党科莱昂家族首领，“教父”维托·唐·科莱昂为小女儿康妮举行了盛大的婚 礼。“教父”有三个儿子：好色的长子逊尼，懦弱的次子弗雷德和刚从二战战场回来的小儿子迈克。其中逊尼是“教父”的得力助手；而迈克虽然精明能干，却对家 族的“事业”没什么兴趣。“教父”是黑手党首领，常干违法的构当。但同时他也是许多弱小平民的保护神，深得人们爱戴。他还有 一个准则就是决不贩毒害人。为此他拒绝了毒枭素洛佐的要求，并因此激化了与纽约其它几个黑手党家族的矛盾。 圣诞前夕，素洛佐劫持了“教父”的大女婿汤姆， 并派人暗杀“教父”。“教父”中枪入院。素洛佐要汤姆设法使逊尼同意毒品买卖，重新谈判。逊尼有勇无谋，他发誓报仇，却无计可施。...
</tr>
<tr>
<td id="film"><img src="图片/3.jpg"><p>教父2
<td>剧情介绍: <span id="film"> 在西西里，少年时代的维托为报父仇，袭击了当地黑手党首领唐·乔奇。在母亲的掩护下，维托得以逃脱，并来到了美国。这已经是1901年的事了，第二代教父回忆起父亲的青年时代，不由得深深感到了创业的艰辛。迈克和妻子凯为儿子托尼举行了圣餐仪式和庆祝活动。但就在当夜，迈克遭到了袭击，凯受了伤。面对接管家族后所遇到的种种困难，迈克又回忆起了父亲唐·维托到美国后的“奋斗”历程。迈克尔一步步进行着复仇。同时他也在不断拓展家族的势力。通过与吉尔参议员勾心斗角的明争暗斗，迈克尔终于又控制住了一家大饭店，并开展了赌博生意。就在迈克尔扩大家族的势力时，大革命的爆发却使他的计划受到了严重的挫折...
</tr>
<tr>
<td id="film"><img src="图片/4.jpg"><p>教父2
<td>剧情介绍: <span id="film"> 在警长戈登和地区检察官哈维·丹特的协助下，蝙蝠侠惩恶锄奸的行动越来越顺风顺水，他甚至决定要将穷街陋巷中残余的党匪一网打尽。三人联手打击犯罪成效不菲，高谭市渐渐回复了昔日的平静。甚至有人开始假伴成蝙蝠侠来惩治罪犯。在稻草人又一次被擒获，黑帮的洗钱工具劳在香港被蝙蝠侠缉拿，黑帮500多人一次性被起诉后，歌潭的未来一片光明。然而小丑的出现，给歌潭蒙上了阴影。他炸死女法官，毒死局长，又在全城哀悼，市长讲话之时射击市长，幸亏戈等警官相救，市长才幸免于难。小丑抓住了那些假伴成蝙蝠侠的人，并加以迫害，像全城宣布，除非蝙蝠侠摘下面具像警察自首，否则每天都有人死。哈维 丹特为了歌潭，宣称自己是蝙蝠侠...
</table>
</div>
</div>
<hr width="700">
<div id="Footer"><p>© 2008-10-23 </div>
</div>
</body>
Processed:
0.023, SQL:
9
