CSS布局之流动布局（湖南中兴网信首页实例）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中兴首页</title>
<link href="../css/style2.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="wrap">
<div class="head">

<ul class="list">
	<li><a class="list1" href="#">关于公司</a></li>
    <li><a href="#">电子书包</a></li>
    <li><a href="#">终端产品</a></li>
    <li><a href="#">联系我们</a></li>
</ul>
	<h3>科技引领进步</h3>
<div >EN</div>
</div>
<div class="mainbody">
<div class="left">
	<img src="../img/picture.png"/>
    <div class="bottom">
    	<h1>湖南中兴网信有限公司</h1>
        <h3>Hunan ZTE ICT Technologies Co,Ltd</h3>
        <p>公司成立于2011年注册资金2000万元，是由中国最大的通讯设备制造商
        	和全球通讯行业领先的方案提供商中兴通讯股份有限公司(SZ:000063,HK:0763)投资控股的软件企业。  </p>
       
        
    </div>
</div>
<div class="right">
		<h4>经营理念</h4>
        <h2>科技引领进步</h2>
        <p>公司致力于为政府，运营商，大中企业提供综合信息解决方案,积极开展高端产品研发和技术合作，重点跟踪云计算
        	，宽带运营及移动互联网新型邻域，为客户提供数据中心，信息安全，远程教育及医疗，财务，融合办公方向的咨询，软件项目实施，后期服务保障等环节</p>
        <p>湖南中兴网信科技有限公司是衡阳市高科技信息人才库企业，是湖南省经济和信息化委员会认定的重点软件企业，具有湖南省公安厅颁发的“安防系统一级资质“
        	，2012年通过国家系统集成四资质认定并完成国家系统集成二级资质人才储备。优秀人才的聚集，大大加强了我司的研发能力，自成立至今，我司多项目自主研发
            	产品获得专利著作</p>    
</div>
</div>

</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;}
.wrap{ width:1376px; margin:0 auto; }
.head{		border-bottom:2px solid #cfcfcf; 
			width:100%; position:relative; height:100px;
			background:url(../img/logo2-com.png) no-repeat; 
			overflow:hidden;
			background-position: 200px 10px;}
.head div{ 	width:42px; height:29px;
			background:#ff7c25; 
			text-align:center; 
			font-size:12px; 
			color:#FFF;
			padding-top:10px;
			position:absolute; 
			left:1250px; top:0px;}
.head .list{ list-style:none; }
.head ul{ margin-left:830px;} 
.head a{  	float:left; 
			margin:40px 25px 38px 25px; 
			color:#000; 
			text-decoration:none; font-size:18px; font-family:"微软雅黑";}
.head a:hover,.list1{		border-bottom: 3px solid #F60;
					padding-bottom:33px;}
.head h3{ 	position:absolute; left:371px; top:37px; 
			color:#cfcfcf; 
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
           }
.mainbody {width:100%; overflow:hidden; }
.mainbody .left{ 	float:left; width:730px;
				 	 position:relative;}

.mainbody .left img{ margin-left:208px;
					 margin-top:58px; margin-bottom:-4px;}
.mainbody .left .bottom{	width:515px; 
							margin-left:208px; color:#FFF; 
							background:#ff7c25; 
							margin-top:-10px;}
.mainbody .left .bottom p,h1,h3{ margin:10px 0 0 10px;}
.mainbody .left .bottom p{	font-size:12px; 
							line-height:3em; color:#FFF;}
.mainbody .left .bottom h3{ font-weight:normal;}
.mainbody .right{ 			float:right;
							 width:528px; margin-top:70px;
							background:url(../img/logo1-com.png) no-repeat; 
							position:relative; padding:0 72px 0 0;}

.mainbody h4,h2{ 	margin-left:160px; 
					margin-top:10px;}
.mainbody .right p{  padding:0 10px 0 px;
					 margin:30px 0 30px 0;
					 line-height:2em; 
					 font-family:"微软雅黑"; color:#666; }
.mainbody h2{ color:#ff7c25;}
.mainbody h4{ color:#cfcfcf;}

CSS布局之流动布局（湖南中兴网信首页实例）

猜你喜欢