精华内容
下载资源
问答
  • 前端页面布局

    千次阅读 2018-11-08 22:03:30
    前端布局的几个概念 我今天学习了几种布局的方式,大概有五种,静态布局,自适应布局,弹性布局,流式布局,响应式布局。 静态布局页面元素设置固定的宽度,高度,单位用px,当窗口缩小时,会出现滚动条,针对...

    前端布局的几个概念

    我今天学习了几种布局的方式,大概有五种,静态布局,自适应布局,弹性布局,流式布局,响应式布局。

    静态布局

    给页面元素设置固定的宽度,高度,单位用px,当窗口缩小时,会出现滚动条,针对不同分辨率的手机端,分别写入不同的样式文件。
    例子:在这里插入图片描述
    这就是典型的静态布局,缩小时有滚动条。

    自适应布局

    创建多个静态布局,每个静态布局对应一个屏幕分辨率,使用@media媒体查询技术为不同分辨率定义布局,我们看到的页面,里面的元素位置会变化而大小不变。
    例子:亚马逊
    PC端:
    在这里插入图片描述
    记住现在的域名

    下面是移动端:
    在这里插入图片描述
    域名是没有变的,说明是一个网站,(这个一会看一下有写两套代码的,和这个不一样),在移动端显示的就适应手机屏幕分辨率。
    有的网站在pc端和移动端就是两个域名,相当于两个网站
    大街网的pc端显示:
    在这里插入图片描述
    大街网移动端显示:
    在这里插入图片描述
    这个就不是自适应布局,它在pc端是静态布局在移动端是自适应布局。

    弹性布局

    例子:
    在这里插入图片描述
    著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    链接:http://caibaojian.com/mobile-responsive-example.html
    来源:http://caibaojian.com

    它的页面有一个特点,就是:

    顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变
    中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息都位于条目的左边,薪资都位于右边。
    见:https://www.cnblogs.com/jerehedu/p/7358329.html

    流式布局

    页面元素的宽度按照屏幕进行适配调整,元素的大小会变化,位置不会变化,宽度是百分比,高度按px写。
    瀑布流式的页面布局适于应用在社区类浏览型页面中,这样的页面往往信息量大,采用瀑布流式布局浏览体验更为流畅。但缺点则是信息不能完全被关注,容易漏读信息。
    转自:
    https://www.chinaz.com/web/2017/0210/655519.shtml

    使用页面 左侧固定+右侧自适应 左右固定宽度+中间自适应

    响应式布局

    可以把响应式布局看做是流式布局和自适应布局设计理念的融合
    最常见的响应式框架就是bootstrap
    例子:CSDN
    在这里插入图片描述
    很明显引入了bootstrap框架。
    bootstrap的学习见:http://www.runoob.com/bootstrap/bootstrap-tutorial.html

    展开全文
  • 快速掌握前端页面布局思维要点 所要达到的标准: 对于前端的布局能做到信手拈来的程度,就说明已经初见成效了。 (到了这种程度,自己会知道的) 底层: 浏览器会将HTML标签渲染成 dom 树,形成一种树形的结构,...

    快速掌握前端页面布局思维要点

    所要达到的标准:

    对于前端的布局能做到信手拈来的程度,就说明已经初见成效了。

    (到了这种程度,自己会知道的)

    底层:

    浏览器会将HTML标签渲染成 dom 树,形成一种树形的结构,再由渲染引擎解析绘制。

    对于布局指导视为归结为以下步骤

    • 整体结构分块,如弹性盒子

    • 局部结构分块,如弹性盒子

    • 自顶向下、逐步细化

      谨记:不要着急动手!!!越早规划好整体布局,后期修改的代码就越少,成本就越低。

    实际项目

    • 产品经理和UI/UE设计好原型图

    • 划分好整体

    • 自顶向下,逐步细化

    谨记:方案必须时时刻刻确认是确定的!! 否者中途返工成本巨高。

    diplay

    作用应用场景支持
    flex开启弹性盒子
    inline应用元素前后不换行IE8
    block应用元素前后换行
    list-item列样式
    none隐藏
    inherit继承父类的display值

    position

    作用
    absolute生成绝对定位脱离文档流,父类为第一个祖先(html)
    fixed相对于浏览器窗口定位
    relative相对定位,普通文档流
    static默认
    inherit继承父类的position

    常用垂直水平居中

    // 脱离文档流的方式
    // 可以搭配父类加relative使用,回归文档流
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    // 弹性盒子的居中
    // 需要在父类中使用
    display: flex;
    // 左右
    justify-content: center;
    // 上下
    align-items: center;
    
    展开全文
  • ASP.NET MVC 搭建简单网站 --1.前端页面布局和基本样式实现-附件资源
  • 前端页面布局(grid, fiex)

    万次阅读 2021-07-27 12:52:25
    行内元素 设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。 B.grid-template-columns 定义每一列的列宽 grid-template-rows ...

    flex

    1. display: flex;

    2. 容器属性

      a. flex-direction 排序
      row(默认值):主轴为水平方向,起点在左端。
      row-reverse:主轴为水平方向,起点在右端。
      column:主轴为垂直方向,起点在上沿。
      column-reverse:主轴为垂直方向,起点在下沿。

      b. flex-wrap 换行
      nowrap(default) 不换行
      wrap 换行 第一行在上方
      warp-reverse 换行 第一行在下方

      c. flex-flow ( a, b 的简写 )
      flex-flow: || ;

      d. justify-content main axis 的对齐方式
      flex-start(默认值):左对齐
      flex-end:右对齐
      center: 居中
      space-between:两端对齐,项目之间的间隔都相等。
      space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
      space-evenly
      e. align-items cross axis 的对齐方式
      flex-start:交叉轴的起点对齐。
      flex-end:交叉轴的终点对齐。
      center:交叉轴的中点对齐。
      baseline: 项目的第一行文字的基线对齐。
      stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

      f. align-content (当有多条main axis时) 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
      flex-start:与交叉轴的起点对齐。
      flex-end:与交叉轴的终点对齐。
      center:与交叉轴的中点对齐。
      space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
      space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
      stretch(默认值):轴线占满整个交叉轴。

    3. 项目的属性 ( css要定义到每一个项目 )
      a.order 定义项目的排列顺序。数值越小,排列越靠前,默认为0
      order: ;

      b.flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
      flex-grow: ; /* default 0 */

      c.flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
      flex-shrink: ; /* default 1 */

      d.flex-basis 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

      e.flex ( b c d 的缩写 )
      flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

      f.align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    grid

    1. 容器属性
      A.display
      grid 指定一个容器采用网格布局
      inline-grid; 行内元素
      设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

      B.grid-template-columns 定义每一列的列宽
      grid-template-rows 定义每一行的行高

       grid-template-rows: 100px 100px
      
       repeat(number, args) 重复
           repeat(2, 10, 20, 30) -> 10 20 30 10 20 30
      
       auto-fill
           grid-template-columns: repeat(auto-fill, 100px);
      
       fr (fraction 的缩写,意为"片段")
           grid-template-columns: 1fr 2fr; /*- 后者是前者的两倍-*/
      
       minmax() 函数产生一个长度范围,表示长度就在这个范围之中
           grid-template-columns: 1fr 1fr minmax(100px, 1fr);
      
       auto 由浏览器自己决定
      
       网格线名称 c1 c2 c3 r1 r2 r3
             grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
      

      C.grid-row-gap 行与行的间隔(行间距)
      grid-column-gap 列与列的间隔(列间距)
      grid-gap 上面两个的简写

      D.grid-template-areas
      grid-template-areas: ‘a a a’
      ‘b b b’
      ‘c c c’;

      E.grid-auto-flow
      grid-auto-flow: row; 先行后列(default)
      grid-auto-flow: column; 先列后行

       grid-auto-flow: row dense; "先行后列",并且尽可能紧密填满,尽量不出现空格。
      

      F.justify-items 属性设置单元格内容的水平位置(左中右)
      align-items 属性设置单元格内容的垂直位置(上中下)

       start:对齐单元格的起始边缘。
       end:对齐单元格的结束边缘。
       center:单元格内部居中。
       stretch:拉伸,占满单元格的整个宽度(默认值)。
      

      place-items 上面两个的简写

      G.justify-content 属性是整个内容区域在容器里面的水平位置(左中右)
      align-content 属性是整个内容区域的垂直位置(上中下)

       start - 对齐容器的起始边框。
       end - 对齐容器的结束边框。
       center - 容器内部居中。
       stretch - 项目大小没有指定时,拉伸占据整个网格容器。
       space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
       space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。
       space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
      

      place-content

      H.grid-auto-columns
      grid-auto-rows

      I. grid-template
      grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
      grid
      grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

    2. 项目属性
      A.
      grid-column-start属性:左边框所在的垂直网格线
      grid-column-end属性:右边框所在的垂直网格线
      grid-row-start属性:上边框所在的水平网格线
      grid-row-end属性:下边框所在的水平网格线

       grid-column
       grid-row
      

      B.grid-area

      C.justify-self 属性设置单元格内容的水平位置(左中右)
      align-self 属性设置单元格内容的垂直位置(上中下)

       start:对齐单元格的起始边缘。
       end:对齐单元格的结束边缘。
       center:单元格内部居中。
       stretch:拉伸,占满单元格的整个宽度(默认值)。
      

      place-self

    展开全文
  • 充值小程序前端页面布局

    千次阅读 2017-08-15 09:16:48
    包括小程序前端代码和服务器后端代码。 小程序前端主要有4种类型的文件 1、 index.js 2、 index.wxml 3、 index.json 4、 index.wxss index表示文件名。 各文件

    昨天我们看了一些企业,

    在他们的业务中使用充值小程序。


    我们就要实现这样的充值小程序,

    包括小程序前端代码和服务器后端代码。


    充值小程序前端页面

    小程序前端主要有4种类型的文件

    1、 index.js

    2、 index.wxml

    3、 index.json

    4、 index.wxss

    index表示文件名。


    各文件的主要作用如下:

    js文件实现逻辑,使用的是 es6 的语法,但是做了进一步封装,有些函数不能使用。

    wxml文件,实现页面框架布局,类似 html,但不能直接使用 html 标签。只能使用小程序自己封装的组件,有些组件跟 html 标签相同。可以参考小程序开发文档中的组件介绍。

    wxss文件,实现页面样式,css3中的语法可以使用。

    json文件,可以对当面页面进行一些选项设置,比如页面标题等。


    这些基础知识点,

    子恒老师不会在视频课程中讲解,

    需要你自己看官方文档,

    做小程序开发起码要把官方文档看5遍以上。


    今天我们来实现充值小程序的前端布局和效果…

    充值小程序前端页面布局视频教程在线观看

    http://edu.csdn.net/course/detail/5048/91583

    展开全文
  • 前端页面兼容问题主要表现在我们所做的页面在不同浏览器显示会有所不同,目前主要的兼容性问题比较多的是IE6和IE7,另外针对html5和css3新标签,比如css3动画,媒体查询,画布,视频等暂时不做讨论,下面就针对常见的...
  • 本文仅仅是针对于项目经验不足,在实际进行前端页面开发的时候,特别容易遇到的几个问题。 问题一、box-sizing属性 这是关于盒模型的问题,因为在某些情况下,需要对某些元素进行box-sizing的设置,刚开始我并没有...
  • 页面布局的方式——前端

    千次阅读 2019-05-31 08:24:20
    文章目录页面布局的方式——前端页面布局的方式双飞翼布局多栏布局弹性布局(Flexbox)瀑布流布局流式布局(Fluid)响应式布局注 页面布局的方式 页面布局的方式主要有:双飞翼、多栏、弹性、流式、瀑布流、响应式...
  • 前端页面几大布局

    千次阅读 2019-05-15 15:58:12
    从纯html结构加上css代码堆出来的页面,到类似bootstrap框架的栅格化布局,再到flex流式布局,随着不同框架、新css特性的诞生,前端页面整体布局,越来越灵活,代码量越来越小,不同浏览器兼容性越来越好。...
  • 所有五种HTML页面布局技术详解 静态布局 自适应布局 流式布局 响式布局 弹性布局 . . .
  • 前端页面5种布局方式

    千次阅读 2019-12-24 16:13:07
    前端基本布局分大致5种,table布局,float 布局,absolute布局,flexbox布局,grid布局。假设高度已知,写出三栏布局,其中左右宽度各为300px,中间自适应。 table 布局 在实际的项目开发过程中,不建议用table进行...
  • 实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px 解决思路 侧边栏aside通过负值左外边距得以和content共处一行 真正的自适应内容则放置在content的内部,使用右外边距得以和aside保持固定距离 ...
  • 前端:css页面布局总结

    千次阅读 2016-12-05 22:11:24
    标准语言(css),行为标准语言(DOM,ECMAScript)组成。这个标准倡 ...今天主要对css的页面布局做过总结: css的页面布局模型分为三大种模式: (1)流动模型(标准文档流)(2)浮动模型(定位)
  • python前端之移动端页面布局

    千次阅读 2018-09-15 17:56:16
    移动端页面布局 移动端app分类 1、Native App 原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C 2、Hybrid App 混合型app手机应用程序 混合使用原生的程序和...
  • 前端项目页面布局(流式+flex)

    千次阅读 2019-08-26 10:07:58
    页面布局:流式布局(百分比)+弹性布局(flex)。 1.将页面 html,bodey设置宽高百分百 html,body{ width: 100%; height: 100%; } 2.使用flex弹性布局 <style> .box{ display: flex; fl...
  • .test{ z-index: 999; }
  • 前端网页 (页面布局) 教程

    千次阅读 2020-09-18 17:17:54
    页面布局 一.盒模型: 1.所谓盒模型,就是浏览器为页面中的每个HTML元素(标签)生成的矩形盒子。这些盒子们都要按照可见 板式模型在页面上排布。可见的板式模型主要由三个属性控制: (1)position属性:position属性...
  • 前端页面美食天下网页——css布局说明文档,单纯的css页面
  • 前端flex布局

    千次阅读 2018-12-20 17:56:53
    因此将Flex布局相关属性整理如下,搞清楚了这个布局,小程序开发的页面布局就不在话下了。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,...
  • 山东理工职业学院单元教学过程设计首页 课程所属院部软件工程学院 2016--- 2017学年 第二学期 课程名称 Web前端开发 任课教师 单元标题 CSS页面布局 上课地点 8208微机室 学时 2 授课班级 授课时间 第 周 第 周 第 ...
  • 3.3 Web前端:静态页面布局实例

    千次阅读 2018-11-21 01:00:24
    经过对前面知识点的巩固和加深,我们可以使用前面学习到的知识来制作实际开发中碰到的一些典型的布局,以此来达到综合应用知识的目的。 1、特征布局:翻页(所需知识点:盒模型、内联元素) 2、特征布局:导航条...
  • 网页前端高级编程-实验报告-DIV静态页面布局
  • 1.flex-direction:设置容器内部元素的排列方向 row: 定义排列方向 从左到右 row-reverse: 从右到左 column: 从上到下 column-reverse: 从下到上 图片介绍 flex-direction:row ...flex-directi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 96,789
精华内容 38,715
关键字:

前端页面布局