精华内容
下载资源
问答
  • html百分比布局
    千次阅读
    2020-08-15 14:39:31

    写一个产业图谱的页面已经很久,却从没有进行复盘过。自己细细一想,自己写的页面,对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。
    知识点:
    基本的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

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

    更多相关内容
  • HTML CSS实现百分比布局

    千次阅读 2019-09-07 19:35:39
    HTML CSS实现百分比布局HTML代码CSS代码实现效果媒体查询效果展示 使用flex布局的justify-content:space-between时,最后一行如果数量不够,无法做到对齐效果,而且有时候为了兼容更低版本IE,不能使用flex。这种...

    使用flex布局的justify-content:space-between时,最后一行如果数量不够,无法做到对齐效果,而且有时候为了兼容更低版本IE,不能使用flex。这种情况下,使用百分比布局无疑是一种很好的选择。
    但是这种方式实现的是间隔固定、item宽度可变。有时候也会遇到item宽度固定,间距可变的情况,但是这种方式我还不知道怎么可以用百分比来实现,如果有会的朋友,可以在评论区留言~感激不尽

    HTML代码

    <!-- 父级元素 -->
    <div class="wrapper">
        <!-- 内容区 -->
        <div class="content">
            <div class="item-wrapper">
                <!-- 实际元素item -->
                <div class="item"></div>
            </div>
            <div class="item-wrapper">
                <div class="item"></div>
            </div>
            <div class="item-wrapper">
                <div class="item"></div>
            </div>
            <div class="item-wrapper">
                <div class="item"></div>
            </div>
            <div class="item-wrapper">
                <div class="item"></div>
            </div>
        </div>
    </div>
    

    CSS代码

    .wrapper{
        width: 100%;
        margin: 0 auto;
        height: 300px;
        font-size: 0;
    }
    .content{
        margin: 0 -10px;
        /* -10px 为实际间隔的一半 */
    }
    .item-wrapper{
        display: inline-block;
        box-sizing: border-box;
        width: 25%;
        padding: 10px;
        /* 10px为实际间隔的一半,此处主要用padding-left和padding-right,top和bottom为上下间距 */
    }
    .item{
        background-color: #cccccc;
        height: 80px;
    }
    

    实现效果

    百分比布局

    媒体查询

    结合媒体查询,还可以实现响应式布局
    在上边css下再加一部分

    @media screen and (max-width: 780px){
        .item-wrapper{
            width: 33.33%;
        }
    }
    

    效果展示

    媒体查询
    当屏幕宽度小于所设定的值(780px)后,item的宽度将变为33.33%。
    百分比布局结合媒体查询,可以实现更多效果,有兴趣的朋友可以自己尝试一下

    展开全文
  • 如何利用百分比布局?本篇文章就给大家介绍css布局之百分比宽度布局的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。百分比是什么?如何设置?百分比是一种相对于包含块的计量单位。...

    5268f80b9b1e01f982625ef6fac83ca1.png

    如何利用百分比布局?本篇文章就给大家介绍css布局之百分比宽度布局的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

    百分比是什么?如何设置?

    百分比是一种相对于包含块的计量单位。

    百分比宽度的计算: 目标元素宽度/父级元素宽度=百分比宽度

    它对图片很有用:如下我们实现了图片宽度始终是容器宽度的50%。大家可以运行后,改变页面大小看看效果!

    5f3c60f6bcbc2a3718bc3219a2b12bb8.png

    你还可以同时使用 min-width 和 max-width 来限制图片的最大或最小宽度比!

    百分比宽度布局

    我们来看看一个百分比宽度布局的例子:nav {

    float: left;

    width: 25%;

    }

    section {

    margin-left: 25%;

    }

    当父容器的宽度为:800px时

    ded0f2479ee626e2f0f7994ee73d5996.png

    当父容器的宽度为:500px时

    fe1eca1ab995a2eb4d6815f79a45a0c8.png

    宽度设置百分比后,nav 和section 标签会随着父容器宽度的改变而改变。

    下面我们来看看css布局中常用属性的百分比设置

    86dbc020a0a1745e7d1d6c8e40f1423c.png

    说明:进行百分比布局需要

    1、 首先对整个页面进行块分区,每个模块的宽度都采取相对应的百分比。

    2、当你定义内容区域的宽度,区域之间的距离时,也就是各盒模型只见的间距,都需要采用百分比,绝对不能用固定宽度。哪怕是margin-left margin-right 也要用百分比!

    3、在进行百分比布局中,尽可能的从大块到小快,抛开具体内容实体,这些块都要用百分比。(内容实体,也就是会展示的内容文字图像图标等等。块,没有内容。)

    百分比宽度布局要面临的问题:

    百分比布局,窗口比例缩小到百分之五十,页面必乱。在百分比布局中,往往放大是不会出问题的,而缩小会出问题。建议选择比较小的电脑屏幕进行开发。屏幕过大,可以根据情况将窗口缩放到15寸左右。

    总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

    展开全文
  • 流式布局(百分比布局)

    千次阅读 2021-01-18 21:28:19
    各位学习前端的小伙伴,相信大家在写前端页面的时候大家都用过百分比布局也就是我们今天所说的流式布局.那么接下来给大家总结一下流式布局的使用. 一:什么是流式布局? 网页布局中包括: 静态布局 流式布局 响应式布局...

    流式布局

    各位学习前端的小伙伴,相信大家在写前端页面的时候大家都用过百分比布局也就是我们今天所说的流式布局.那么接下来给大家总结一下流式布局的使用.

    一:什么是流式布局?

    网页布局中包括:

    • 静态布局
    • 流式布局
    • 弹性布局
    • 响应式布局
    • ……

    静态布局

    • 静态布局指的就是网页中的所有元素都使用px为单位.不管浏览器具体的大小是多少,始终按照设置的值布局来显示,由于浏览器大小不一,这样的布局很容易在不同设备中出现滚动条等问题.所以这种布局在移动开发不是主流的布局方式.

    流式布局

    • 流式布局是页面中元素的宽度按照屏幕分辨率自动进行适配调整,也就是我们常说的适配,它可以保证当前屏幕分辨率发生改变的时候,页面中的元素大小也可以跟着改变,所以流式布局是移动端开发常用的一种布局.

    其它的布局方式我们会在后面的博客会陆续进行讲解,希望大家多多关注!.

    二:什么情况下会用到流式布局?

    1,打开我们移动端页面的时候,发现不管在哪种移动设备中,页面始终都是满屏显示如下所示:

    图一:是京东页面在iphone6,7pluse中的效果:

    在这里插入图片描述

    图二:是京东页面在iphone4中的效果:

    在这里插入图片描述

    在移动开发中这种情况下就要用到流式布局实现了,具体的实现如下: 首先在网页的head标签中添加meta标签设置视口

    在这里插入图片描述

    然后将页面中的父元素宽度设为100%就可以实现

    在这里插入图片描述

    2,移动端中导航项要等分父容器,例如携程移动网页中,导航在iphone4中导航5等分,在iphoneX中也是5等分,如下所示:

    图一:是iphone4中5等分的效果

    在这里插入图片描述

    图二:是ipnoneX中5等分的效果

    在这里插入图片描述

    移动开发中遇到这种等分的情况下,也需要用到流式布局实现,以5等分为例,具体代码如下:

    在这里插入图片描述

    可能有的小伙伴还想到了如果分为其他等分呢?我们的做法都是100% 除以对应的份数就可以了.假如要分为3等份,就100除以3.假如要分为4等份就100除以4即可.

    3,在网页布局中如果出现左右两侧固定大小,中间自适应(圣杯布局,双飞翼布局)这种经度的布局也需要用到流式布局实现,如下:

    在这里插入图片描述

    具体实现方式如下: HTML结构中先准备3个盒子

    在这里插入图片描述

    然后设置对应的CSS代码:

    在这里插入图片描述

    流式布局还有其它的情况,例如左侧固定大小,右侧自适应.右侧固定大小左侧自适应剩下这两种情况大家可以参照上面的圣杯布局的方式灵活的实现,这里就不给大家演示了.

    三:流式布局有没有缺点不足的地方么?

    • 流式布局是用于解决类似的设备不同分辨率之间的兼容,如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
    • 因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。

    所以后面还会给大家分享通过响应式布局和弹性布局来解决这类问题.流式布局就给大家总结分享到这里. 咱们下一篇讲解弹性布局。

    展开全文
  • 解决办法:用百分比布局。就是不固定宽度大小为px,而是利用百分比缩放。这个时候宽度比较好解决。 注意的是,很多人可能觉得边框会占比,还有margin也会占空间,这样一来不好计算。但是我们可以利用这个属性: box-...
  • 移动端特点、百分比布局以及flex布局
  • 一、百分比布局 1.1 视口 1.1.1 ideal viewport 理想视口 1.2 background-size 二、移动端开发 2.1 移动端开发的几种解决方案: 2.1.1 单独制作移动端页面 2.1.2 响应式页面 2.2 百分比布局 三、伸缩布局 ...
  • 一、流式布局(百分比布局) 概念:流式布局是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度,所以也称百分比自适应布局。流式布局实现方法是,将CSS固定像素宽度换算为百分比宽度。 换算格式:目标...
  • 流式布局(百分比布局) flex 弹性布局 less+rem+媒体查询布局 混合布局 响应式布局: 媒体查询 bootstarp 今天我们先来认识一下百分比布局和flex布局 1.流式布局: 流式布局,就是百分比布局,也称非固定像素...
  • 1、百分比布局 (1)子元素的宽高百分比设置: ①手动计算百分比 width:30% ②利用计算函数属性, width:calc(子元素宽 / 父宽 * 100% ) 运算符号前后空格,计算高同理 (2)版心的百分比布局设置 避免版心...
  • 百分比布局,精度肯定不会有rem精确Document* {padding: 0;margin: 0;}.one {width: 20%;height: 100px;float: left;background: red;}.two {width: 30%;height: 100px;float: left;background: blue;}.three {...
  • html之di+百分比布局

    千次阅读 2015-05-30 12:49:44
    <html> #headarea{ width:100%; height:20%; border:1px solid red;...原因1:使用百分比时,对像素的计算采用四舍五入! 没有深入了解,如果有误,希望大家提点!
  • 二、百分比布局 三、FLex布局 1.主轴对齐方式 - justify-content 2.侧轴对齐方式 -align-items 3.弹性伸缩比 一、视口 使用meta标签设置视口宽度,制作适配不同设备宽度的网页 。 viewport:视口 ...
  • flex实现百分比布局

    2022-02-18 16:52:32
    html: <div class="item-info"> <div class="item item-60"></div> <div class="item"></div> <div class="item"></div> </div> sass: .item-info{ display:...
  • 自适应百分比HTML布局框架 CSS5body {font: 100% 宋体, 新宋体;background: #666666;margin: 0;padding: 0;text-align: center;color: #000000;}#container {width: 80%; /* 这将创建一个占据 80% 浏览器宽度的容器 ...
  • flex布局和百分比布局~~~~

    千次阅读 2022-02-12 21:29:40
    1 百分比布局 百分比布局, 也叫流式布局 百分比布局特点:宽度自适应,高度固定。 2 flex布局 flex布局极大的提高了我们布局的效率,更简单、灵活。 display: flex; 一定要给亲爸爸加。 2.1 主轴对齐...
  • 百分比布局 & rem布局

    千次阅读 2019-03-21 23:33:04
    100%布局特点:屏幕尺寸越大显示的...百分比布局 新建html及对应的css 引入meta : vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, mi...
  • 一、流式布局(百分比布局)介绍 流式布局,就是百分比布局,也称非固定像素布局。 通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制, 内容向两侧填充。 流式布局方式是移动...
  • 移动端流式布局(百分比布局)

    千次阅读 多人点赞 2019-10-13 11:33:17
    流式布局 布局特征: 高度写死,宽度自适应。并不是百分百还原设计图 比如:设计图是针对320px屏幕设计的,那么只有在320设备的屏幕中,才是完美的效果,其他情况都会拉伸 ...//html结构如下: <div c...
  • HTML实现2列布局,左侧宽度固定,右侧自适应 实现一: <style> body, html{padding:0; margin:0;} // 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-...
  • 弹性盒布局、Rem 布局、百分比布局 转载于:https://www.cnblogs.com/tremendous/p/10839395.html
  • 流式布局,也就是百分比布局。 它实际通过将盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩,不收固定像素的限制,内容向两侧填充。 要使宽度在合理范围内进行伸缩,故有以下两个属性进行操作 max-width:最大...
  • 2.使用浮动+百分比布局: index.html <body> <nav> <a href="#"> <img src="./imgs/shop.png" alt=""> <span>京东超市</span> </a> <a href="#"> <img ...
  • 百分比布局

    2020-05-15 22:29:46
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...百分比布局</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul,ol{ .
  • 移动端页面布局:百分比布局、rem布局 1 弹性盒布局(百分比布局) 例如,拉勾网、天猫首页。 好处:充分发挥大手机的优势——显示内容越多;缺点:屏幕过大,间距过大,比例失调。 特点: - 顶部与底部的bar...
  • 流式布局(百分比布局),京东手机端是流式布局 flex弹性布局(强烈推荐),携程网手机端是弹性布局 less+rem+媒体查询布局,苏宁手机端是这个布局 混合布局 2、响应式页面兼容移动端(其次) 媒体查询 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,439
精华内容 15,375
关键字:

html百分比布局