html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> 裤裤音乐</title>
<link href="style/css7-4.css" rel="stylesheet" type="text/css"/>
<link href="style/div7-4.css" rel="stylesheet" type="text/css"/>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
let d = document;
if (d.images) {
if (!d.MM_p) d.MM_p = new Array();
let i, j = d.MM_p.length, a = MM_preloadImages.arguments;
for (i = 0; i < a.length; i++)
if (a[i].indexOf("#") != 0) {
d.MM_p[j] = new Image;
d.MM_p[j++].src = a[i];
}
}
}
</script>
</style>
</head>
<body>
<div id="box">
<div id="top">
<div id="top01">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="638" height="52">
<param name="movie" value="images/mune.swf"/>
<param name="quality" value="high"/>
<param name="wmode" value="transparent"/>
<param name="swfversion" value="8.0.35.0"/>
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->
<param name="expressinstall" value="../Scripts/expressInstall.swf"/>
<!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/mune.swf" width="638" height="52">
<!--<![endif]-->
<param name="quality" value="high"/>
<param name="wmode" value="transparent"/>
<param name="swfversion" value="8.0.35.0"/>
<param name="expressinstall" value="../Scripts/expressInstall.swf"/>
<!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
<div>
<h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="获取 Adobe Flash Player"/></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="top02">
<input name="button" type="image" id="button" src="images/7302.gif"/>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="Search" id="Search"/>
</label>
</form>
</div>
</div>
<div id="top2">
<form id="form2" name="form2" method="post" action="">
<label>
<input type="text" name="name" id="name"/>
</label>
<label>
<input type="password" name="pass" id="pass"/>
</label>
<input type="image" name="login" id="login" src="images/7304.gif"/>
<input name="check" type="checkbox" class="checkbox" id="check"/>
记住密码 <span>账号/密码找回</span> <span>会员注册</span>
</form>
</div>
<div id="main">
<div id="main-left">
<div id="main-left01">
<dl>
<dt class="font01">烟火</dt>
<dd><img src="images/icon.gif" width="10" height="11"/></dd>
<dt>二人同行</dt>
<dd><img src="images/icon (1).gif" width="10" height="11"/></dd>
<dt>男人de泪</dt>
<dd><img src="images/icon (1).gif" width="10" height="11"/></dd>
<dt>爱上你</dt>
<dd><img src="images/icon (1).gif" width="10" height="11"/></dd>
<dt>带我离开</dt>
<dd><img src="images/icon (1).gif" width="10" height="11"/></dd>
<dt>带着爱</dt>
<dd><img src="images/icon (1).gif" width="10" height="11"/></dd>
<dt>爱就对了</dt>
<dd><img src="images/icon (1).gif" width="10" height="11"/></dd>
<dt>原来你也在这</dt>
<dd><img src="images/icon (1).gif" width="10" height="11"/></dd>
<dt>你是你的</dt>
<dd><img src="images/icon (1).gif" width="10" height="11"/></dd>
</dl>
</div>
<div id="main-left02">
<ul>
<li>温柔抒情歌曲</li>
<li>浪漫爱情歌曲</li>
<li>摇滚嘻哈歌曲</li>
<li>DJ舞曲</li>
</ul>
</div>
<div id="main-left03"><img src="images/7339.jpg" width="150" height="52"/><img src="images/7340.jpg"
width="150" height="184"/>
</div>
</div>
<div id="main-main">
<div id="main-main01">
<div id="tw01"><img src="images/7308.jpg" width="70" height="70"/><br/>
H型逻辑<br/>
<span class="font01">李晓莉</span></div>
<div id="tw02"><img src="images/7309.jpg" width="70" height="70"/><br/>
印伦情人<br/>
<span class="font01">旺夫</span></div>
<div id="tw03"><img src="images/7310.jpg" width="70" height="70"/><br/>
电脑房间<br/>
<span class="font01">樊岐</span></div>
<div id="tw04"><img src="images/7311.jpg" width="70" height="70"/><br/>
爱情函数<br/>
<span class="font01">风格</span></div>
<div id="tw05"><img src="images/7312.jpg" width="70" height="70"/><br/>
寂寞在唱歌<br/>
<span class="font01">阿飒</span></div>
<div id="tw06"><img src="images/7313.jpg" width="70" height="70"/><br/>
恋爱2010<br/>
<span class="font01">李晓莉</span></div>
<div id="tw07"><img src="images/7314.jpg" width="70" height="70"/><br/>
Hig歌精选集<br/>
<span class="font01">欧美群星</span></div>
<div id="tw08"><img src="images/7315.jpg" width="70" height="70"/><br/>
微微发光<br/>
<span class="font01">陈慧</span></div>
<div id="tw09">
<p><img src="images/7316.jpg" width="70" height="70"/></p>
<p>美丽的神话<br/>
<span class="font01">成善</span></p>
</div>
<div id="tw10"><img src="images/7317.jpg" width="70" height="70"/><br/>
光荣岁月<br/>
<span class="font01">BOO</span></div>
<div id="tw11">
<p><img src="images/7318.jpg" width="70" height="70"/><br/>
少女时代<br/>
<span class="font01">jion</span></p>
</div>
<div id="tw12"><img src="images/7319.jpg" width="70" height="70"/><br/>
世界感官<br/>
<span class="font01">旺旺</span></div>
</div>
<div id="main-main02">
<dl>
<dt><img src="images/7327.gif" width="13" height="12"/></dt>
<dd>我相信(勇敢爱国际特别版)</dd>
<dd>专辑《我相信》</dd>
<dd>张祝鱼</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7328.gif" width="13" height="12"/></dt>
<dd class="left">Apologize (Single)</dd>
<dd>专辑《i now》</dd>
<dd>Glay</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7329.gif" width="13" height="12"/></dt>
<dd>爱上了寂寞(EP)</dd>
<dd>专辑《yes yesterday》</dd>
<dd>浩瀚</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7330.gif" width="13" height="12"/></dt>
<dd>最美好的愿望</dd>
<dd>专辑《苦涩咖啡》</dd>
<dd>刘婉莹</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7331.gif" width="13" height="12"/></dt>
<dd>唱的是寂寞</dd>
<dd>专辑《脉动》</dd>
<dd>李明远</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7332.gif" width="13" height="12"/></dt>
<dd>兔子快跑</dd>
<dd>专辑《哲理》</dd>
<dd>依稀</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7333.gif" width="13" height="12"/></dt>
<dd>黑色华尔兹(EP)</dd>
<dd>专辑《半拍的音符》</dd>
<dd>高挑</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7334.gif" width="13" height="12"/></dt>
<dd>Secret Lover(单曲)</dd>
<dd>专辑《爱情》</dd>
<dd>K行堂</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7335.gif" width="13" height="12"/></dt>
<dd>恋爱2010</dd>
<dd>专辑《喜不喜欢》</dd>
<dd>徐伟</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7336.gif" width="13" height="12"/></dt>
<dd>检察官公主O.S.T</dd>
<dd>专辑《做回自己》</dd>
<dd>shisee</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7337.gif" width="13" height="12"/></dt>
<dd>你的背影</dd>
<dd>专辑《离别》</dd>
<dd>宋汶</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
<dt><img src="images/7338.gif" width="13" height="12"/></dt>
<dd>你心中的那个人</dd>
<dd>专辑《印象派》</dd>
<dd>厉娜</dd>
<dd><img src="images/7321.gif" width="18" height="18"/><img src="images/7324.gif" width="18"
height="18"/><img src="images/7322.gif"
width="18"
height="18"/><img
src="images/7325.gif" width="25" height="18"/><img src="images/7323.gif" width="18"
height="18"/></dd>
</dl>
</div>
</div>
<div id="main-right"><img src="images/7326.jpg" width="140" height="450"/></div>
<div id="ad"><img src="images/7341.gif" width="960" height="60"/></div>
</div>
<div id="bottom">
关于站点<span>│</span>联系本站<span>│</span>错误报告<span>│</span>帮助信息<span>│</span>收藏本站<span>│</span>设为首页<span>│</span>推荐你30首听<br/>
copyright(c)2009-2021 yang-hong. ALL rights reserved.<br/>
京ICP备050080号<span>│</span>托普朗宁(北京)教育科技有限公司<span>│</span>精准投放支持
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
-->
</script>
</body>
</html>
css7-4.css 样式文件代码:
@charset "utf-8";
* {
border: 0px;
margin: 0px;
padding: 0px;
}
body{
font-family: 宋体;
font-size: 12px;
color:#666666;
}
.font01 {
color:#ff6700;
}
div7-4.css样式代码:
@charset "utf-8";
#box {
width: 964px;
height: 950px;
margin: auto;
}
#top {
width: 964px;
height: 60px;
padding-top: 20px;
background-image: url(../images/7301.png);
background-repeat: no-repeat;
background-position: 0px center;
}
#top01 {
width: 638px;
height: 52px;
float: left;
margin-left: 94px;
}
#top02 {
width: 210px;
height: 23px;
margin: 20px 0px 0px 22px;
float: left;
}
#Search {
width: 165px;
height: 21px;
line-height: 21px;
border-top: #8c8c8c solid 1px;
border-left: #8c8c8c solid 1px;
border-bottom: #d3d3d3 solid 1px;
border-right: #d3d3d3 solid 1px;
background-color: #f7f7f7;
float: left;
}
#button {
float: right;
}
#top2 {
width: 951px;
height: 26px;
background-image: url(../images/7303.gif);
background-repeat: no-repeat;
padding: 6px 0px 0px 13px;
color: #CCC;
font-size: 12px;
line-height: 20px;
}
#name, #pass {
width: 113px;
height: 18px;
float: left;
border: #38332e solid 1px;
margin-left: 5px;
}
#login {
float: left;
margin-left: 5px;
margin-right: 12px;
}
#top2 span {
margin-left: 15px;
}
#check {
vertical-align: middle;
}
#main {
width: 964px;
height: 745px;
margin-top: 10px;
}
#main-left {
width: 150px;
height: 636px;
float: left;
}
#main-left01 {
width: 130px;
height: 199px;
background-image: url(../images/7305.jpg);
background-repeat: no-repeat;
padding: 50px 0px 0px 20px;
}
#main-left01 dt {
width: 100px;
height: 20px;
line-height: 18px;
border-bottom: #ccc dashed 1px;
float: left;
}
#main-left01 dd {
width: 15px;
height: 16px;
float: left;
border-bottom: #CCC dashed 1px;
padding-top: 4px;
}
#main-left02 {
width: 135px;
height: 95px;
margin-top: 4px;
background-image: url(../images/7306.jpg);
background-repeat: no-repeat;
padding: 32px 0px 0px 15px;
}
#main-left02 li {
width: 105px;
line-height: 16px;
margin: 5px 0px 0px 12px;
}
#main-left03 {
width: 150px;
height: 256px;
}
#main-left03 img {
margin-top: 10px;
}
#main-main {
width: 655px;
height: 685px;
margin-left: 10px;
background-image: url(../images/7307.jpg);
background-repeat: no-repeat;
float: left;
}
#main-main01 {
width: 623px;
height: 263px;
padding: 50px 0px 0px 32px;
background-image: url(../images/7307.jpg);
background-repeat: no-repeat;
}
#tw01, #tw02, #tw03, #tw04, #tw05, #tw06, #tw07, #tw08, #tw09, #tw10, #tw11, #tw12 {
width: 82px;
height: 110px;
float: left;
margin: 0px 20px 20px 0px;
text-align: center;
line-height: 18px;
}
#tw01 img,#tw02 img,#tw03 img,#tw04 img,#tw05 img,#tw06 img,#tw07 img,#tw08 img,#tw09 img,#tw10 img,#tw11 img,#tw12 img {
border:#e4e4e4 solid 2px;
}
#main-main02 {
width:655px;
height:330px;
margin-top:12px;
padding-top:30px;
background-image:url(../images/7320.gif);
background-repeat:no-repeat;
}
#main-main02 dt {
width:18px;
height:18px;
float:left;
padding-top:3px;
margin:4px 0px 0px 5px;
border-bottom:#CCC dashed 1px;
}
#main-main02 dd {
width:156px;
height:21px;
line-height:18px;
float:left;
border-bottom:#CCC dashed 1px;
margin-top:4px;
}
#main-main02 dd img {
margin:0px 5px 0px 5px;
}
#main-right {
width:140px;
height:685px;
margin-left:9px;
float:left;
}
#main-right img{
margin-bottom:5px;
}
#ad {
width:960px;
height:60px;
margin-left:2px;
float:left;
}
#bottom {
width:964px;
height:73px;
text-align:center;
line-height:20px;
padding-top:10px;
}
#bottom span {
margin:0px 3px 0px 3px;
}
效果图: