频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
css布局技巧之流动布局实战示例(腾讯软件首页案例)
2017-09-29 09:06:00      个评论    来源:天天向上  
收藏   我要投稿

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;}

点击复制链接 与好友分享!回本站首页
上一篇:多列布局(column)
下一篇:轻量级Web框架SpringMVC处理请求的流程解析
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站