页面布局 | 易学教程

后台管理页面布局

阅读更多关于后台管理页面布局

1 <!DOCTYPE html> 2  3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .right{ 15 float: right; 16 } 17 .pg-header{ 18 height:48px; 19 background-color: #2459a2; 20 color: white; 21 } 22 .pg-content .menu{ 23 width:20%; 24 background-color: red; 25 min-width: 200px; 26 height:500px; 27 } 28 .pg-content .content{ 29 width:80%; 30 background-color: green; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="pg-header"></div> 36 <div class="pg-content"> 37 <div class="menu left">a</div>

web页面响应布局

阅读更多关于 web页面响应布局

原文 by zhangxinxu from http://www.zhangxinxu.com 我一直有一个想法就是把张鑫旭的所有文章弄到我的博客园上，但是想法一直存在，一直都在，行动越迟迟不肯配合，有那么一句话，没有行动的计划只会毁了你，亲，我不想给自己计划了，随心所遇吧，附一张图，激励我自己，也激励那些跟我一样的人。固定布局就是个屎，我要投奔流体布局！如果你一直都是流体布局的，自己心里也默念三遍：流体布局就是个屎，我要投奔固定布局！如果你固定/流体布局兼修，自己心里也默念三遍：什么固定/流体布局都是屎，我要投奔时髦的响应布局！看到张鑫旭这句话时，我就没放在心上，想着在响应布局早着呢，难维护，兼容又差，现在没想到，已经迫在眉睫，赶紧恶补下以下内容你可以直接到张鑫旭的博客上看，顶部有博客链接，底部有具体本章链接，他本人写的简单易懂还实用并且幽默附有dome等等，我自己的纯属于练文采，做笔记用响应式不句就是根据窗口的大小做相应的布局应运而生的web页面响应布局 zxx的做法是在连入css的就把不同宽度的局部放在不同的css中 <link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" /> <link rel=

DIV+CSS页面布局

阅读更多关于 DIV+CSS页面布局

页面布局设计一、三行模式或三列模式特点：把整个页面水平、垂直分成三个区域。三行模式：将页面分成头部、主体及页脚三部分三列模式：将页面分成左、中、右三个部分在CSS文件里： 1.三行模式代码 #header{ width:100%; height:120px; background:#223344;} #main{ widrh:100%; height:500px; background:#553344;} #footer{ width:100%; height:40px; background:#993344;} 2.三列模式代码 #left{ width:30%; height:700px;background:#223344; float:left;} #center{ widrh:50%; height:700px; background:#553344;float:left;} #fright{ width:20%; height:700px; background:#993344;float:left;} 二、三行两列、三行三列模式特点：先将整个页面水平分成三个区域，再将中间区域分成两列或三列。三行两列模式： 1.DIV结构 <div id="header" class="">header</div> <div id="main" class=""> 　　

响应性web设计实战总结

阅读更多关于响应性web设计实战总结

响应性web设计实战响应性web设计的理念是：页面的设计与开发应当根据用户行为与设备环境(包括系统平台，屏幕尺寸，屏幕定向等)进行相应的响应及调整。具体的实践方式由多方面组成，包括弹性网格和布局，图片，css Media(媒体查询)使用等。一：布局方式有如下几种： 1. 固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但是这样设计有如下缺点： 1. 页面很死板，在更大的屏幕上，页面左右2边留白。 2. 不适应响应性布局。 2. 流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式：百分比宽度 = 目标元素宽度 / 上下文元素宽度这种布局优点：可以自适应布局，根据不同的分辨率显示不同的宽度。缺点：在行高或者marginTop在大屏幕下看起来太高，在小屏幕下看起来太窄。 3 弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式：百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size

再谈前端性能优化

阅读更多关于再谈前端性能优化

好的设计应该简单，而且始终可以提供最佳性能。一、优化原因谷歌的数据表明，一个有10条数据0.4秒可以加载完的页面，在变成30条数据加载时间为0.9秒后，流量和广告收入减少了20%。当谷歌地图的首页文件大小从100kb减少到70~80kb时，流量在第一周涨了10%，接下来的三周涨了25%。腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成9.4%的PV的下降，8.3%跳出率的增加以及3.5%转化率的下降。可以看出，性能优化商业上来说很重要。但是，更重要的还是屏幕前我们的用户，让用户在使用产品时有更快更舒适的浏览体验，这算是一种前端工程师的自我修养。二、优化目标以让用户满意为目标呈现网页是终极的目标。当然页面速度要快，不过快只是构成满意的一个因素。我们使用Google团队提出的RAIL模型作为优化的目标。目前国内包括腾讯在内的团队都在使用这个评估方案。 Response:100ms内响应； Animation:10ms内生成一帧； Idle:最大程度增加空闲时间； Load：1000ms内呈现内容； 1）以用户为中心 User-centered 用户是性能优化的中心，一切性能优化皆是为了用户获得更佳的体验。那么，我们的用户如何评价性能延迟： 0-16ms 用户可以感知每秒渲染 60 帧的平滑动画转场。也就是每帧 16 毫秒留给应用大约 10

前端性能优化（十四）

阅读更多关于前端性能优化（十四）

避免大规模、复杂的布局布局，就是浏览器计算DOM元素的几何信息的过程：元素大小和在页面中的位置。每个元素都有一个显式或隐式的大小信息，决定于其CSS属性的设置、或是元素本身内容的大小、抑或是其父元素的大小。在Blink/WebKit内核的浏览器和IE中，这个过程称为布局。在基于Gecko的浏览器（比如Firefox）中，这个过程称为Reflow。虽然称呼不一样，但二者在本质上是一样的。布局，就是浏览器计算DOM元素的几何信息的过程：元素大小和在页面中的位置。每个元素都有一个显式或隐式的大小信息，决定于其CSS属性的设置、或是元素本身内容的大小、抑或是其父元素的大小。在Blink/WebKit内核的浏览器和IE中，这个过程称为布局。在基于Gecko的浏览器（比如Firefox）中，这个过程称为Reflow。虽然称呼不一样，但二者在本质上是一样的。与样式计算类似，布局的时间消耗主要在于：需要布局的DOM元素的数量布局过程的复杂程度尽可能避免触发布局当你修改了元素的样式属性之后，浏览器会将会检查为了使这个修改生效是否需要重新计算布局以及更新渲染树。对于DOM元素的“几何属性”的修改，比如width/height/left/top等，都需要重新计算布局。 .box { width: 20px; height: 20px; } /** * Changing width and

【js】流式布局页面

阅读更多关于【js】流式布局页面

<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta charset="utf-8" /> <style type="text/css"> .eblock{ position: absolute;width:200px;min-height:300px; border:1px solid #F00;} </style> <script src="http://r.ytrss.com/rs/js/yintaih5/h5js/lib/jquery.js"></script> <script type="text/javascript"> $(function() { var current; var rowfirst; var rowsecond; var rowthrid; var rowfourth; var index = 1; $(".eblock").each(function() { current = $(this); // 获取首行元素 if (index <= 4) { if (index % 4 == 1) { rowfirst = $(this); } else if (index % 4 == 2) {

05HTML5学习之页面布局

阅读更多关于 05HTML5学习之页面布局

页面布局盒模型文档中的每一元素都被认为是一个矩形盒子。如下图所示，盒子是由内容区以及围绕着内容区的内边距、边框以及外边距组成。这就是所谓的盒模型。内容内容区由文本和其它诸如图像、段落、标题、列表之类的网页元素组成。页面上元素的可见宽度为内容、内边距和边框三者宽度的总和。当然，width属性仅设置了内容的实际宽度；它并不包括内边距、边框或外边框。内边距内边距（Padding）指内容和边框之间的区域。默认的内边距值为0。某个元素的背景属性对内边距与内容区域而言是一致的。我们使用padding属性来设置元素的内边距。边框边框是位于内边距与外边距之间的区域。默认的边框值为0，也即不显示边框。我们使用border属性来设置元素的边框。外边距外边距（Margin）是指元素和相邻元素之间的空白区域。 Margin属性我们用margin属性来设置某个元素各个方向上的外边距。这一区域总是透明的，显示的是网页或父元素的背景色。对于网页文档以及特定的如段落、标题、表单等元素，浏览器自带默认的外边距值。指定margin属性就能覆盖默认值。外边距的值是数值类型，单位为px或em。将其设置为0（无单位），外边距就消失了。设置为auto，将由浏览器计算决定外边距值。下标列出了配置外边距的各种CSS属性：属性简介与常用值 margin

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

　　从博主学习前端一路过来的经历了解到，前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题，这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案，希望能够帮助到一些从PC端转战web移动开发的小伙伴，因为是第一次写博文，写得不好的地方也希望大家多多包涵啦(*^__^*) 嘻嘻……（ps:文章有点长，如果你现在时间紧迫，那可以先收藏，等到有时间了再回头慢慢品尝喔）首先我们一起看看这篇打通博主web移动开发任督二脉的武功秘籍吧（以下内容到分割线前是引用前端大牛的文章，方便大家理解博主内容）：从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础

第10组 Beta冲刺（4/4）

阅读更多关于第10组 Beta冲刺（4/4）

- 许宏健 - 过去两天完成的任务 - 口头描述这两天在做java的作业，实在是没时间动这个项目 - 代码签入图片 - 接下来的任务学习RecyclerView切换页面的操作，真正实现与他人的代码实现无缝接入 - 还剩下哪些任务 1.页面切换 2.聊天界面优化 - 燃尽图 - 遇到了哪些困难遇到了网上查不到资料的困难，可能其他开发安卓的人为这是个很简单的问题，所以没有人写这个要怎么做，所以只能靠自己的摸索，所以我才决定换一种布局，以求突破。 - 有哪些收获和疑问收获：学会了RecyeclerView的大概用法。疑问：到底要怎样才能使用这种布局切换页面呢？这种布局为什么跟其他布局有这么大的区别呢。来源： https://www.cnblogs.com/xhongj/p/12040686.html

订阅页面布局