页面的百分比布局

最新推荐文章于 2024-06-04 11:45:40 发布

没有心跳的TheOne

最新推荐文章于 2024-06-04 11:45:40 发布

阅读量4.7k

点赞数 8

分类专栏：前端——大屏首页

本文链接：https://blog.csdn.net/qq_35315439/article/details/108021416

版权

前端——大屏首页专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写一个产业图谱的页面已经很久，却从没有进行复盘过。自己细细一想，自己写的页面，对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。
知识点：
基本的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  style="height:100%;width:100%;">
<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>
</head>
<body>
<div class="row">
    <div class="col-xs-12">
        <!--页面上方显示的字“....咨询平台”-->
        <div class="top-banner">
            <img th:src="@{/img/争先进位科创服务平台.png}" alt="火炬" href="/index" onClick="javascript :history.back(-1);">
            <!--                <a style="background:url(/img/回到首页_03.png);background-size:100% 100%;float: right;color:#f9de49;font-size: 0.16rem;text-decoration :none;padding: 0.16rem;padding-top:0.08rem;"-->
            <!--                   href="/index" onClick="javascript :history.back(-1);">回到首页</a>-->
        </div>
        <!--  <a style="text-decoration:none;float: right;color: white;font-size: 16px" href="/index" onClick="javascript :history.back(-1);">返回上一页</a>-->
    </div>
</div>

<!--左边部分-->
<div class="pull-left" style="height:90%;width:33%;" >
<!-- 左边三部分-->
    <div  style=" background:#000;background:url(/img/text-box_03.png) no-repeat;background-size: 100% 100%;height: 36%;" ></div>
    <div  style=" position: relative;top:10px;background:url(/img/text-box_08.png) no-repeat;background-size: 100% 100%;height: 18.5%;" >
        <div style="height: 100%;">
            <div style="float: left;width:28%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:90% 60%;">
                <div style=" float:left; width:30%;height:100%;margin-top: 54%;margin-left: 10%">
                    <img src="/img/知识产权_10.png" style="height:32px;width:32px;" alt="知识产权">
                </div>
                <div style="float:left; width:52%;height:100%;margin-top: 50%;margin-left: 6%">
                    <span id="lwsSpan" class="zscqStyle">论文数</span><br/>
                    <span id="lwsSpan2" class="zscqStyle2">4</span>
                    <span id="lwsSpan3" class="zscqStyle">篇</span>
                </div>
            </div>
            <div  style="float: left;width:28%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:100% 60%;">
            </div>
            <div  style="float: left;width:40%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:90% 60%;">
            </div>
        </div>
    </div>
    <div  style=" position: relative;top:20px;background:url(/img/人才情况.png) no-repeat;background-size: 100% 100%;height: 38%;cursor:pointer" ></div>
</div>

<!--中间部分-->
<div class="pull-left" style="height:90%;width:33%;" >
    <div style="height: 15%;display:-webkit-flex;display: flex;justify-content: space-around;cursor:pointer">
        <!--企业数-->
        <div id="qys" style="display: inline-block;height: 100%;width:22%;">
            <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
            </div>
            <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
            </div>
        </div>
        <!--工业总产值-->
        <div id="gyzcz" style="display: inline-block;height: 100%;width:22%;">
            <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
            </div>
            <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
            </div>
        </div>
        <!--从业人数-->
        <div id="cyrs" style="display: inline-block;height:100%;width:22%;">
            <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
            </div>
            <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
            </div>
        </div>
        <!--载体数量-->
        <div id="kjxm1" style="display: inline-block;height: 100%;width:22%;">
            <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
            </div>
            <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
            </div>
        </div>
    </div>

    <div style="position:relative;top:14px;width:100%;height:90%;background:url(/img/地图边框.png) no-repeat;background-size: 100% 84%;display: block;"></div>
</div>

<!--右边部分-->
<div class="pull-left" style="height:90%;width:33%;" >
    <div style="background:url(/img/text-box_05.png) no-repeat;background-size: 100% 100%;height: 41%;"></div>
    <div style="position:relative;top:10px;background:url(/img/text-box_10.png) no-repeat;background-size: 100% 100%;height: 30%;"></div>
    <div style="position:relative;top:20px;background:url(/img/科研机构.png) no-repeat;background-size: 100% 100%;height: 20%;"></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

结合以上，代码你可以初步认识页面的百分比布局

没有心跳的TheOne

关注

8
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
页面的百分比布局

写一个产业图谱的页面已经很久，却从没有进行复盘过。自己细细一想，自己写的页面，对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。知识点：基本的Html页面构成：//<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。<!doctype html><html><head> <meta charset="utf-8">
复制链接

扫一扫