精华内容
下载资源
问答
  • 【移动端有哪些常见布局方式? 】 ​ 大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员 今天给大家分享一下,修真院官网css任务13,深度思考中的知识点——移动端有哪些常见布局方式?...

    这里是修真院前端小课堂,每篇分享文从

    【移动端有哪些常见的布局方式? 】

    大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员

    今天给大家分享一下,修真院官网css任务13,深度思考中的知识点——移动端有哪些常见的布局方式?

    1.背景介绍

    随着智能手机的普及以及社会的发展,传统的网站布局已经无法适应现状,我们编写的网页不仅仅要展示在电脑上,也要展示在移动设备上,而移动设备种类繁多,一般的电脑端的页面布局在手机上无法完全适应,所以在手机端上我们要重新布局。

    2.知识剖析

    2.1固定布局

    固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

    demo

    2.2流体布局

    流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,看到百分比,你应该想到,这将提供了很强的可塑性和流动性。换句话说,通过设置了百分比,你将不需要考虑设备尺寸或者屏幕宽度大小了,结论就是,你可以为每种情形找到一种可行的方案,因为你的设计尺寸将适应所有的设备尺寸。

    demo

    2.3FLEX布局

    flex也称为弹性布局,他会根据页面的剩余宽度自动分配空间。

    2.4栅格布局

    bootstrap是一个比较流行的响应式前端框架,利用bootstrap的栅格系统可以实现响应式的移动端布局。

    3.常见问题

    移动端和PC端的区别

    4.解决方案

    第一: PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化。

    第二: 在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的

    第三:在移动端有很多网页是可以横屏看也可以竖屏看,并且很多屏幕的饿分辨率都是不一样的,所以只要牵涉到移动端都要考虑用响应式布局

    第四: 在动画处理上,PC端由于要考虑IE的兼容性,所以通常使用JS做动画的通用性会更好一些,但是CSS3做了很大的牺牲, 而在手机端,如果要做一些动画、特效等,第一选择是CSS3, 既简单、效率又高。

    第五:Pc端的交互是鼠标,键盘的交互而移动端变成了触摸,手势的交互

    5.编码实战

    6.扩展思考

    手机端软件界面设计中的几种常用布局样式

    网址

    7.参考文献

    参考一:前端:移动端和PC端的区别

    参考二:移动端布局浅谈

    8.更多讨论

    你们觉得响应式好呢,还是手机和PC端分开来写?

    网址

    9.鸣谢

    感谢大家观看

    BY :王姝丽

    展开全文
  • 由于智能手机的普及,越来越多的人在手机上购物,工作和浏览网页。尽管传统的PC站也可以在手机上访问,但是体验...常见的响应式网站布局有哪些?1,背景图片+简单的多栏布局背景大图和简单的多列布局是常见的布局...

    由于智能手机的普及,越来越多的人在手机上购物,工作和浏览网页。尽管传统的PC站也可以在手机上访问,但是体验非常糟糕,响应式网站的出现帮助解决了这一问题。当前的大多数网站案例都是响应式的,响应式网站非常适合用户的浏览和使用习惯,适用范围广。以下是北京网站建设公司东浩联创的小编给大家整理的的常见响应网站的布局。

    常见的响应式网站布局有哪些?

    1,背景图片+简单的多栏布局

    背景大图和简单的多列布局是常见的布局形式。一方面,背景图像可以充分吸引用户的注意力并激发用户的兴趣。另一方面,多列布局以简洁明了的方式显示了次要元素,进一步使用户渴望点击和浏览。此外,使用此布局模式的网站不仅看起来干净,令人耳目一新,具有很强的视觉表现力,而且还突破了断点的限制,无论设备屏幕大小如何,都能为用户显示足够的内容。供用户浏览和探索,做到真正的响应。

    2,单页单列布局

    如果您没有太多内容,或者只想制作主题页面,那么近年来热门的单页式设计非常适合您。顾名思义,它非常适合显示极简的内容。单页设计最适合小型网站或小型项目。它可以使简介页面更简洁,也可以使简单信息更加突出和重要。

    112d5d3cce39a2af4cfe14f71e492a1f.png

    北京网站建设公司—东浩联创

    3,不规则栅格

    不规则的栅格布局可以显示大量内容,而不会造成冗余和繁琐。它具有规律性和可预测性,并且用户可以更快地获得所需的信息。此外,自定义栅格非常自由,网站管理员可以根据自己的需要安排网格,并且布局也是独一无二的。自定义栅格布局可能是设计师作品中最常见的布局,并且不同的设计师通常对网格系统有不同的理解和使用。

    4,经典的F风格布局

    研究表明,用户在浏览Web时习惯于沿F式阅读。这意味着用户喜欢从左到右阅读,然后向下移动并继续从左到右阅读。与此F风格阅读模式相对应的Web布局是F风格布局,最关键的信息沿字母F的形状放置。这迎合了用户的阅读习惯,使用户易于与网站交互。

    5,简约分层

    精简主义是一种非常流行的设计风格。精简主义为网站提供了足够的留白,可以使网站的重点更加突出。在极其简化的页面上添加几层可以使信息更有层次。使访问者在浏览时拥有更轻松的氛围。

    文章出自:北京网站制作公司-东浩联创 http://www.donhonet.net 转载请注明出处

    展开全文
  • 移动端有哪些常见布局方式?

    万次阅读 2018-06-05 10:44:09
     今天给大家分享一下,修真院官网css任务13,深度思考中的知识点——移动端有哪些常见布局方式? 1.背景介绍 随着智能手机的普及以及社会的发展,传统的网站布局已经无法适应现状,我们编写的网页不仅仅要展示在...

     大家好,我是IT修真院深圳分院第九期的学员徐炜,一枚正直、纯洁、善良的前端程序员。

     今天给大家分享一下,修真院官网css任务13,深度思考中的知识点——移动端有哪些常见布局方式?

     1.背景介绍

     随着智能手机的普及以及社会的发展,传统的网站布局已经无法适应现状,我们编写的网页不仅仅要展示在电脑上, 也要展示在移动设备上,而移动设备种类繁多,苹果、小米、三星等等,各个手机的屏幕大小不一,一般的电脑端的页面布局在手机上无法完全适应,那么如何让一个页面匹配各个页面呢? 现在我们来看看下面的几种布局方式。

     2.知识剖析

     1>.固定布局

     固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。

     演示demo

     2>.流动布局

     流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同,流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活,添加元素时,需要更改其他元素的值。

     演示demo

     3>.bootstrap布局

     bootstrap是一个比较流行的响应式前端框架,利用bootstrap的栅格系统可以实现响应式的移动端布局。栅格系统:Bootstrap中定义了一套响应式的网格系统,其使用方式就是将一个容器划分成12列,然后通过col-xx-xx的类名控制每一列的占比, 在使用的时候,我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6,以此完成布局。

     演示demo

     4>.媒体查询+REM布局

     使用媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位,会根据根节点的字体大小来计算的,使用媒体查询和rem可以实现移动端的响应式。

     演示demo

     5>.flex布局

     Flexbox是CSS3引入的新的布局模式,也称为弹性布局,他会根据页面的剩余宽度自动分配空间。 它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素, 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局,而网格布局更适合那些更大规模的布局。

     演示demo

     3.常见问题

     移动端字体单位font-size选择px还是rem?

     4.解决方案

     由于手机屏幕较小,且各种屏幕尺寸不同,会导致单位字体变化,显得格格不入。 移动端的字体选择。对于只需要适配手机设备,使用px即可。对于需要适配各种移动设备, 例如需要适配iPhone和iPad等分辨率差别比较挺大的设备,就要使用rem了,有时还需要配合媒体查询一起使用。

           

      5.编码实战

      见dome里。

      6.扩展思考

      移动端和PC端的区别?

     (1)PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化。

     (2)在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的。 

     (3)在布局上,移动端开发一般是要做到布局自适应的,我使用的一直是rem布局,感觉很好。

     (4)在动画处理上,PC端由于要考虑IE的兼容性,所以通常使用JS做动画的通用性会更好一些,但是CSS3做了很大的牺牲, 而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3, 既简单、效率又高。

     (5)一般pc端用jquery,移动端用zepto,因为移动端的流量还是比较重要的, 所以引入的资源或者插件,能小则小,一个30k的资源和一个80k的资源,在移动端的差别还是挺大的。

     (6)比如在手机上的300ms的延迟,这在PC端是没有的,如果我们希望做成webapp,那么自然就不需要这300ms的延迟,所以可以使用hammer-time.js来移除这300ms的延迟。

      7.参考文献

      参考一: 移动Web开发中的常见布局方式及一些常见问题

      参考二:浅谈前端移动端页面开发(布局篇)

      参考三:10分钟学会基本的 Flexbox 布局

      8.更多讨论

     (1)如何模拟按钮的hover效果?

     (2)如何在移动端禁止用户选中内容?

     (3)如何解决移动端click屏幕产生200-300ms的延迟响应问题?

      PPT 视频链接


      感谢叶紫阳师兄和王姝丽学姐,此教程是在他们之前技术分享的基础上完善而成。 

      今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

    展开全文
  • 网站导航是每个网站中最重要的组成部分,网站...在进行网站建设的过程中,网站导航设计都有哪些方法,常见的网站导航又是怎 么布局和体现的呢?   一、网站底部横向导航   最常见的网站导航,符合用户浏览...
    网站导航是每个网站中最重要的组成部分,网站导航可以告知用户网站整体内容有哪些,能够为用户提供些什么,直接引导用户快速获得自己想要的信息。一个有吸 引力的导航能够引导用户浏览更多的网站内容,增加用户在网站网站中的停留时间。在进行网站建设的过程中,网站导航设计都有哪些方法,常见的网站导航又是怎 么布局和体现的呢?  
     
      一、网站底部横向导航  
      最常见的网站导航,符合用户浏览习惯,用户进入网站之后,可第一眼看到网站导航的位置,一般位于网站的头部部分,且占用整个网站的空间,这种导航适用 于网站栏目在8-10个左右的网站。也是用户浏览网站最常见的导航,可方便告知用户网站分为哪些板块。在导航上面加入下拉菜单,可增加网站于用户的互动 性,也可支持更多的网站链接,用户可不用滚动滚动条即可直接进入网站任何一个栏目界面。  
     
      二、HTML5抽屉式导航  
      此类导航多见于手机网站,由于手机屏幕大小的限制,大多手机网站能够更大范围展示给用户产品信息,会把网站导航设计为抽屉式导航。默认情况下是不直接 显示导航的,需要用户点击某个按钮,才会动态的显示出导航。抽屉式导航一般以竖向排列,位于网站的左侧或右侧,也可根据需求加入横向二级菜单,可在有限的 屏幕内最大范围为用户随时提供最全的有效连接,不必用户来回滚动屏幕去寻找其他栏目的入口。  
     
      三、固定式侧边导航  
      固定式侧边导航不仅可以给人一种耳目一新的感觉,也会给用户一种明亮干净的网站布局,由于用户习惯使用横向导航,当网站采用侧边导航的时候,能够很好 的抓用用户眼球,加之鼠标滑动效果,可更加激起用户的点击欲。侧边导航有足够的空间表现自己的引导作用,大量的留白可使用户感觉整个网站具有呼吸之处,采 用优美的设计,可更加引起用户注意。  
     

      各式各样的网站导航,都会根据网站自身的需求而定,网站的定位决定于网站采用什么类型的导航更加合适,任何网站导航最主要的目的都是为了引导用户,告 知用户网站是做什么的,是网站的一个整合体,是为用户提供方便的。我们建设网站应该一切以为用户体验为第一,不能单纯为了导航的好看,而影响了用户体验, 比如以前使用的flash导航,用户体验度方面就非常差(安装flash插件、容易崩溃、加载慢、造成电脑卡)。

     

    转载于:https://www.cnblogs.com/wuyoublog/p/4646521.html

    展开全文
  • 今天阿里的同学从响应式设计的布局类型、布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专业细致的解答,不多说,来收 >>>Heyuchan :在谈响应式布局前,我们先梳理下网页设计中整体页面...
  • 二、常见的块级元素有哪些常见的行内元素有哪些常见的行内块级元素有哪些? 三、如何转换css元素的显示模式? 1.什么是div? 作用:一般用于配合CSS完成网页的基本布局 2.什么是span? 作用:一般...
  • 首先我们说一说第一个阶段,也就是静态网页基础内容,这个阶段的学习是非常简单的,我们在这一个阶段中需要学习技术知识点和阶段的项目任务以及综合能力,需要学习html常用标签、CSS常见布局、样式、定位...
  • 1.块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素~、、、、、等,其中标签是最典型的块元素。块级元素的...
  • 一、块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素~、、、、、等,其中 标签是最典型的块元素。特点:...
  • 简述圣杯布局、双飞翼布局实现的原理4:简述精灵图原理以及其优缺点5:简述BFC规则以及解决的问题6:文本溢出显示省略号如何实现7:简述网页常见图片格式及特点8:常见浏览器兼容性问题9:h5有哪些新增特性10:...
  • 目录1、主流浏览器有哪些以及它的内核?2、Doctype的作用。3、div+css 的布局较 table 布局有什么优点?4、img 的 alt 与 title的作用。5、请谈一下你对网页标准和标准...有哪些常见的meta标签?12、HTML5新特性。13、l
  • 任务布置之前端相关

    2017-08-17 23:35:07
    1. HTML 、 CSS 、 JavaScript 分别表示在前端网页中扮演什么角色?HTML(超文本标记语言)负责前端网页...2. 常见的前端开发框架有哪些?在前端开发中,使用框架和不使用框架的区别?angular 、bootstrap 、jQuery、Re
  • 十天学会DIV CSS(WEB标准)是来自标准之路的CHM版免费教程,它是快速学习DIV CSS的佳品,学习本系列教程需一定html和css基础,也就是指您之前做过网页,会用表格布局。如果您刚开始学习网页制作,不知道什么是表格...
  • css 选择器和优先级

    2017-11-11 13:50:00
    要说到css的优先级,先来看下css选择元素的时候,有哪些方式 选择器大概有以下这些: 对于表格没有提到的层次选择器权重,则是把每一层的权重按照以上规格加起来,就可以得到了 转载于:http...
  • 设计稿审查设计稿的开发友好性帮助视觉设计师发现有哪些地方的设计对开发不友好的地方例如是否存在展示缺陷(缺乏经验的视觉设计师一个常见的问题是没有考虑按钮或标签文字数量的溢出情况)?是否开发成本高或者根本...
  • 大数据培训课程都阶段呢...3.首要技能包含:html常用标签、CSS常见布局、样式、定位等、静态页面的规划制造方法等 4.描绘如下: 从技能层面来说,该阶段运用的技能代码很简单、易于学习、便利了解。从后期课程层来...
  • 渐变效果在Web中也是一种常见的效果,以前靠设计师制作图片来完成,不仅增加了设计师的工作量,在页面中的效果也带来过多的局限制,扩展性也相当差。CSS3渐变不再需要使用图片来代替这些特殊的效果。 第11章介绍...
  • 书中内容主要集中在大多数企业常见的问题之上,如安装和升级到oracle database 11g数据库软件、创建数据库、导出和导入数据、数据库的备份与恢复、性能调优,等等。  本书还提供了dba完成本职工作必备的基本的uniix...
  • 书中结合消费类设备上常见的实例,循序渐进地讲解了 iphone 3开发的基本流程,并介绍了最先进、时尚、受欢迎的 iphone 3新特性。.  本书内容完整丰富,具有较强的通用性,编程领域中各层次读者都能通过本书快速学习...
  • 作用域决定了变量和函数权力访问哪些数据。在Web浏览器中,全局执行环境是window对象,这也意味着所有的全局变量或者方法都是window对象的属性或方法。当一个函数在被调用的时候都会创建自己的执行...
  • PowerPoint.2007宝典 8/10

    2012-04-01 18:39:23
    12.4.3 指定要查找哪些媒体文件类型 240 12.5 使用剪贴画收藏集 241 12.5.1 打开和浏览“剪辑管理器” 241 12.5.2 使用“剪辑管理器”插入剪贴画 241 12.5.3 创建和删除文件夹 242 12.5.4 在收藏集之间...
  • C#编程经验技巧宝典

    热门讨论 2008-06-01 08:59:33
    6 <br>0014 如何锁定窗体中的控件 6 <br>0015 统一窗体中控件的字体设置 7 <br>0016 通过“格式”菜单布局窗体 7 <br>0017 起始页中的“Visual Studio开发人员新闻” 7 <br>1.3 MSDN帮助的...
  • jQuery背景,该如何用AngularJS编程思想 http://blog.jobbole.com/46589/ AngularJS在线教程 http://each.sinaapp.com/angular angular学习笔记 http://www.zouyesheng.com/angular.html React 地址 ...

空空如也

空空如也

1 2
收藏数 25
精华内容 10
关键字:

常见网页布局有哪些