<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>腾讯软件首页</title>
<link href="/go.html?url=../CASE/练习/css/style1.css" type="text/css" rel="stylesheet" />
<link href="/go.html?url=../CASE/练习/css/style2.css" type="text/css" rel="stylesheet" />
<link href="/go.html?url=../CASE/练习/css/style3.css" type="text/css" rel="stylesheet" />
<link href="/go.html?url=../CASE/练习/css/style4.css" type="text/css" rel="stylesheet" />
<style type="text/css">
*{ margin:0; padding:0;}
body{ margin:0; padding:0;}
.wrap{ margin:0 auto;width:908px; overflow:hidden;}
.head{ width:100%;}
.logo{ background:url(../CASE/case3/images/logo.gif) no-repeat;
background-position: 2px -10px;}
h4{ margin-left:550px;
margin-top:20px;}
h6{ margin-left:550px;
margin-top:10px;
color:#CCC;}
.bottom{width:100%; overflow:hidden;}
.menu{background:url(../CASE/case3/images/navbg.gif) no-repeat;
width:100%; overflow:hidden; background-position:-2px 15px;}
.menu1{ list-style:none; font-size:16px ; margin-left:30px;}
.button{ text-decoration:none;
float:left;
margin:15px 30px 15px 30px;
color:#FFF;
font-weight:bold;}
.button:hover{ color:#000; text-decoration:none;}
.mainbody{ width:100%; overflow:hidden; }
.left{ float:left; margin-top:-10px;}
.top{overflow:hidden;}
.bottom{overflow:hidden;}
.right{ width:295px; float:right; margin-top:-10px; }
#title{ border-bottom:1px solid #0CF; padding:2px 0;overflow:hidden;}
#foot{ width:100%; overflow:hidden; border:1px soild #CCC;
background-color:#CCC;}
#foot h5{ text-align:center; margin:10px 0px 10px 0; color:#FFF;}
</style>
</head>
<body>
<div class="wrap">
<div class="head">
<div class="top1 logo" >
<h4>腾讯软件中心，腾讯精品软件展示平台</h4>
<h6>我们会不断提升产品的性能和体验，为您提供最好用的软件！</h6>
</div>
<div class="bottom1 menu">
<ul class="menu1">
<li><a class="button" href="/go.html?url=#">首页</a></li>
<li><a class="button" href="/go.html?url=#">PC产品大全</a></li>
<li><a class="button" href="/go.html?url=#">MAC产品大全</a></li>
<li><a class="button" href="/go.html?url=#">无线产品大全</a></li>
<li><a class="button" href="/go.html?url=#">企业产品大全</a></li>
<li><a class="button" href="/go.html?url=#">QQ实验室</a></li>
</ul>
</div>
</div>
<div id="mainbody">
<div class="left">
<div class="top"><img src="../CASE/case3/images/banner.png" width="598" /></div>
<div class="bottom">
<div id="box4">
<div class="title">腾讯软件</div>
<div class="use">
<div class="use1" >
<ul>
<li><img src="../CASE/case3/images/icon_1.gif" /><span><a href="/go.html?url=#">腾讯QQ</a></span><p>免费的及时通讯平台</p></li>
<li><img src="../CASE/case3/images/icon_2.gif" /><span><a href="/go.html?url=#">腾讯管家</a></span><p>专业的免费杀毒软件</p></li>
<li><img src="../CASE/case3/images/icon_4.gif" /><span><a href="/go.html?url=#">QQ音乐</a></span> <p>全新界面设计，视野更开阔</p></li>
<li><img src="../CASE/case3/images/icon_3.gif" /><span><a href="/go.html?url=#">软件管理</a></span> <p>下载软件，就用软件管理</p></li>
<li><img src="../CASE/case3/images/icon_5.gif" /><span><a href="/go.html?url=#">QQ浏览器</a></span> <p>全新设计，简单轻快</p></li>
<li><img src="../CASE/case3/images/icon_6.gif" /><span><a href="/go.html?url=#">QQ影像</a></span> <p>管理，浏览，编辑，上传一站体验</p></li>
</ul>
</div>
<div class="use2" >
<ul>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="/go.html?url=#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="/go.html?url=#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="/go.html?url=#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="/go.html?url=#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="/go.html?url=#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="/go.html?url=#">官方网站</a></span><li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div id="title"><span>最新动态</span></div>
<div id="box1">
<ul>
<li><a href="/go.html?url=#">腾讯电脑管家8.0正式版发布</a></li>
<li><a href="/go.html?url=#">腾讯游戏平台首推强加速、LOL助手永久免费</a></li>
<li><a href="/go.html?url=#">微云2.0六大终端全新出击，超强收藏功能</a></li>
<li><a href="/go.html?url=#">腾讯手机管家(PC版)2.0新版 只为用户更好体验</a></li>
<li><a href="/go.html?url=#">QQ影音3.7发布，提升转码速度</a></li>
<li><a href="/go.html?url=#">QQ2012 Beta2(Q+)：全新Q+，更快更便捷</a></li>
<li><a href="/go.html?url=#">Foxmail 7发布新版本，支持繁、简、英多语言</a></li>
</ul>
</div>
<div id="box2">
<span><a href="/go.html?url=#">更多推荐</a></span>
<div class="soft">
<div class="soft1">
<ul>
<li><img class="icon" src="../CASE/case3/images/soft_r_1.gif" /> <span ><a href="/go.html?url=#">QQ音乐</a></span></li>
<li><img class="icon" src="../CASE/case3/images/soft_r_2.gif" />
<span><a href="/go.html?url=#">腾讯视频播放器</a></span></li>
<li><img class="icon" src="../CASE/case3/images/soft_r_3.gif" />
<span><a href="/go.html?url=#">QQ影音</a></span></li>
<li><img class="icon" src="../CASE/case3/images/icon_3.gif" width="17px" height="17px" />
<span><a href="/go.html?url=#">小Q书桌</a></span></li>
<li><img class="icon" src="../CASE/case3/images/soft_r_5.gif" />
<span><a href="/go.html?url=#">Foxmail</a></span></li>
<li><img class="icon" src="../CASE/case3/images/soft_r_6.gif"/>
<span><a href="/go.html?url=#">顽固木马克星</a></span></li>
</ul>
</div>
<div class="soft2">
<ul>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="/go.html?url=#">下载</a></span></li>
</ul>
</div>
</div>
</div>
<div id="box3">
<div class="title"><span>合作伙伴</span></div>
<div class="list">
<ul>
<li><a href="/go.html?url=#">腾讯软件管理</a></li>
<li><a href="/go.html?url=#">IT168</a></li>
<li><a href="/go.html?url=#">腾牛网</a></li>
</ul>
<ul>
<li><a href="/go.html?url=#">腾讯网下载</a></li>
<li><a href="/go.html?url=#">东坡下载</a></li>
<li><a href="/go.html?url=#">PC6下载站</a></li>
</ul>
<ul>
<li><a href="/go.html?url=#">下载吧</a></li>
<li><a href="/go.html?url=#">完美下载</a></li>
<li><a href="/go.html?url=#">乡巴佬下载</a></li>
</ul>
</div>
</div>
</div>
<div id="foot">
<h5>Copyright © 1998 - 2012 Tencent. All Rights Reserved.</h5>
<h5>腾讯公司 版权所有</h5>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
阅读背景：
css布局之流动布局（腾讯软件首页案例）
来源：互联网
分享到：
