页⾯的百分⽐布局
写⼀个产业图谱的页⾯已经很久，却从没有进⾏复盘过。⾃⼰细细⼀想，⾃⼰写的页⾯，对它总体的把控却没有。感觉⼀个页⾯是在修修补补中完成的。所以特定总结⼀个百分⽐的页⾯布局。
知识点：
基本的Html页⾯构成：
//<!DOCTYPE> 声明不是 HTML 标签；它是指⽰ web 浏览器关于页⾯使⽤哪个 HTML 版本进⾏编写的指令。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>⽆标题⽂档</title>
//sttyle中填写相应的样式
<style>
</style>
</head>
//body 元素定义⽂档的主体
<body>
<div>
</div>
</body>
</html>
以上的<html>,<body>,<div>科技将其理解为三层递进关系，祖——⽗——⼦。
那么我们进⾏页⾯的百分⽐设计时。有两个基本的知识要记住：
1、div默认没有height，width为100%，单独成⼀⾏
2、div的width设置的百分⽐只是相对于⽗级元素，可以理解为body的⽗级是html，div的⽗级是body.那么html的⽗级我们可以理解为window窗⼝。
那么页⾯布局我们最开始会常遇到的问题是什么？
1、如何让两个div横向并排显⽰：float：left，right，display：inline，inline-block
2、如何让两个div垂直并排：div默认width100%，⽆height
3、如何让div内部元素垂直居中：ine-height=height，或
display:table-cell;vertical-align:middle;text-align:center
4、如何去除横纵向滚动条：overflow：hidden
5、如何让div⽔平居中：margin:0 auto;
6、如何控制元素间的间距：margin与padding
布局？我理解为将元素摆在应该的位置。
以上的6个问题的解决⽅案，能基本解决百分⽐布局中存在 问题。
下⾯举⼀个列⼦：
如果我们要完成以上的页⾯布局，分析：
1、html占屏幕height与width都是100%；
2、body占html的height与width也是100%；
3、body中的结构应是倒E字型的机构，顶部⼀个div，width占100%，⾼度为其⾃⼰的”背景图⽚的⾼度；中间为三个div并排显⽰。宽度分布为30%，40%，30%，⾼度为90%。
4,、左边div中上中下3个div，中间分为上下两个div，右边也为上中下三个div
分析了⼤体布局，那么可以着⼿写代码了。html代码可以分为总——分（总——分（）），这样 模式，从整体——局部（局部整体——局部）
下⾯是代码：
<!doctype html>
<html  >
<head>
<meta charset="utf-8">
<title>⽆标题⽂档</title>
<style>
/* 图⽚背景*/
body{
background:url(/img/bg2.jpg) no-repeat;
background-size: 100% 100%;
height:100%;
width:100%;
overflow:hidden
/*margin-top: 1%;*/
}
/*  头部图⽚样式*/
.top-banner img{
width: 50%;
height: auto;
}
.top-banner{
text-align: center
}
/* 设置左中右div距顶部的⾼度百分⽐*/
.pull-left{
margin-top: 3%;
float: left;
border: red solid 1px;
}
.zscqStyle{
color: #acd3fc;
font-size: 13px;
cursor: pointer;
/* border:deepskyblue solid;
border-width:thin;*/
}
.zscqStyle2{
color: #f8b52d;
font-size: 19px;
/*border:deepskyblue solid;
border-width:thin;*/
}
</style>
margin属性值可以为百分比
</head>
<body>
<div class="row">
<div class="col-xs-12">
<!--页⾯上⽅显⽰的字“....咨询平台”-->
<div class="top-banner">
<img src="@{/img/争先进位科创服务平台.png}"alt="⽕炬"href="/index"onClick="javascript :history.back(-1);">
<!--                <a -->
<!--                  href="/index" onClick="javascript :history.back(-1);">回到⾸页</a>-->
</div>
<!--  <a href="/index" onClick="javascript :history.back(-1);">返回上⼀页</a>-->
</div>
</div>
<!--左边部分-->
<div class="pull-left" >
<!-- 左边三部分-->
<div  ></div>
<div  >
<div >
<div >
<div >
<img src="/img/知识产权_10.png" alt="知识产权">
</div>
<div >
<span id="lwsSpan"class="zscqStyle">论⽂数</span><br/>
<span id="lwsSpan2"class="zscqStyle2">4</span>
<span id="lwsSpan3"class="zscqStyle">篇</span>
</div>
</div>
<div  >
</div>
<div  >
</div>
</div>
</div>
<div  ></div> </div>
<!--中间部分-->
<div class="pull-left" >
<div >
<!--企业数-->
<div id="qys" >
<div >
</div>
<div > </div>
</div>
<!--⼯业总产值-->
<div id="gyzcz" >
<div >
</div>
<div > </div>
</div>
<!--从业⼈数-->
<div id="cyrs" >
<div >
</div>
<div > </div>
</div>
<!--载体数量-->
<div id="kjxm1" >
<div >
</div>
<div > </div>
</div>
</div>
<div > </div>
</div>
<!--右边部分-->
<div class="pull-left" >
<div ></div>
<div ></div> <div ></div> </div>
<!--下边部分-->
<div>
</div>
</body>
</html>
真个页⾯布局⽤了：
元素标签：div，backgound'，span，img
css属性：float：left；margin-top，display: inline-block， position: relative;top:10px，height，width，border
结合以上，代码你可以初步认识页⾯的百分⽐布局

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。