慕课网上学习web前端
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>20160111</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{width:910px;margin:0 auto;}
#header{width:100%;overflow:hidden;}
.logo{width:100%;margin-top:5px;}
.logo h1{float:left;background:url(images/logo.gif) no-repeat;width:217px;height:63px;text-indent:-9999px;cursor:pointer;}
.logo dl{float:right;margin-top:10px;}
.logo dt{font-weight:bold;line-height:26px;}
.logo dd{font-size:12px;line-height:24px;}
#nav{width:100%;margin-top:8px;background:url(images/navbg.gif) no-repeat;height:36px;overflow:hidden;}
#nav ul{width:94%;margin:0 auto; }
#nav li{float:left;font-weight:bold;line-height:34px;margin: 0 20px;list-style:none; }
#nav li a{color:#FFF;text-decoration:none;}
#nav li a:hover{ }
#nav li.current{background:url(images/home.gif) 0 4px no-repeat;width:88px;text-align:center;display:inline;}
#nav li.current a{color:#000; }
#nav li.qq_lab{float:right;background:url(images/arrow_r.gif) 0 8px no-repeat;padding-left:30px;}
#mainbody{width:100%;overflow:hidden;}
.content{float:left;width:600px;}
h2{line-height:28px;border-bottom:1px solid #9CF;margin-bottom:10px;margin-top:5px;font-size:16px;}
h2 a{color:#069;text-decoration:none;font-size:18px;}
h2 a:hover{text-decoration:underline;}
h2 span{float:right;}
h2 span a{font-size:12px;color:#069;}
.softwarelist li{overflow:hidden;margin-bottom:25px;list-style:none;}
.softwarelist li dl{padding-left:45px;float:left;}
.softwarelist li span{float:right;background:url(images/downicon.gif)0 4px no-repeat;padding-left:20px;font-size:12px;}
.softwarelist li span a{text-decoration:underline;color:#069;}
.softwarelist li span a:hover{text-decoration:none;}
.softwarelist li dt{font-size:12px;color:#666;}
.softwarelist li dt a{font-size:16px;font-weight:bold;color:#069;margin-right:10px;}
.softwarelist li dt a:hover{text-decoration:none;}
.softwarelist li dd{font-size:14px;margin-top:8px;}
.new{background:url(images/new.gif) right 4px no-repeat;padding-right:20px;}
.software_1{background:url(images/icon_1.gif) no-repeat;}
.software_2{background:url(images/icon_2.gif) no-repeat;}
.software_3{background:url(images/icon_3.gif) no-repeat;}
.software_4{background:url(images/icon_4.gif) no-repeat;}
.software_5{background:url(images/icon_5.gif) no-repeat;}
.software_6{background:url(images/icon_6.gif) no-repeat;}
.sidebar{float:right;width:280px;margin-left:10px;}
.sidebar li a{font-size:12px;}
.box{width:100%;overflow:hidden;}
.newlist li{margin-bottom:4px;overflow:hidden;}
.newlist li a{color:#069;font-size:12px;text-decoration:none;}
.newlist li a:hover{text-decoration:underline;}
.down_1{background:url(images/soft_r_1.gif) no-repeat;font-size:14px;margin-bottom:10px;}
.down_2{background:url(images/soft_r_2.gif) no-repeat;font-size:14px;margin-bottom:10px;}
.down_3{background:url(images/soft_r_3.gif) no-repeat;font-size:14px;margin-bottom:10px;}
.down_4{background:url(images/soft_r_4.gif) no-repeat;font-size:14px;margin-bottom:10px;}
.down_5{background:url(images/soft_r_5.gif) no-repeat;font-size:14px;margin-bottom:10px;}
.down_6{background:url(images/soft_r_6.gif) no-repeat;font-size:14px;margin-bottom:10px;}
.downlist li{line-height:20px;overflow:hidden;}
.downlist li a{margin-left:30px;color:#069;text-decoration:none;float:left;}
.downlist li a:hover{text-decoration:underline;}
.downlist li span a{float:right;text-decoration:underline;}
.downlist li span a:hover{text-decoration:none;}
.downlist li span{background:url(images/downicon.gif) no-repeat;}
.fir_link{margin-left:10px;overflow:hidden;}
.fir_link a{text-decoration:none;font-size:14px;color:#069;float:left;width:90px;line-height:40px;}
.fir_link a:hover{text-decoration:underline;}
#footer{width:100%;overflow:hidden;background:#FFC;border-top:1px solid #9CF;}
#footer li{margin-top:10px;text-align:center;font-size:12px;color:#666;line-height:20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">
<h1><a href="#">腾讯软件中心</a></h1>
<dl>
<dt>腾讯软件中心，腾讯精品软件展示平台</dt>
<dd>我们会不断提升产品的性能和体验，为您提供最好用的软件！</dd>
</dl>
</div>
<div id="nav">
<ul>
<li class="current"><a href="#">首页</a></li>
<li><a href="#">PC产品大全</a></li>
<li><a href="#">Mac产品大全</a></li>
<li><a href="#">无线产品大全</a></li>
<li><a href="#">企业产品大全</a></li>
<li class="qq_lab"><a href="#">QQ实验室</a></li>
</ul>
</div>
</div>
<div id="mainbody">
<div class="content">
<img src="images/banner.png" width="600" height="200" alt="图片下载失败"/>
<div class="box">
<h2><a href="#">腾讯软件</a><span><a href="#">更多>></a></span></h2>
<ul class="softwarelist">
<li>
<dl class="software_1">
<dt><a href="#">QQ 5.2</a>更新日期：2014-03-17</dt>
<dd>免费的即时通讯平台，带来更多沟通乐趣</dd>
</dl>
<span><a href="#">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="software_2">
<dt><a href="#" class="new">腾讯电脑管家</a>更新日期：2014-01-15</dt>
<dd>专业的免费杀毒软件，全面便捷管理电脑</dd>
</dl>
<span><a href="#">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="software_3">
<dt><a href="#">软件管理</a>更新日期：2014-03-19</dt>
<dd>下载软件，就用软件管理</dd>
</dl>
<span><a href="#">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="software_4">
<dt><a href="#" class="new">QQ音乐2014贺岁版</a>更新日期：2014-01-24</dt>
<dd>全新界面设计，视野更开阔，操作更简单</dd>
</dl>
<span><a href="#">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="software_5">
<dt><a href="#">QQ浏览器</a>更新日期：2014-03-13</dt>
<dd>全新设计，简约轻快，精巧易用</dd>
</dl>
<span><a href="#">下载</a>|<a href="#">官方网站</a></span>
</li>
<li>
<dl class="software_6">
<dt><a href="#">QQ影像</a>更新日期：2013-01-24</dt>
<dd>管理、浏览、编辑、上传一站体验</dd>
</dl>
<span><a href="#">下载</a>|<a href="#">官方网站</a></span>
</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="box">
<h2>最新动态</h2>
<ul class="newlist">
<li>·<a href="#">腾讯电脑管家8.0正式版发布</a></li>
<li>·<a href="#">腾讯游戏平台首推强加速、LOL助手永久免费</a></li>
<li>·<a href="#">微云2.0六大终端全新出击，超强收藏功能</a></li>
<li>·<a href="#">腾讯手机管家(PC版)2.0新版 只为用户更好体验</a></li>
<li>·<a href="#">QQ影音3.7发布，提升转码速度</a></li>
<li>·<a href="#">QQ2012 Beta2(Q+)：全新Q+，更快更便捷</a></li>
<li>·<a href="#">Foxmail 7发布新版本，支持繁、简、英多语言</a></li>
</ul>
</div>
<div class="box">
<h2><a href="#">更多推荐</a><span><a href="#">更多>></a></span></h2>
<ul class="downlist">
<li class="down_1"><a href="#">QQ旋风</a><span><a href="#">下载</a></span></li>
<li class="down_2"><a href="#">腾讯视频播放器</a><span><a href="#">下载</a></span></li>
<li class="down_3"><a href="#">QQ影音</a><span><a href="#">下载</a></span></li>
<li class="down_4"><a href="#">小Q书桌</a><span><a href="#">下载</a></span></li>
<li class="down_5"><a href="#">Foxmail</a><span><a href="#">下载</a></span></li>
<li class="down_6"><a href="#">顽固木马克星</a><span><a href="#">下载</a></span></li>
</ul>
</div>
<div class="box">
<h2>合作伙伴</h2>
<div class="fir_link">
<a href="#">腾讯软件管理</a><a href="#">腾讯网下载</a><a href="#">下载吧</a><a href="#">IT168</a><a href="#">东坡下载</a><a href="#">完美下载</a><a href="#">腾牛网</a><a href="#">PC6下载站</a><a href="#">乡巴佬下载</a>
</div>
</div>
</div>
</div>
<div id="footer">
<ul>
<li>Copyright © 1998 - 2012 Tencent. All Rights Reserved.</li>
<li>腾讯公司 版权所有</li>
</ul>
</div>
</div>
</body>
</html>
