页面布局 | 易学教程

页面布局的几种方式

阅读更多关于页面布局的几种方式

基本布局的几种方式: （1）流体布局：流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术的关系密切。（2）固定布局在固定布局中，网页的宽度是必须指定为一个像素值，一般设为960像素。在过去，开发人员发现960像素是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12和15。尽管到了今天，在web开发中还是比较普遍使用固定宽度布局的，原因是这种布局提供很强的稳定性与可控性。如果你知道你的网页宽度，就可以兼容所有浏览器与设备，你可以精确地控制图像位置，就好像一切尽在掌控之中。然而，固定宽度布局固然有些劣势，，想创建一个固定宽度布局网站的开发人员必须意识到网站是否可以在各式各样的屏幕，浏览器和设备中可用与可见地显示出来。现在市场上出现如此众多设备，意味着有各式各样的屏幕尺寸，对开发人员提出了“一种尺寸适应所有”的技术挑战，这种挑战已超越了固定宽度设计的精确度和可控制性。固定宽度的网站出错的一个常见例子就是小于960像素的屏幕尺寸是非常常见的

常规的页面布局

阅读更多关于常规的页面布局

效果图代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container { margin: 0 25%; padding: 10px 10px; border-style: solid; height: 500px; } .header { margin: 0 auto; height: 100px; border-style: dashed; text-align: center; background-color: #159c77; } .left { margin: 10px 0; border-style: dashed; height: 50%; width: 45%; float: left; background-color: #a5d9cb; } .right { margin: 10px 0; border-style: dashed; height: 50%; width: 45%; float: right; background-color: #4fb599; } </style> </head> <body> <div class="container"> <div class="header"> <h1>页面头部<

Day6

阅读更多关于 Day6

1.今天的全部工作重心已经转移到了写小程序的代码，在老师的指点下，把主页面的三个大选项变小了，下面放了一些食物的图片。今日就主要写了这个页面代码详情：https://github.com/Ljy02/ETB 2.今日小结：觉得老师说的对，我们把自己想象成顾客，站在他们的角度，肯定打开小程序想最直接的看到一些食物，而不是先点进去一个食堂再选择食物，对组件的布局管理方面还是掌握的不够熟悉，适当的添加视图容器view更方便组件布局的管理。 3.明日计划：继续编写小程序代码，实现点击食堂入口跳转到食堂内的页面，实现添加至购物车功能。来源： https://www.cnblogs.com/wttt/p/11405908.html

vue-element-admin中布局设置

阅读更多关于 vue-element-admin中布局设置

vue-element-admin 中大部分页面都是基于这个 layout 的，除了个别页面如： login , 404 , 401 等页面没有使用该 layout 。如果你想在一个项目中有多种不同的 layout 也是很方便的，只要在一级路由那里选择不同的 layout 组件就行。 // No layout { path: '/401', component: () => import('errorPage/401') } // Has layout { path: '/documentation', // 你可以选择不同的layout组件 component: Layout, // 这里开始对应的路由都会显示在app-main中如上图所示 children: [{ path: 'index', component: () => import('documentation/index'), name: 'documentation' }] } 这里使用了 vue-router 路由嵌套, 所以一般情况下，你增加或者修改页面只会影响 app-main 这个主体区域。其它配置在 layout 中的内容如：侧边栏或者导航栏都是不会随着你主体页面变化而变化的。 /foo /bar +------------------+ +-----------------+ | layout | |

前端布局

阅读更多关于前端布局

原文网址： https://www.cnblogs.com/soyxiaobi/p/9594557.html 一、静态布局(Static Layout) 1. 布局概念最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。 2. 优点采用的是css2之前的写法,不存在浏览器兼容性。布局简单。 3. 缺点但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。 4. 实现方法 PC端: 最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。例如百度首页外层body设置了一个 min-width:1000px; ,当我打开调试器的时候,底部 x轴滚动条就出现了。当然,它的布局比普通的静态布局要复杂地多了,比如推荐模块又是一个流式布局.... 移动端由于静态布局不适用于手机端,所以一般都会另设计一个布局,并使用另一个域名。例如刚刚百度的PC端我们切换成手机模拟器访问试试: 确实有点丑是吧。我们访问一下百度的手机端页面:m.baidu.com 舒服！再看一下最近比较'火'的京东的案例:分别访问 jd.com m.jd.com 可以发现: PC端限制了最小的宽度, 低于了则以最小宽度出现滚动条

响应式布局如何实现

阅读更多关于响应式布局如何实现

响应式设计：概念与运用 http://www.w3cplus.com/responsive/responsive-web-design-tips-and-notes.html 响应式设计:使用响应式字体 http://www.w3cplus.com/responsive/understanding-responsive-web-design-how-to-manage-fonts.html 响应式布局实现依赖两个条件：一是宽屏的愈发普及；二是CSS3 media queries属性的诞生。宽屏现在占据大半壁江山，有必要针对这些浏览器设计web页面，但是又不能舍弃1024普屏分辨率，显然固定布局自身受限，流体布局实现有难度，对设计技术都是挑战。于是自然想到宽屏下一种布局，普屏下一种布局（京东目前做法）。想法虽好，但是却要技术支持。恰好，CSS3跟宽屏显示器一样，愈发普及与成熟，其中media queries属性似乎就是为响应布局而诞生的。通过CSS代码，实现不同宽度显示器下不同的布局，可以即时响应的web页面布局。 CSS3 media queries属性基本信息和相关文章可以参考这里： CSS3 media queries使用参考指南于是，很简单的，针对不同宽度浏览器实现不同的布局，只要在web页面头部放入类似下面的代码即可： <link rel="stylesheet"

移动端：移动端页面布局

阅读更多关于移动端：移动端页面布局

移动端页面布局一、水平居中行内元素 text-align: center; 块级元素 1 /* 可以采取绝对定位的方式实现 */ 2 .center { 3 width: 960px; 4 position: absolute; 5 left: 50%;（25%） 6 margin-left: -480px; 7 } 二、自适应块级元素水平居中前面介绍的块级元素居中要求有固定宽度，对于自适应的块级元素就无能为力了 1 /* 借助css3的变形属性Transform来完成 */ 2 .content { 3 position: absolute; 4 left: 50%; 5 transform: translateX(-50%); 6 } 三、行内元素垂直居中单行文本的垂直居中元素的高度和行高相等时，文本呈现垂直居中多行文本的垂直居中不固定高度的垂直居中通过设置padding实现固定高度的垂直居中使用display设置为table，配合样式vertical-align设置为middle来实现四、块级元素的垂直居中 1 /* 固定宽高的垂直居中 */ 2 .content { 3 width: 100px; 4 height: 100px; 5 position: absolute; 6 left: 50%; 7 top: 50%; 8 margin

移动端页面开发流程

阅读更多关于移动端页面开发流程

移动端页面布局一、移动端app分类 1、Native App原生app手机应用程序　　使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C 2、Hybrid App 混合型app手机应用程序　　混合使用原生的程序和html5页面开发的手机应用 3、Web App 基于Web的app手机应用程序　　完全使用html5页面加前端js框架开发的手机应用二、Viewport视口　　视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用meta标签，name="viewport"来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。　　在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口），这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。参数说明： width：宽度设置的是viewport宽度，可以设置device-width特殊值initial-scale：初始缩放比，大于0的数字maximum-scale：最大缩放比minimum-scale

flutter兼论

阅读更多关于 flutter兼论

Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来，目前Flutter已经发布了近60个版本，并且在2018年5月发布了第一个 “Ready for Production Apps” 的Beta 3版本，6月20日发布了第一个 “Release Preview” 版本。初识Flutter Flutter的目标是使同一套代码同时运行在Android和iOS系统上，并且拥有媲美原生应用的性能，Flutter甚至提供了两套控件来适配Android和iOS（滚动效果、字体和控件图标等等），为了让App在细节处看起来更像原生应用。在Flutter诞生之前，已经有许多跨平台UI框架的方案，比如基于WebView的Cordova、AppCan等，还有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。基于WebView的框架优点很明显，它们几乎可以完全继承现代Web开发的所有成果（丰富得多的控件库、满足各种需求的页面框架、完全的动态化、自动化测试工具等等），当然也包括Web开发人员，不需要太多的学习和迁移成本就可以开发一个App。同时WebView框架也有一个致命（在对体验&性能有较高要求的情况下）的缺点

定位JavaScript

阅读更多关于定位JavaScript

1. 定位 1.1 隐藏在一些网站中，某些内容在鼠标点击上去时候才会显示出来，在鼠标一走以后就会消失。这些内容就隐藏起来了。此时我们可以通过display或者opacity来对内容就行隐藏。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; /*background-color: orange;*/ border-radius: 50%; border: 1px solid black; /* normal正常字体，Arial代表备用字体， 30px字体大小，100px行高*/ font: normal 30px/100px 'Arial'; color: green; text-align: center; } .d1:hover~.d2 { display: block; } .d2 { /*不以任何方式显示，在页面中不占位，但重新显示，仍然占位*/ display: none; } .d3 { /*修改盒子的透明度，值为0，完全透明，但在页面中占位*/ opacity: 0; } </style> </head> <body> <div class="d1">1</div> <div

订阅页面布局