横向两列布局，float浮动布局-原创手记-慕课网

<!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>横向两列布局，float浮动布局</title>

<style type="text/css">
*{margin:0;padding:0;}/*初始化代码*/
#warp{margin:0 auto;width:960px;}/*(margin:0 auto)自动居中,宽度：960px*/
li{list-style-type:none;}/*取消列表<ul>列表项目<li>前面的圆点*/
#header{width:100%;clear:both}/*宽度：100%父块级元素宽度这里指warp的宽度；清楚浮动(如果不使用清除浮动会造成header后面的元素乱排版)*/
#header p{padding:20px 0 0 0 ;float:right;}/**/

#nav{width:100%; margin-top:8px; background:url(case2%20image/navbg.gif) no-repeat; height:36px; overflow:hidden;}/**/
#nav ul{width:94%; margin:0 auto; overflow:hidden;}/*<ul>宽度94% nav元素的宽度；自动居中；当内容溢出元素框时发生的事情：隐藏（不显示）*/
#nav li{float:left; line-height:34px; font-weight:bold; margin:0 20px; font-size:16px;}/*文本粗细(font-weight):(bold)粗字体*/
#nav li a{color:#fff;}/**/
#nav li a:hover{text-decoration:none;}/*文本修饰：无*/
#nav li.current{background:url(case2%20image/home.gif) 0 4px no-repeat; width:88px; text-align:center;}/**/
#nav li.current a{color:#000;}/**/
#nav li.qq_lab{float:right; background:url(case2%20image/arrow_r.gif) 0 8px no-repeat; padding-left:25px;}/**/

#mainbody{width:100%;}/**/
.left{float:left;width:600px;overflow:hidden;margin:15px;font-size:12px;}/**/
.right{float:right;width:300px;font-size:12px;margin:15px;}/**/

h2{line-height:28px; border-bottom:1px solid #cce6f5; margin-bottom:10px;}/*h2行高28px;边框的下边为1px的#cce6f5实线;下边界为10px;*/
h2 span{float:right;}/*<span>标签向右浮动*/
h2 span a{font-size:12px;font-weight:normal;}/*<a>标签中的字体大小为12px;文本粗细：normal;*/
a{text-decoration:none;}/*去掉<a>标签里面的下划线*/
a:hover{text-decoration:underline;}/*鼠标焦点在<a>标签上时，<a>标签显示下划线*/

.softwarelist{width:100%; overflow:hidden;}/*清除浮动*/
.softwarelist li{margin-bottom:15px; width:100%; overflow:hidden;}/*设置列表项目(<li>)的“外”下边距:15px*/
.softwarelist li dl{float:left; padding-left:45px;}/*列表<dl>标签，向左浮动，“内”左边距：45px*/
.softwarelist li span{float:right; font-size:12px; color:#630063; margin-top:5px;}/*列表项目(<li>)中的<span>标签，向右浮动，字体大小：12px,颜色#630063；“外”上边距：5px*/
.softwarelist li span a{font-size:12px; text-decoration:underline;}/*列表项目<li>中的<span>中的<a>标签字体：12px；文本修饰属性<text-decoration>：下划线*/
.softwarelist li span a:hover{text-decoration:none;}/*(a：hover{})a的选择鼠标指针浮动在上面的元素：无变化(none)即<a>的下划线取消*/
.softwarelist li dt{font-size:12px; color:#828282; line-height:26px;}/*列表<dl>中的列表标题<dt>中字体：12px;颜色：#828282;行高：26px*/
.softwarelist li dt a{ text-decoration:underline; font-weight:bold; margin-right:10px;}/*列表标题<dt>中<a>的文本修饰属性<text-decoration>：下划线；文本粗细(font-weight)：粗体字符(bold);外右边距：10px*/
.softwarelist li dt a:hover{text-decoration:none;}/*列表项目中<li>列表<dl>的列表标题<dt>的<a>的鼠标浮动在什么的元素：无变化(none)即<a>的下划线取消*/
.softwarelist li dd{line-height:24px;}/*列表项目中<li>列表<dl>的列表内容<dd>的行高：24px*/
.software_1{background:url(case2%20image/icon_1.gif) 0 5px no-repeat;}/*添加背景图片icon1;对背景图片定位，0px是水平方向距左0个像素；5px是垂直方向距顶5个像素;(no-repeat)不重复*/
.software_2{background:url(case2%20image/icon_2.gif) 0 5px no-repeat;}/**/
.software_3{background:url(case2%20image/icon_3.gif) 0 5px no-repeat;}/**/
.software_4{background:url(case2%20image/icon_4.gif) 0 5px no-repeat;}/**/
.software_5{background:url(case2%20image/icon_5.gif) 0 5px no-repeat;}/**/
.software_6{background:url(case2%20image/icon_6.gif) 0 5px no-repeat;}/**/
.new{background:url(../images/new.gif) right 4px no-repeat; padding-right:15px;}/*添加背景图片new;背景图像的起始位置(right);不重复(no-repeat);内右边距：15px*/
.download{padding:3px 0 0 15px; background:url(../images/downicon.gif) 0 6px no-repeat;} /*内边距：上3px 右0px 下0px 左15px;插入背景图片 位置：距左：0px 距右6px 不重复;*/

.newslist{width:100%;}
.newslist li{line-height:22px;}

.downlist{width:100%; overflow:hidden;}
.downlist li{overflow:hidden; line-height:26px; padding-left:23px; margin-bottom:5px;}
.downlist li span{float:right; font-size:12px; color:#630063;}
.downlist li span a{font-size:12px; text-decoration:underline;}
.downlist li span a:hover{text-decoration:none;}
.soft_r_1{background:url(case2%20image/soft_r_1.gif) 0 5px no-repeat;}
.soft_r_2{background:url(case2%20image/soft_r_2.gif) 0 5px no-repeat;}
.soft_r_3{background:url(case2%20image/soft_r_3.gif) 0 5px no-repeat;}
.soft_r_4{background:url(case2%20image/soft_r_4.gif) 0 5px no-repeat;}
.soft_r_5{background:url(case2%20image/soft_r_5.gif) 0 5px no-repeat;}
.soft_r_6{background:url(case2%20image/soft_r_6.gif) 0 5px no-repeat;}

.fri_link{width:100%;}
.fri_link a{width:88px; float:left; font-size:12px; margin-right:5px; line-height:26px;}

#footer{margin-top:10px; padding:15px 0; width:100%; text-align:center; border-top:1px solid #e6e6e6; background:#f8f8f8;clear:both;}
#footer li{line-height:24px; color:#9e9e9e; font-size:12px;}

.box{width:100%; overflow:hidden; margin-bottom:15px;}

</style>
</head>

<body>
<div id="warp">
  <div id="header">
    <img src="case2 image/logo.gif">
    <p><strong>腾讯软件中心，腾讯精品软件展示平台</strong><br>
       我们会不断提升产品的性能和体验，为您提供最好用的软件！</p>
      <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="left">
        <img src="case2 image/banner.png"><br>
        <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="#" class="download">下载</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="#" class="download">下载</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="#" class="download">下载</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="#" class="download">下载</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="#" class="download">下载</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="#" class="download">下载</a> | <a href="#">官方网站</a></span> </li>
          </ul>
    </div>
    <div class="right">
        <div class="box">
        <h2>最新动态</h2>
        <ul class="newslist">
          <li>&middot; <a href="#">腾讯电脑管家8.0正式版发布</a></li>
          <li>&middot; <a href="#">腾讯游戏平台首推强加速、LOL助手永久免费</a></li>
          <li>&middot; <a href="#">微云2.0六大终端全新出击，超强收藏功能</a></li>
          <li>&middot; <a href="#">腾讯手机管家(PC版)2.0新版 只为用户更好体验</a></li>
          <li>&middot; <a href="#">QQ影音3.7发布，提升转码速度</a></li>
          <li>&middot; <a href="#">QQ2012 Beta2(Q+)：全新Q+，更快更便捷</a></li>
          <li>&middot; <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="soft_r_1"><a href="#">QQ旋风</a><span><a href="#" class="download">下载</a></span></li>
          <li class="soft_r_2"><a href="#">腾讯视频播放器</a><span><a href="#" class="download">下载</a></span></li>
          <li class="soft_r_3"><a href="#">QQ影音</a><span><a href="#" class="download">下载</a></span></li>
          <li class="soft_r_4"><a href="#">小Q书桌</a><span><a href="#" class="download">下载</a></span></li>
          <li class="soft_r_5"><a href="#">Foxmail</a><span><a href="#" class="download">下载</a></span></li>
          <li class="soft_r_6"><a href="#">顽固木马克星</a><span><a href="#" class="download">下载</a></span></li>
        </ul>
      </div>

      <div class="box">
        <h2>合作伙伴</h2>
        <div class="fri_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>