核心提示：css布局技巧之流动布局实战示例（腾讯软件首页案例）。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN https://www.w...
css布局技巧之流动布局实战示例（腾讯软件首页案例）。
<!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="../CASE/练习/css/style1.css" type="text/css" rel="stylesheet" />
<link href="../CASE/练习/css/style2.css" type="text/css" rel="stylesheet" />
<link href="../CASE/练习/css/style3.css" type="text/css" rel="stylesheet" />
<link href="../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>
<p class="wrap">
<p class="head">
<p class="top1 logo" >
<h4>腾讯软件中心，腾讯精品软件展示平台</h4>
<h6>我们会不断提升产品的性能和体验，为您提供最好用的软件！</h6>
</p>
<p class="bottom1 menu">
<ul class="menu1">
<li><a class="button" href="#">首页</a></li>
<li><a class="button" href="#">PC产品大全</a></li>
<li><a class="button" href="#">MAC产品大全</a></li>
<li><a class="button" href="#">无线产品大全</a></li>
<li><a class="button" href="#">企业产品大全</a></li>
<li><a class="button" href="#">QQ实验室</a></li>
</ul>
</p>
</p>
<p id="mainbody">
<p class="left">
<p class="top"><img src="../CASE/case3/images/banner.png" width="598" /></p>
<p class="bottom">
<p id="box4">
<p class="title">腾讯软件</p>
<p class="use">
<p class="use1" >
<ul>
<li><img src="../CASE/case3/images/icon_1.gif" /><span><a href="#">腾讯QQ</a></span><p>免费的及时通讯平台</p></li>
<li><img src="../CASE/case3/images/icon_2.gif" /><span><a href="#">腾讯管家</a></span><p>专业的免费杀毒软件</p></li>
<li><img src="../CASE/case3/images/icon_4.gif" /><span><a href="#">QQ音乐</a></span> <p>全新界面设计，视野更开阔</p></li>
<li><img src="../CASE/case3/images/icon_3.gif" /><span><a href="#">软件管理</a></span> <p>下载软件，就用软件管理</p></li>
<li><img src="../CASE/case3/images/icon_5.gif" /><span><a href="#">QQ浏览器</a></span> <p>全新设计，简单轻快</p></li>
<li><img src="../CASE/case3/images/icon_6.gif" /><span><a href="#">QQ影像</a></span> <p>管理，浏览，编辑，上传一站体验</p></li>
</ul>
</p>
<p class="use2" >
<ul>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="#">官方网站</a></span><li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span>
<span class="download1">|</span>
<span ><a class="download" href="#">官方网站</a></span><li>
</ul>
</p>
</p>
</p>
</p>
</p>
<p class="right">
<p id="title"><span>最新动态</span></p>
<p id="box1">
<ul>
<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>
</p>
<p id="box2">
<span><a href="#">更多推荐</a></span>
<p class="soft">
<p class="soft1">
<ul>
<li><img class="icon" src="../CASE/case3/images/soft_r_1.gif" /> <span ><a href="#">QQ音乐</a></span></li>
<li><img class="icon" src="../CASE/case3/images/soft_r_2.gif" />
<span><a href="#">腾讯视频播放器</a></span></li>
<li><img class="icon" src="../CASE/case3/images/soft_r_3.gif" />
<span><a href="#">QQ影音</a></span></li>
<li><img class="icon" src="../CASE/case3/images/icon_3.gif" width="17px" height="17px" />
<span><a href="#">小Q书桌</a></span></li>
<li><img class="icon" src="../CASE/case3/images/soft_r_5.gif" />
<span><a href="#">Foxmail</a></span></li>
<li><img class="icon" src="../CASE/case3/images/soft_r_6.gif"/>
<span><a href="#">顽固木马克星</a></span></li>
</ul>
</p>
<p class="soft2">
<ul>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span></li>
<li><img src="../CASE/case3/images/downicon.gif" />
<span><a class="download" href="#">下载</a></span></li>
</ul>
</p>
</p>
</p>
<p id="box3">
<p class="title"><span>合作伙伴</span></p>
<p class="list">
<ul>
<li><a href="#">腾讯软件管理</a></li>
<li><a href="#">IT168</a></li>
<li><a href="#">腾牛网</a></li>
</ul>
<ul>
<li><a href="#">腾讯网下载</a></li>
<li><a href="#">东坡下载</a></li>
<li><a href="#">PC6下载站</a></li>
</ul>
<ul>
<li><a href="#">下载吧</a></li>
<li><a href="#">完美下载</a></li>
<li><a href="#">乡巴佬下载</a></li>
</ul>
</p>
</p>
</p>
<p id="foot">
<h5>Copyright © 1998 - 2012 Tencent. All Rights Reserved.</h5>
<h5>腾讯公司 版权所有</h5>
</p>
</p>
</body>
</html>
//style1.css
@charset "utf-8"; /* CSS Document */ #box1{ border:1px hidden #74b7eb; margin-top:5px; overflow:hidden; } ul{ font-size:10px ; margin-left:5px; padding-top:5px; padding-left:5px;overflow:hidden;} a{ text-decoration:none;color:#000; margin-left:-5px; line-height:2em;overflow:hidden;} a:hover{ text-decoration:underline;overflow:hidden;}
<p>//style2.css</p>
@charset "utf-8";
/* CSS Document */
#box2{ width:290px; overflow:hidden; }
#box2 a{ width:288;; overflow:hidden; margin-left:0px; margin-top:5px; }
.soft{ width:288;;overflow:hidden; border-top:1px solid #74b7eb;}
.soft1{width:150px; padding:0; float:left; margin-left:5px; }
.soft2{ width:85;padding:5px; float:right; }
.soft1 ul{ margin-left:0px; list-style:none; overflow:hidden;}
.soft2 ul{ margin-left:-10px;list-style:none; overflow:hidden; line-height:1em; padding:5px 0px;}
.soft2 .download{ text-decoration:underline;}
.download:hover{ text-decoration:none;}
#box2 img{ overflow:auto;}
//style3.css<pre name="code" class="html">@charset "utf-8";
/* CSS Document */
#box4{ width:598px; overflow:hidden;}
.use{ border-top:1px solid #74b7eb; width:590px; overflow:hidden; }
.use1 ul{ width:250px; float:left; list-style:none;font-size:16px; font-weight:bold; padding-top:-10px; line-height:3em;}
.use2 ul{width:100px;float:left;list-style:none; line-height:5em; margin:20px opx 20px 0px; float:right;}
.use2 a{ text-decoration:underline;}
.use1 a{text-decoration:underline; display:inline-block; margin-left:5px;}
.use1 a:hover{ text-decoration:none;}
p{ margin:-15px 0 0 35px;
font-size:14px;
font-weight:normal;}
.use1 img{ float:left;}
#box4 .title{ margin:10px 1px 10px 0px;}
#box4 .title span{ padding-left:2px;}
//style4.css
@charset "utf-8";
/* CSS Document */
#box3{ width:295px; overflow:hidden; margin-top:10px;}
.title{ width:280px; overflow:hidden;}
#box3 .list{ border-top:1px solid #74b7eb; margin-top:5px;overflow:hidden;}
.list a{ display:block; text-decoration:none;}
#box3 .list a:hover{ text-decoration:underline;}
#box3 ul{ list-style:none;
float:left;
margin:10px 10px;; padding:0;
line-height:3em;
padding-left:10px;}
