精华内容
下载资源
问答
  • H5样式与布局 -- 常见页面布局

    千次阅读 2018-06-08 11:06:00
    页面整体布局 1.单列布局 特征:定宽、水平居中 常见的单列布局有两种:  1. header、content、footer宽度都相同,其一般不会占满浏览器的最宽宽度,但当浏览器宽度缩小低于其最大宽度时,宽度会自适应。 &...

    页面整体布局

    1.单列布局

    特征:定宽、水平居中

    常见的单列布局有两种:

      1. header、content、footer宽度都相同,其一般不会占满浏览器的最宽宽度,但当浏览器宽度缩小低于其最大宽度时,宽度会自适应。

    <div class="layout">
        <div id="header"></div>
        <div id="container"></div>
        <div id="footer"></div>
    </div>

    对header、container、footer统一设置width或max-width,并通过margin:auto实现居中。

    .layout{
    /*width: 960px;*/
    max-width: 960px;
    margin: 0 auto;
    }

      2. header、footer宽度为浏览器宽度,但content以及header和footer里的内容却不会占满浏览器宽度。

    <div id="header">
        <div class="layout"></div>
    </div>
    <div id="container" class="layout"></div>
    <div id="footer">
        <div class="layout"></div>
    </div>
    
    header、footer的内容宽度为100%,但header、footer的内容区以及content统一设置max-width,并通过margin:auto实现居中。

    .layout{
    /*width: 960px;*/
    max-width: 960px;
    margin: 0 auto;
    }

     

    2.双列与三列布局

     双列布局:

    侧栏固定宽度,主栏自适应宽度。

    主要说说左侧固定右侧自适应的情况,其他情况可类推。

    <div class="page">
        <div class="side">我是绿色</div>
        <div class="main">我是蓝色</div>
    </div>
    
    /*一般布局*/
    .page {
        position: relative;
    }
    .side {
        position: absolute;
        left: 0;
        width: 300px;
        height: 550px;
        background: green;
    }
    .main {
        margin-left: 310px;
        height: 550px;
        background: blue;
    }
    
    /*flex布局*/
    .page {
        display: flex;
    }
    .side {
        flex:0 0 300px;
        height: 550px;
        margin-right:10px;
        background: green;
    }
    .main {
        flex:1;
        height: 550px;
        background: blue;
    }

    三列布局:

    主要说说左右固定中间自适应的情况,其他情况可类推。

    a. float+margin

    原理说明:设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应。

    布局步骤:

    1. 对两边侧栏分别设置宽度,并对左侧栏添加左浮动,对右侧栏添加有浮动。

    2. 对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

    一些说明:

      1. 注意DOM文档的书写顺序,先写两侧栏,再写主面板。若更换,侧栏会被挤到下一列。(圣杯布局和双飞翼布局都会用到)。
      2. 这种布局方式比较简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较重要的主面板。

    <div id="content">
        <div class="sub">sub</div>
        <div class="extra">extra</div>
        <div class="main">main</div>
    </div>
    
    .sub{
        width: 100px;
        float: left;
    }
    .extra{
        width: 200px;
        float: right;
    }
    .main{
        margin-left: 100px; 
        margin-right: 200px;
    }

    b. position+margin

    原理说明:通过绝对定位将两个侧栏固定,同样通过外边距给两个侧栏腾出空间,中间列自适应。

    布局步骤:

    1. 对两边侧栏分别设置宽度,设置定位方式为绝对定位。

    2. 设置两侧栏的top值都为0,设置左侧栏的left值为0, 右侧栏的right值为0。

    3. 对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

    一些说明:

      1. 与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定。

      2. 如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠。

      <div id="content">
        <div class="sub">sub</div>
        <div class="main">main</div>
        <div class="extra">extra</div>
      </div>

    .sub, .extra {
        position: absolute;
        top: 0; 
        width: 200px;
    }
    .sub { 
        left: 0;
    }
    .extra { 
        right: 0; 
    }
    .main { 
        margin: 0 200px;
    }

    c. 圣杯布局(float + 负margin + padding + position)

    原理说明

    为了让浏览器最先渲染main,要把main放DOM最上面,以此为出发点展开的布局。就是听起来高大上的三栏布局。

    布局步骤:

    1. 三者都设置向左浮动。

    2. 设置main宽度为100%,设置两侧栏的宽度。

    3. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。

    4. 设置main的padding值给左右两个子面板留出空间。

    5. 设置两个子面板为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度。

    一些说明

      1. DOM元素的书写顺序不得更改。

      2. 当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。可以通过设置mainmin-width属性或使用双飞翼布局避免问题。

     <div id="bd">         
        <div class="main"></div>        
        <div class="sub"></div>        
        <div class="extra"></div>  
    </div> 
    
    .main {        
        float: left;       
        width: 100%;   
     }  
     .sub {       
        float: left;        
        width: 190px;        
        margin-left: -100%;               
        position: relative;  
        left: -190px;  
    }   
    .extra {        
        float: left;        
        width: 230px;        
        margin-left: -230px; 
        position: relative; 
        right: -230px;  
     }
    #bd {        
        padding: 0 230px 0 190px;   
     }

    c. 双飞翼布局(float + 负margin + margin)

    原理说明

    圣杯布局的改进版,在main元素上加了一层div, 并设置margin。

    布局步骤:

    1. 三者都设置向左浮动。

    2. 设置main-wrap宽度为100%,设置两个侧栏的宽度。

    3. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。

    4. 设置main的margin值给左右两个子面板留出空间。

    一些说明

      1. 圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。

      2. 双飞翼布局不用设置相对布局,以及对应的left和right值。

      3. 通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 190px; ,可以实现sub+extra+main的布局。

    <div id="main-wrap" class="column">
          <div id="main">#main</div>
    </div>
    <div class="sub"></div>        
    <div class="extra"></div>
    
    .main-wrap {        
        float: left;       
        width: 100%;   
     }  
     .sub {       
        float: left;        
        width: 190px;        
        margin-left: -100%;   
    }   
    .extra {        
        float: left;        
        width: 230px;        
        margin-left: -230px; 
     }
    .main {    
        margin: 0 230px 0 190px;
    }

    c. flex 布局

    简单好用

    <div id="content">
        <div class="sub">sub</div>
        <div class="main">main</div>
        <div class="extra">extra</div>
    </div> #content { display: flex; } .sub,.extra { flex:
    0 0 200px; height: 550px; background: green; } .main { flex: 1; height: 550px; background: blue; }

     

    总结:三栏布局一般用 position + margin 方案就好,浏览器允许直接上flex 通吃。

     

    以上是本人目前了解的,若有看客,望不吝拍砖。

     

    参考链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html  (flex语法篇)

    http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (flex实例篇)

    https://segmentfault.com/a/1190000011990028    (有关圣杯与双飞翼)

    转载于:https://www.cnblogs.com/forlong/p/9153522.html

    展开全文
  • html+css常见页面布局(一)

    千次阅读 2018-10-16 23:19:47
    1.div元素居中 1.1居中的div元素宽高...//css样式 .div1{ position:relative; width:100px; height:100px; border:1px solid black; } .div2{ background-color:yellow; position:absolute; width:60px; height:50p...

    1.div元素居中
    1.1居中的div元素宽高已定
    效果图:
    宽高固定的div相对于父元素居中
    代码如下:

    //css样式
    .div1{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid  black;
    }
    .div2{
    background-color:yellow;
    position:absolute;
    width:60px;
    height:50px;
    top:50%;
    left:50%;
    margin-left:-30px;
    margin-top:-25px;
    }
    

    tips:遇到宽高固定的元素居中问题都可以按照这样的样式来设计,父元素应用position:relative/absolute(主要是为了照顾子div中的position:absolute ps:absolute只能相对于除了static已经定位的最近父元素进行定位);
    子元素即本例中的div2定位采用absolute定位,设置四个关键属性:top:50%;left:50%;margin-left:-0.5width;margin-top:-0.5height.
    关于这几个参数只要记住就好了,其中蕴含着可能小学四五年级的高深数学知识,有兴趣的可以去算算看。
    另外只要将margin改为auto也可以实现上述效果。

    .div2{
     background: yellow;
     width:60px;
    height:50px;
    margin:auto;
     top:0;
    bottom:0;
    left:0;
     right:0;
    position: absolute; 
    						}
    

    tips:top;0; left:0; right;0; bottom:0;
    会使得子元素充满容器(如果不指定子元素固定宽高)。固定宽高(父元素)=固定宽高(子元素)+margin(包括左右上下)而margin:auto会使得左右边距一致,从而实现了水平垂直居中。

    1.2无论是否设置了子元素宽高,都能满足(flex布局,相关信息参考文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)

    <style type="text/css">
    			body{
    				border:1px solid black;
    				height:1000px;
    				width:auto;
    				
    			}
    			.div1{
    				position:relative;
    				top:50%;
    				left:50%;
    				margin-top:-25px;
    				margin-left:-25px;
    				height:50px;
    				width:50px;
    				display:-webkit-flex;//设置浏览器兼容性webkit
    				display:flex;//flex布局
    				justify-content: center;//子元素水平居中
    				align-items: center; //子元素垂直居中
    				
    			}
    			.div2{
    				border:1px solid red;
    				height:250px;
    				width:250px;
    				
    			}
    		</style>
    

    效果如下:
    在这里插入图片描述
    ps上面的代码中,我将body设置了高度(body的默认属性是width为最大,而height为auto,虽内容的填充而增大,如不设置,则无法实现子元素的垂直居中),然后应用方法1.1的方法将div1居中,再应用flex布局将div2实现居中。
    (flex属性也很值得细细的琢磨哦 ?)
    1.3使用transform使子元素居中(可不指定宽高)

    <style type="text/css">
    		.div1{
    			position:relative;
    			height:100px;
    			width:100px;
    			border:1px solid blue;
    			
    		}
    		
    			.div2{
    			position:absolute;
    			height:50px;//可不指定宽高
    			width:50px;//可不指定宽高	
    			transform:translate(-50%,-50%);
    			border:1px black solid;
    			top:50%;
    			left:50%;
    		}
    	</style>
    

    指定宽高效果:
    在这里插入图片描述
    不指定宽高向其中填充元素

    <body>
    		<div class="div1">
    			<div class="div2">
    			Hello World!Hello World!
    			</div>
    		</div>
    	</body>
    

    效果图:
    稍微在div2中改了一下text-align:center;
    其他居中对齐方式参考文章
    https://www.cnblogs.com/haoyijing/p/5815394.html
    关于栅格化布局,多元素水平居中等常见布局详见文章
    http://www.cnblogs.com/0603ljx/p/4440449.html

    展开全文
  • 常见的几种页面内容布局方式

    万次阅读 多人点赞 2017-07-27 11:45:44
    常见页面布局,左右自适应布局

    在前端开发中页面布局总是最开始的工作,就像盖楼时,先搭框架,然后再填砖,前端也是一样的,先做好页面的布局工作。
    通过浏览不同的网站发现,页面的布局都是大同小异,总结下来大概就几种:
    第一种:
    单列布局,这是最简洁的一种。整个页面感觉很干净。目前主流的电商网站基本上都是使用这种布局。
    这里写图片描述
    代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>页面布局</title>
            <style>
                .box{
                    width:800px;
                    height: 600px;
                    text-align: center;
                    line-height: 60px;
                }
                .container{
                    width: 805px;
                    margin:0 auto;
                }
                .header{
                    width:100%;
                    height:60px;
                    background: orange;
                }
                .content{
                    position: relative;
                    width:700px;
                    margin:0 auto;
                }
                .content_body{
                    position: relative;
                    width:100%;
                    height:480px;
                    background: olive;          
                }
                .content_footer{
                    position: relative;
                    height:60px;
                    background: orangered;
                    width:100%
                }
            </style>
        </head>
        <body>
             <div class="container">
                 <div class="box">
                    <div class="header">header</div>
                    <div class="content">
                        <div class="content_body">body</div>
                        <div class="content_footer">footer</div>
                    </div>
                 </div>     
             </div>
        </body>
    </html>
    

    第二种:
    两列布局:
    这里写图片描述
    这中布局在一般的技术分享站点比较常见
    这里写图片描述
    上面是csdn博客的首页,布局就是两列布局,只是有一点变化而已,但是万变不离其中,都是从两列布局演变而来的。
    代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>页面布局</title>
            <style>
                .box{
                    width:800px;
                    height: 600px;
                    text-align: center;
                    line-height: 60px;
                }
                .container{
                    width: 805px;
                    margin:0 auto;
                }
                .header{
                    width:100%;
                    height:60px;
                    background: orange;
                }
                .content{
                    position: relative;
                    width:700px;
                    margin:0 auto;
                }
                .content_body{
                    position: relative;
                    width:100%;
                    height:480px;
                    background: olive;          
                }
                .content_footer{
                    position: relative;
                    height:60px;
                    background: orangered;
                    width:100%
                }
                .left{
                    height:100%;
                    width:100px;
                    float: left;
                    background: orchid;
                }
                .right{
                    height:100%;
                    width:100px;
                    float: right;               
                    background:yellowgreen;
                }
            </style>
        </head>
        <body>
             <div class="container">
                 <div class="box">
                    <div class="header">header</div>
                    <div class="content">
                        <div class="content_body">
                             <div class="left"></div>
                             <div class="right"></div>
                        </div>
                        <div class="content_footer">footer</div>
                    </div>
                 </div>
             </div>
        </body>
    </html>

    第三种:
    有两列布局就有三列布局:
    这里写图片描述
    单列,两列,三列都有,那有没有四列…,我们说这只是常见的布局,并不是所有的布局,如果你需要,可以有无数列,只是这些布局是小众而已。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>页面布局</title>
            <style>
                .box{
                    width:800px;
                    height: 600px;
                    text-align: center;
                    line-height: 60px;
                }
                .container{
                    width: 805px;
                    margin:0 auto;
                }
                .header{
                    width:100%;
                    height:60px;
                    background: orange;
                }
                .content{
                    position: relative;
                    width:700px;
                    margin:0 auto;
                }
                .content_body{
                    position: relative;
                    width:100%;
                    height:480px;
                    background: olive;          
                }
                .content_footer{
                    position: relative;
                    height:60px;
                    background: orangered;
                    width:100%
                }
                .left{
                    height:100%;
                    width:100px;
                    float: left;
                    background: orchid;
                }
                .center{
                    float: left;
                    width: 500px;
                    height: 100%;
                    background: blanchedalmond;
                }
                .right{
                    height:100%;
                    width:100px;
                    float: right;               
                    background:yellowgreen;
                }
            </style>
        </head>
        <body>
             <div class="container">            
                 <div class="box">
                    <div class="header">header</div>
                    <div class="content">
                        <div class="content_body">
                             <div class="left"></div>
                             <div class="center"></div>
                             <div class="right"></div>
                        </div>
                        <div class="content_footer">footer</div>
                    </div>
                 </div>
             </div>
        </body>
    </html>
    

    上面的中三种常见的布局都是内容居中的列式布局。这种方式一般内容区的大小是固定的,所以当浏览器窗口大小改变的时候,页面的布局不会改变,只是距离两边的距离会改变。这也是这种布局比较受欢迎的原因之一。
    但是我们在一些管理类网站的时候,他也是列式布局,但是内容不是居中的,而是铺满屏幕:
    这里写图片描述
    这种布局内容区的宽度是不定的,这个时候就需要做自适应了。一般这种布局左边的菜单列宽度是固定的,但是右边的内容区域的宽度是不固定的。
    实现方式一:

    .left{
       float:left;
    }
    .right{
       width:100%;
    }

    这种方式比较简单,但是是有缺陷的,这种布局右边其实是填充满整个一行的,left只是浮动在他上面,造成了左右布局的现象,我们还需要给右边加上左边距,如果左边的菜单栏收缩时,还要动态的去改变右侧内容的左边距。这样是比较麻烦的。
    实现方式二:
    采用flex:

    .content{
      display:flex;
    }
    .left:{
      width:100px;
    }
    .right:{
      flex:1
    }

    这种方式最简单,完全符合我们的需求,但是他用的是弹性布局,兼容性你懂得。
    实现方式三
    css样式计算calc();

    
    .left:{
      float:left;
      width:100px;
    }
    .right:{
      float:right;
      width:100%-100px;
    }

    calc这个属性也是css3提供的。所以兼容性…….
    实现方式四:
    宽度采用百分比的方式:

    .left{
      width:10%
    }
    .right{
      height:85%;
    }

    这种方式的优势是兼容性好,但是,当页面宽度变化时,页面内容会被压缩变形。

    实现方式五:
    就是通过计算,浏览器宽度减去左边菜单宽度,当浏览器宽度改变的时候,再计算,这种方式比较耗浏览器性能,如果一定要兼容到低版本IE,一般不考虑这种方式。

    如果有更好的布局方式,欢迎大家来交流交流

    展开全文
  • 五种最常见的CSS页面布局

    千次阅读 2019-03-04 06:51:48
    本文主要介绍了实现页面布局的几种方法。 以常见的左中右布局为例。 2. 代码实现 公共样式部分 html * { margin: 0; padding: 0; } .layout { margin-bottom: 20px; } .layout article { width: 100%; ...

    1、前言

    • 本文主要介绍了实现页面布局的几种方法。
    • 以常见的左中右布局为例。

    2. 代码实现

    • 公共样式部分
        html * {
          margin: 0;
          padding: 0;
        }
        .layout {
          margin-bottom: 20px;
        }
        .layout article {
          width: 100%;
         }
        .layout article > div {
          min-height: 100px;
        }
        .layout article .left {
          width: 300px;
          background: red;
        }
        .layout article .center {
          background: orange;
        }
        .layout article .right {
          width: 300px;
          background: blue;
        }
    复制代码
    • float布局。
      <!-- 浮动布局 -->
      <section class="layout float">
        <style>
          .layout.float .left {
            float: left;
          }
          .layout.float .right {
            float: right;
          }
        </style>
        <article class="left-center-right">
          <div class="left"></div>
          <div class="right"></div>
          <div class="center">
            <h2>这是float布局</h2>
            <p>这是一段文字</p>
            <p>这是一段文字</p>
          </div>
        </article>
      </section>
    复制代码
    • absolute布局
     <!-- 定位布局 -->
      <section class="layout absolute">
        <style>
          .layout.absolute .left-center-right > div {
            position: absolute;
          }
          .layout.absolute .left {
            left: 0;
          }
          .layout.absolute .center {
            left: 300px;
            right: 300px;
          }
          .layout.absolute .right {
            right: 0;
          }
        </style>
        <article class="left-center-right">
          <div class="left"></div>
          <div class="center">
            <h2>这是absolute布局</h2>
            <p>这是一段文字</p>
            <p>这是一段文字</p>
          </div>
          <div class="right"></div>
        </article>
      </section>
    复制代码
    • flex布局
      <!-- flex布局 -->
      <section class="layout flex">
        <style>
          .layout.flex {
            margin-top: 140px;
          }
          .layout.flex .left-center-right{
            display: flex;
          }
          .layout.flex .center {
            flex: 1;
          }
        </style>
        <article class="left-center-right">
          <div class="left"></div>
          <div class="center">
            <h2>这是flex布局</h2>
            <p>这是一段文字</p>
            <p>这是一段文字</p>
          </div>
          <div class="right"></div>
        </article>
      </section>
    复制代码
    • table布局
      <!-- table布局 -->
      <section class="layout table">
        <style>
          .layout.table .left-center-right {
            display: table;
            height: 100px;
          }
          .layout.table .left-center-right > div{
            display: table-cell;
          }
        </style>
        <article class="left-center-right">
          <div class="left"></div>
          <div class="center">
            <h2>这是table布局</h2>
            <p>这是一段文字</p>
            <p>这是一段文字</p>
          </div>
          <div class="right"></div>
        </article>
      </section>
    复制代码
    • grid布局
      <!-- grid布局 -->
      <section class="layout grid">
        <style>
          .layout.grid .left-center-right {
            display: grid;
            grid-template-columns: 300px auto 300px;
          }
        </style>
        <article class="left-center-right">
          <div class="left"></div>
          <div class="center">
            <h2>这是grid布局</h2>
            <p>这是一段文字</p>
            <p>这是一段文字</p>
          </div>
          <div class="right"></div>
        </article>
      </section>
    复制代码

    3、效果如下

    当增加内容时,如图二:

    4. 各种布局的优缺点

    1. float布局的兼容性比较好。缺点是如图二, 解决办法:给橙色块添加overflow: hidden(生成了一个BFC)。浮动元素父元素还存在高度塌陷问题,解决方法: 父元素生成一个BFC。
    2. absolute布局的有点是简单直接,兼容性好。缺点,脱离了文档流。
    3. flex布局的优点,布局简单、灵活,移动端友好;缺点是ie8以下不兼容。
    4. table布局的优点是兼容性好,有时候布局相对简单。缺点是它是对TABLE标签的不正规使用,一直以来被大家所诟病。当需要内容高度不一致时并不适应。
    5. grid布局优点,是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。缺点是对低版本浏览器兼容性不好。
    展开全文
  • 1,position:absolute 定位后元素超出页面; 解:需要设置父级元素 position:relative。 2,z-index 设置无效; 解:z-index仅对position relative或是absolute定位的元素有效。 ...
  • 知乎页面布局

    千次阅读 2018-08-16 10:57:17
    知乎页面布局 知乎页面布局简洁明了,整体居中显示,采用上下结构,上面为顶部,提供导航、搜索、用户功能,下面为页面内容,内容左右分布,左边为主内容,主要是知乎上一些文章的摘要,右边为侧边栏,为用户提供...
  • 本文总结了个人在前端开发中经常遇到的布局问题,长期更新
  • <script>... //获取当前页面高度 $(window).resize(function(){ console.log("窗口大小变化") //当窗体大小变化时 var thisHeight = $(this).height(); //窗体变化后的高度 ...
  • 百度前端技术学院,任务七:实现常见的技术产品官网的页面架构及样式布局 知识点: 1)引入阿里symbol图标 2)采用FLEX布局 3)header实现固定div(ul使用flex布局的justify-content: space-between + li去除黑点...
  • Uni-App - 页面样式布局

    万次阅读 2019-02-19 11:28:56
    重要说明 请删除 app.vue 中的全局...与传统 web 页面不同,px 是相对于基准宽度的单位,已经适配了移动端屏幕,其原理类似于 rem。 PS:uni-app 的基准宽度为 750px。 开发者只需按照设计稿确定框架样式中的 p...
  • 今天我们主要聊聊关于网站页面布局的一些话题,网页设计虽然千变万化,如果你是个细心的设计师一定会发现其中的一些端倪,就页面布局而言,常用的布局方式其实也就那么几个,接下来港夕科技就和大...
  • 实现页面布局

    2019-02-21 13:03:21
    当我们开发一个网站的时候,有几种我们常见页面布局的方法,比如多栏布局页面、弹性布局页面。利用布局的方法使我们的页面更完整更美观。下面是我用代码实现的多栏布局页面(如下图) 首先创建头部一个div为box类...
  • 前端页面布局

    千次阅读 2018-11-08 22:03:30
    页面元素设置固定的宽度,高度,单位用px,当窗口缩小时,会出现滚动条,针对不同分辨率的手机端,分别写入不同的样式文件。 例子: 这就是典型的静态布局,缩小时有滚动条。 自适应布局 创建多个静态布局,每...
  • 页面布局之grid布局

    千次阅读 2018-02-21 17:35:20
    Grid布局 首先,从概念上来说这是一个网格布局,核心是网格容器(Grid Container)和网格项(Grid Item),也就是parent和children的关系。与flex布局相类似 网格系统引入了新的单位:分数fr,每一个fr单元分配一...
  • 做一个简单的页面布局 基本结构如下 <body> <!-- svg图标 --> <div style="display: none;"> <svg> <symbol id="menu" viewBox="0 0 1024 1024"> <path d="M376.832 474.112H...
  • 项目中用到的分类界面要的效果类似于京东移动端的分类页面:(两侧都可滑动且互不影响) 效果如图: html代码如下: 柴米油盐<span></span> 柴米油盐1</li>
  • DWZ查询页面布局改造

    千次阅读 2015-05-14 10:44:44
    DWZ查询页面布局改造
  • 页面布局之圣杯布局

    千次阅读 2016-04-26 20:41:08
    圣杯布局作为我们平时处理三列布局来说还是很有用的,一般情况下他要求的是中间宽度自适应,两边的宽度是固定的,这样能够在页面解析的时候能使中间的主要内容先解析。 首先写好布局和基本的样式如下 布局 ...
  • HTML 页面布局

    2018-10-15 19:41:17
    2.10页面布局概述 页面布局概述 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片...
  • jsp页面样式布局突然全没了

    千次阅读 2019-06-28 11:44:32
    今天做项目的时候,出现一个很奇怪的事情,就是项目一直是好的,结果睡一觉起来,辛辛苦苦做的页面全乱了,样式布局什么的全没了。以为是tomcat或eclipse出了问题,所以把这两者都重装了一遍,发现问题还是没有...
  • 一、什么是 flex 布局 Flex 是 Flexible Box 的缩写,意为"灵活的盒子"或"弹性的盒子",所以 flex 布局一般也叫作"弹性布局" 二、基本概念 什么是 flex 容器(flex container)? 采用 flex 布局的元素,称为 ...
  • FlexBox页面布局视频教程

    千人学习 2018-10-24 13:43:48
    FlexBox页面布局设计视频培训课程,设计师进行页面设计、布局的必备技能,该教程主要讲解FlexBox的容器的知识点和容器内项目的知识点;适合网页/移动端/微信等的页面布局设计。
  • 强制改变CSS样式页面布局

    千次阅读 2018-08-15 20:46:33
    如果使用通用的控件,有固定的CSS,而需求只需要针对其中一个页面做出特定的样式,在不改变其他页面的同时,使用统一控件;可以把class拉出来,强制修改样子,放到需要修改的页面里, &lt;style&gt; ... ...
  • 文献种类:项目研发技术文献;...完成模块功能:页面静态与动态布局 一、静态布局 html与css3 1.html源代码截图 2.css3代码截图 二、动态布局 J...
  • 功能决定成度,样式决定美感度,在移动H5页面布局上规范必然时不可少。 在H5页面 UI设计图的基础,如何根据设计图片写出比例相同, 在不同移动设备上页面上的样式依然保持一致。响应式页面,rem布局的使用方法。 1...
  • Bootstrap弹性页面布局

    千次阅读 2019-05-17 14:37:49
    Bootstrap弹性页面布局 所谓的弹性布局就是适应多款浏览器 不同的宽度布局的显示相对来说占的百分比是一样的 甚至宽度不足时还会自动换行剩余元素等分空间 使得页面布局在不同的浏览器中显示不混乱 在这里我要讲的是...
  • 页面布局整体思路

    2020-04-22 15:11:04
    页面布局第一准则。 3. 一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置。即页面布局第二准则。 4. 制作 HTML 结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要。 5. 所以, 先理...
  • 微信小程序页面布局

    万次阅读 多人点赞 2018-03-27 11:48:43
    一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。 2.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态...
  • 移动端rem布局导致页面加载瞬间无样式

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 162,056
精华内容 64,822
关键字:

常见的页面布局样式