请问如下下代码如果不要CSS放在前面，把每句的需要代码放在具体的哪一段，就是用style=""这种模式，下面这段代码怎么改，新人不懂，谢谢高手指点
- CSS code
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;
}
body {
margin:10px;
font-size: 13px;
}
a:link {
color: #666;
text-decoration: none;/*去除链接下划线*/
}
a:visited {
color: #666;
text-decoration: none;
}
a:hover {
color: #1E90FF;
}
h3 {
color: #FFF;
background-color: #1E90FF;
width: 100px;
padding-top:3px;
text-align:center;
}
ul {
width: 300px;
border-top: 1px solid #1E90FF;/*使其上边有一线条，与标题h3吻合*/
}
ul li {
padding:5px;
border-bottom: 1px solid #CCC;
list-style:none;/*去除列表样式，这对于标准浏览很重要*/
color: #1E90FF;
}
a {
position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/
display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
}
a div {
display: none;/*初始化信息面板不显示*/
}
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只给出宽度，高让它随内容多少自动调整*/
left:150px;/*这是相对父级A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/
}
a img {
width:80px;
height:130px;
border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/
display:block;
position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/
left:5px;
}
dl {
width: 160px;
float:right;
color: #999;
line-height:20px;
}
dl dd span {
font-weight: bold;
color: #1E90FF;
}
-->
</style>
</head>
<body>
<h3>最新记录片</h3>
<ul>
<li><a href="http://www.KanCBA.Com" target="_blank">[军事天地] 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />
<dl>
<dd><span>类别:</span>军事天地</dd>
<dd><span>地区:</span>欧美</dd>
<dd><span>时长:</span>十集600分钟</dd>
<dd><span>年份:</span>1992</dd>
<dd><span>简介:</span>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三</dd>
</dl></div>
</a></li>
<li><a href="http://www.KanCBA.Com" target="_blank">[瑰丽自然] 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />
<dl>
<dd><span>类别:</span>军事天地</dd>
<dd><span>地区:</span>欧美</dd>
<dd><span>时长:</span>十集600分钟</dd>
<dd><span>年份:</span>1992</dd>
<dd><span>简介:</span>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三</dd>
</dl></div></a></li>
<li><a href="http://www.KanCBA.Com" target="_blank">[人文历史] 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />
<dl>
<dd><span>类别:</span>军事天地</dd>
<dd><span>地区:</span>欧美</dd>
<dd><span>时长:</span>十集600分钟</dd>
<dd><span>年份:</span>1992</dd>
<dd><span>简介:</span>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三</dd>
</dl></div></a></li>
<li><a href="http://www.KanCBA.Com" target="_blank">[地理探险] 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />
<dl>
<dd><span>类别:</span>军事天地</dd>
<dd><span>地区:</span>欧美</dd>
<dd><span>时长:</span>十集600分钟</dd>
<dd><span>年份:</span>1992</dd>
<dd><span>简介:</span>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三</dd>
</dl></div></a></li>
<li><a href="http://www.KanCBA.Com" target="_blank">[神秘未知] 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />
<dl>
<dd><span>类别:</span>军事天地</dd>
<dd><span>地区:</span>欧美</dd>
<dd><span>时长:</span>十集600分钟</dd>
<dd><span>年份:</span>1992</dd>
<dd><span>简介:</span>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三</dd>
</dl></div></a></li>
<li><a href="http://www.KanCBA.Com" target="_blank">[专题热点] 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />
<dl>
<dd><span>类别:</span>军事天地</dd>
<dd><span>地区:</span>欧美</dd>
<dd><span>时长:</span>十集600分钟</dd>
<dd><span>年份:</span>1992</dd>
<dd><span>简介:</span>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三</dd>
</dl></div></a></li>
<li><a href="http://www.KanCBA.Com" target="_blank">一二三四五六七八九十一二三四五六七八九十一二<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />
<dl>
<dd><span>类别:</span>军事天地</dd>
<dd><span>地区:</span>欧美</dd>
<dd><span>时长:</span>十集600分钟</dd>
<dd><span>年份:</span>1992</dd>
<dd><span>简介:</span>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三</dd>
</dl></div></a></li>
</ul>
