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布局之流动布局（湖南中兴网信首页实例）相关推荐

网页布局之---固定布局、流动布局、弹性布局
当设计的网站会面向众多用户时,设计师必须考虑访客之间的下列潜在差异: 屏幕分辨率用的哪款浏览器浏览窗口是否最大化是否启用占位置的浏览器的额外组件(如历史.书签.Google工具栏等等) 乃至操作 ...
中兴网信员工坠楼事件背后：程序员中年危机来了？
新京报漫画/陈冬如果说其他行业的中层人员降级后仍可游刃有余的话,程序员中层降岗后,会不如自己新岗位上的同事. 近日,中兴网信员工欧某打开26楼办公室窗户纵身跃下,结束了42岁的生命.目前有多种说法, ...
中兴网信“智慧旅游”亮相2016国际孔子文化节
9月27日上午,由山东省旅游发展委员会.济宁市人民政府.中国旅游报社共同主办,济宁市旅游发展委员会承办的2016中国(济宁)国际研学旅游创新发展峰会在山东济宁曲阜举行. 此次峰会作为2016中国(曲阜 ...
转: 自适应css布局—-流动布局新时代(译文)
流动网页设计有很多好处,但也只有在正确使用的时候.合适的技巧会使页面在大屏幕.小屏幕抑.PDA小屏幕上都能得到良好的呈现.但是,糟糕的代码结构,对于流动布局来说将是灾难性的.因此,我们需要针对大多数流 ...
打造无懈可击的Web设计——流动布局和弹性布局
防弹衣并不能100%保证不受伤害,但穿了总是比不穿好.这样的规则同样适用于Web设计.通过增加网页的灵活性,以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性,我们就给自己的作品赋予了一些与众不 ...
CSS设计指南---页面布局
CSS设计指南-页面布局教材:CSS设计指南实现多栏布局三种方案: 固定宽度:固定宽度布局的大小不会随用户调整浏览器窗口大小而变化,一般是 900 到1100像素宽. 流动: 流动布局的大小会随 ...
html流动布局,自适应css布局——流动布局新时代
流动网页设计有很多好处,但也只有在正确使用的时候.合适的技巧会使页面在大屏幕.小屏幕抑.PDA小屏幕上都能得到良好的呈现.但是,糟糕的代码结构,对于流动布局来说将是灾难性的.因此,我们需要针对大多数流 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...

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

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

最新文章

热门文章