Collection
Collection
![GG1K6LPBXQB{YH)4E]QVJ`I.png](https://img.php.cn//upload/image/937/777/818/1513574261924910.png "1513574261924910.png")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>企业网站首页</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 微软雅黑;
}
.top {
width:900px;
height: 300px;
/*background-color: peru;*/
margin: 0 auto;
}
.top .logo {
width:290px;
height: 46px;
background: url(image/logo.png);
margin-bottom: 10px;
}
.top .biao {
width: 900px;
height: 42px;
background-color: #565656;
margin-bottom: 10px;
}
.top .biao a {
/*background-color: red;*/
margin-top: 20px;
margin: 0 30px 0;
text-decoration-line: none;
line-height: 42px;
font-size: 1.2em;
color: white;
}
.top .bao {
width:900px;
height:213px;
}
.cen {
width:900px;
height:860px;
/*background-color: green;*/
margin: 0 auto;
margin-top: 30px;
}
.cen .left {
width: 200px;
height: 860px;
/*background-color: wheat;*/
float: left;
}
.cen .left h1 {
color: red;
}
.cen .left li {
font-weight: bold;
list-style: none;
}
.cen .right {
width:700px;
height: 860px;
/*background-color:yellow;*/
float: right;
}
.cen .right .to {
width: 700px;
height: 400px;
/*background-color: green;*/
padding-top: 10px;
}
.cen .right .to p {
width: 700px;
/*background-color: green;*/
line-height: 28px;
}
.cen .right .footer h2 {
display: inline;
}
.cen .clear {
clear: both;
}
.below {
width: 900px;
height: 107px;
/*background-color: red;*/
margin:0 auto;
margin-bottom: 10px;
text-align: center;
}
.below img {
background-color: red;
}
.bk {
width:900px;
height: 50px;
background-color: #999999;
margin: 0 auto;
text-align: center;
margin-top: 50px;
}
.bk p {
line-height: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="logo"></div>
<div class="biao">
<a href="">首页</a>
<a href="">关于我们</a>
<a href="">公司新闻</a>
<a href="">最新产品</a>
<a href="">联系我们</a>
</div>
<div class="bao">
<img src="image/timg.jpg" alt="" width="100%" height="213">
</div>
</div>
<div class="cen">
<div class="left">
<h1>一百多年前</h1>
<li>她扛起民族工业振兴重任，开创百年品牌；</li>
<h1>一百多年后</h1>
<li>她肩负传统行业转型使命，实现华丽转身。</li>
</div>
<div class="right">
<div class="to">
<p>华新水泥股份有限公司始创于1907年，被誉为中国水泥工业的摇篮，110年来，为国家和地方经济建设作出了突出贡献</p>
<p>华新水泥是国内水泥行业中首家通过GB/T19001—ISO9001质量体系认证的企业，企业资信为“AAA”级，“华新堡垒”为中国驰名商标。北京50年代的十大建筑、北京亚运村、葛洲坝、京珠高速公路，长江中下游数十座公路和铁路大桥、举世瞩目的三峡工程等国家重点工程，均选用华新水泥。</p>
<p>近年来，华新水泥积极转变发展方式，在水泥行业率先推动并开展可替代原、燃料的研发与应用，形成具有国际先进水平的水泥窑协同处置废物技术和环保解决方案，成功实现从传统水泥生产企业向绿色环保企业的转型。企业也从一家单纯从事水泥生产的企业发展成为集水泥、混凝土、骨料、环保处置、装备制造及EPC工程、高新建材等业务的全球化建材集团，在全国十余个省市及海外拥有150余家分子公司，名列中国制造业500强和财富中国500强，规模稳居国内同业前列。</p>
</div>
<div class="footer">
<h2>公司组织架构：</h2>
<img src="image/jg.png" alt="" width="718" height="416">
</div>
</div>
<div class="clear"></div>
</div>
<div class="below">
<img src="image/1.png" alt="" width="12%" style="padding-top: 1px">
<img src="image/2.png" alt="" width="12%">
<img src="image/3.png" alt="" width="12%">
<img src="image/4.png" alt="" width="12%">
<img src="image/5.png" alt="" width="12%">
<img src="image/6.png" alt="" width="12%">
<img src="image/7.png" alt="" width="12%">
<img src="image/8.png" alt="" width="12%">
</div>
<div class="bk">
<p>Copyright 2017 华新水泥股份有限公司 鄂ICP备09010176号</p>
</div>
</body>
</html>
整体思路 布局分为上中下三部分 用css添加样式 控制模块的位置
line-height：可以设置字体居中 设置跟父级DIV height即可 利用 margin 设置外边距 padding设置内边距
防止项目中段落文字溢出 可以设置width height即可 利用display：inline；即可设置所有元素在一行显示
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
