页面布局 | 易学教程

网页DIV+CSS布局与ifame传统布局对比

阅读更多关于网页DIV+CSS布局与ifame传统布局对比

通常我们从设计师手上拿到设计稿，按照功能划分为很多小块，然后再利用div+css写成静态页面按照设计稿排列还原，最后把具体内容填充到小块里面。网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列还原好！ div是一个容器，具体根据内容自动适配，可以设置它的宽高，内容尽可能的排列到div当中，当然在设置div宽高后，它里面的图片文字是可能超出设置的宽高度的。 table布局，可以查看 HTML基础标签图片文本超链接列表表格介绍这里面有讲到，需要注意的是在table表格中，colspan是可以跨列合并单元格的，rowspan是可以跨行合并单元格的！以前的布局除了div+css还有frameset布局,它主要运用于管理后台控制菜单切换，实现这个局部的刷新。 iframe翻译过来是页面框架，其实它是用来嵌套页面的，在页面里面可以嵌套别人的页面，展示代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ifame嵌套</title> 7 </head> 8 <body> 9 <iframe src="https://www

Bootstrap页面缩小布局改变的问题

阅读更多关于 Bootstrap页面缩小布局改变的问题

Bootstrap作为一个广泛使用的前端框架，其核心响应式布局更是受到很多人喜爱，但在使用的同时，很多人被其页面缩小时会改变布局所困扰，下面我就向大家说说应该怎样解决这个问题（亲测完美解决）。少扯淡，多干货！ ——————————————原代码—————————————— <style type="text/css"> header { background-color : #d9534f ; height : 120px ; } .center { background-color : #31b0d5 ; border : 1px solid #ff0000 ; height : 300px ; margin : 0px ; } footer { background-color : #f0ad4e ; height : 100px ; } </style> <header class= "col-lg-12 " ></header> <div class= "col-lg-12 " > <div class= "col-lg-3 " ></div> <div class= "col-lg-6 " ></div> <div class= "col-lg-3" ></div> </div> <footer class= "col-lg-12" ></footer> 运行之后

微信小程序新单位rpx与自适应布局

阅读更多关于微信小程序新单位rpx与自适应布局

rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案：响应式（ Responsive web design ) rem 流式布局 scale伸缩布局响应式响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面都不会优先考虑。 rem rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果，因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。为了方便理解，我写了一个简单的 rem布局demo ，通过设置 document.documentElement.style.fontSize = window.innerWidth + 'px'; 然后设置 <div class="box"></div> 的宽高等于1rem，就可以使box的宽高自适应各种设备尺寸。因为box的单位1em是跟页面设备的宽对应的，所以能做到自适应各种尺寸。流式布局流式布局需要用到百分比或者flex

自适应布局的解决方案

阅读更多关于自适应布局的解决方案

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论—— 手淘的H5页面是如何实现多终端的适配？那么趁此 Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。目标拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：目标很清晰，就是做一个这样的H5页面。 DEMO 请用手机扫下面的二维码痛点虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：点击这里查看更多终端设备的参数。再来看看手淘H5要适配的终端设备数据：看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。上图来自于

开发bs软件随想

阅读更多关于开发bs软件随想

开发bs方面的软件，无论网站或者应用软件大体的架构都是相同的，主要包括页面层的布局与显示，业务层的处理，数据库打交道的处理。当然会用到很多的技术简化和方便这方面的处理。首先看页面层，一个目标，无论什么软件都以.html形式呈现给用户，这就是最好的。有很多网站生成html功能就是很好的例子，有的使用shtml也可以达到不错的效果。html页面要以css,xhtml,js等技术进行布局。css定义一些模板，js实现一些功能和动态的效果，在页面用div等这些布局显示内容，可以制作这方面模板或用到些自动生成功能，，这样开发软件就很方便和简单了，性能也会有所提高，利于页面的维护和重用。接下来谈论这方面的代码！以后再谈论业务处理，数据等方面的东西… 来源： https://www.cnblogs.com/yangwentao/archive/2006/09/19/508106.html

屏幕适配

阅读更多关于屏幕适配

rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。 · 为什么web app要使用rem？这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。 1、实现强大的屏幕适配布局：最近iphone6一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，记得一两年前做web app有一种做法是以320宽度为标准去做适配，超过320的大小还是以320的规格去展示，这种实现方式以淘宝web app为代表作，但是近期手机淘宝首页进行了改版，采用了rem这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布局的页面。我们现在在切页面布局的使用常用的单位是px，这是一个绝对单位，web app的屏幕适配有很多中做法，例如：流式布局、限死宽度，还有就是通过响应式来做，但是这些方案都不是最佳的解决方法。

移动前端自适应适配布局解决方案

阅读更多关于移动前端自适应适配布局解决方案

方案：固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用 rem 1. 简单问题简单解决我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4：这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从代码也可以证实这一点：

2月1日学习日志

阅读更多关于 2月1日学习日志

今天着重于学习了div+css布局相关的知识: 1.css定位:相对定位(让元素相对于自己原来的位置，进行位置调整),固定定位 (页面滚动,位置不变),绝对定位. position:relative; left: 600px;　　　　//left为居左600px top: 50px;　　　　　//top为居顶50px 2.ico图标的调用与创建: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 3.版心布局: width:1190px; 　　　　/*宽度*/ margin: 0 auto;　　　　 /*居中对齐*/ 4.超链接的相关操作: /*超链接被鼠标经过时*/ a:hover{ color:#c81623; } /*取消下划线*/ a{ text-decoration:none; } 5.背景色: background-color:#020000; 6.左浮动(从左边向右) float:left; 今日疑点:1.css的层级调用关系?2.矢量图标的导入. 明日任务:初步开始学习制作app 来源： https://www.cnblogs.com/sicilya/p/12250093.html

html中页面布局—浮动

阅读更多关于 html中页面布局—浮动

folat:浮动 none:不浮动，默认 left:向左浮动 right:向右浮动 auto:根据自身所占位置，自动居中 1）、自身必须有宽高 2）、inline-block或folat都会使auto失效 3）、需要填写具体值来调整元素位置浮动产生的影响： 1）、自身的父元素无法获取宽高 2）、后续的元素会自动补位 3）、浮动会脱离当前文档流，覆盖标准流的元素 4）、auto会失效 5）、块元素可以横排显示（失去独占一行的特性） 6）、行元素可以设置宽和高 7）、除了auto以外，依然支持margin 8）、提升了半个层级z-index（后续会讲到）使用浮动布局，那么一定要清除浮动，否则会很严重！！！页面会爆炸！！清除浮动的常见方法有以下几种： 1）、给父级设置宽高缺点：父级如果作为容器，直接写死了，后续元素添加会出现问题，而且无法解决元素重叠的问题 2）、使用overflow:hidden属性（超出内容区域的部分，隐藏）给父元素添加缺点：如果内容需要超出，或者较多时，需求发生冲突；如果内容没有超出，推荐使用，较为方便使用场景：浮动元素较少时 <div id="main" style="overflow: hidden;"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div

html页面布局

阅读更多关于 html页面布局

display:元素的显示方式 black:块元素 inline-block:行内块元素（内联块元素） none:无（隐藏）,不单单是视觉上的，页面布局中也彻底消失，不占位置块元素：独占一行，可以设置宽高以及内外边距。行元素：只占内容大小的区域，不可以设置宽高和内外边距。块元素具备盒模型的属性。行元素不具备盒模型的属性。消除inline-block导致的元素间隔的方法：方法1：删除标签之间的空格和换行缺点：代码可读性差方法2：将父元素的字体大小设置为0px 缺点：通过继承性，也会影响自身的字体大小；同时可能导致布局混乱（em之类参考父元素字体的值无法使用）方法3：给父级（-6px）和自身（0px）设置词间距或字母间距缺点：需要给每一个元素设置，计较繁琐方法4：删除掉闭合标签（不推荐使用） .bt{ width: 200px; height: 200px; border: 2px solid; display: inline-block; transition: all 2s; font-size: 16px; word-spacing: 0px; } body{ /*font-size: 0px;*/ word-spacing: -6px; } 来源： CSDN 作者：前端小布丁链接： https://blog.csdn.net/weixin

订阅页面布局