页面布局 | 易学教程

页面布局中常用的清除浮动的方法

阅读更多关于页面布局中常用的清除浮动的方法

几种清楚浮动的方法： 1、设置空标签 2、父容器设置display: inline-block 3、父容器设置overflow值auto或hidden 4、clearfix方法例子： Html结构是这样的： cont1高度不固定，cols1和cols2浮动，cont2高度固定在cont1下面。不清除浮动时的效果：清除浮动后的效果：方法一：设置空标签我们在容器cont1的最后面添加空标签clear: 然后对clear添加css: 方法二：父容器设置display: inline-block 只需对父容器添加css属性display: inline-block; 就行了方法三：父容器设置overflow值auto或hidden 只需对父容器添加属性overflow: auto; 或者 overflow: hidden; 方法四：clearfix方法此时需要写一个clearfix的类：然后在cont1里面挂载上clearfix类就可以了。来源： oschina 链接： https://my.oschina.net/u/1586184/blog/222876

长尾关键词的布局

阅读更多关于长尾关键词的布局

我们在确定文章页面的长尾关键词以后，剩下的就是怎么做文章质量的优化了。这里的质量包含了几个方面： 1、首先是长尾关键词的布局，文章里面怎么布局长尾关键词呢？ ①完整的长尾词的布局理论上来说完整的长尾关键词更加有利于有关性计算，大家可以看到，如果页面标题里面完整出现某个长尾词，那么这个页面在关键词排序的时候肯定会有一些优势。但前提是不要影响文章的语义逻辑。 ②分词的利用和布局以“文章长尾关键词布局”这个长尾词为例，如果频繁出现这么长的词，可能语义会很奇怪，还可能造成词语堆砌。其实，即便是文章内容里面没有出现很多次完整的长尾关键词，那么“文章”、“长尾关键词”、“布局”这三个分词也足以表达中心内容，不会影响到整篇文章的相关性和质量。 2、要注意用户搜索需求，尽量让文章覆盖到更多的需求，比如说长尾关键词的用户主要需求是A，但是同时存在着相关需求的B和C，那么我们在编辑文章的时候，也可以把B和C也整合进来，这样就提高了文章内容的质量，对于文章长尾关键词的排名也有帮助。 3、要注意文章内容的可读性，只有可读性高才能让用户停留的时间长，这对于文章长尾关键词的排名也是有帮助的。来源： https://www.cnblogs.com/djh18170512128/p/11939330.html

两个常规的页面布局方式

阅读更多关于两个常规的页面布局方式

表格布局 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表格布局</title> <link rel="stylesheet" type="text/css" href="css/bgStyle.css" /> </head> <body> <header></header> <nav></nav> <div class="content"> <div class="tablecontent"> <div class="tablerow"> <section id="left"> 杂乱无章 </section> <section id="main"> 杂乱无章 </section> <aside id="right"> 杂乱无章 </aside> </div> </div> </div> <div class="foot"> <footer></footer> </div> </body> </html> css: * { margin: 0px; padding: 0px; } html, body { height: 100%; overflow: hidden; background-color: gray; } header { height: 100px; background

《浏览器工作原理与实践》<06>渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？

阅读更多关于《浏览器工作原理与实践》渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？

在上篇文章中，我们介绍了渲染流水线中的 DOM 生成、样式计算和布局三个阶段，那今天我们接着讲解渲染流水线后面的阶段。这里还是先简单回顾下上节前三个阶段的主要内容：在 HTML 页面内容被提交给渲染引擎之后，渲染引擎首先将 HTML 解析为浏览器可以理解的 DOM；然后根据 CSS 样式表，计算出 DOM 树所有节点的样式；接着又计算每个元素的几何坐标位置，并将这些信息保存在布局树中。分层现在我们有了布局树，而且每个元素的具体位置信息都计算出来了，那么接下来是不是就要开始着手绘制页面了？答案依然是否定的。因为页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。如果你熟悉 PS，相信你会很容易理解图层的概念，正是这些图层叠加在一起构成了最终的页面图像。要想直观地理解什么是图层，你可以打开 Chrome 的“开发者工具”，选择“Layers”标签，就可以可视化页面的分层情况，如下图所示：现在你知道了浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。下面我们再来看看这些图层和布局树节点之间的关系，如文中图所示：通常情况下，并不是布局树的每个节点都包含一个图层

布局页面Container

阅读更多关于布局页面Container

给想要添加的元素container这个类会给元素添加一个固定的宽度会随着窗口的变化而变化,用了这个类的容器会变成响应式的　　不同的point上有不同的breakpoint从而应用不同的宽度值 @media查询的功劳如果想要变成流动的只需要在container上加fluid即可就是 : container-fluid 固定宽100% 添加到短语集没有此单词集：英语 -> 中文（简体）... 创建新的单词集... 拷贝添加到短语集没有此单词集：中文（简体） -> 中文（简体）... 创建新的单词集... 拷贝添加到短语集没有此单词集：中文（简体） -> 中文（简体）... 创建新的单词集... 拷贝来源： https://www.cnblogs.com/apelles/p/11921103.html

适配方案（四）适配的基础知识之单位、分辨率、viewport

阅读更多关于适配方案（四）适配的基础知识之单位、分辨率、viewport

适配的基础知识一、理解单位 px、pt、pc、sp、em、rem、dpr、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi 如果你是ios开发，你需要了解的单位：pt，px，ppi；实际开发中用到的单位：pt。如果你是android开发，你需要了解的单位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi；实际开发中用到的单位：dp，sp。如果你是前端开发，你需要了解的单位：px，em，rem，dpr；实际开发中用到的单位：px，em，rem，dpr 1、dpi / ppi dpi：dot per inch ，每英寸的点数；打印或印刷领域使用的单位，代表打印机每英寸可以打印出的点数。 ppi：pixel per inch ，每英寸的像素数，像素密度；表示图像或者显示器单位面积上像素数量。 dpi 和 ppi 都是描述分辨率的单位，但是两者是有区别的，但是在描述手机分辨率时，可以认为两者意义相同，以前android设备偏向于使用 dpi ，ios设备偏向于使用 ppi ，目前android和ios统一使用 ppi 描述手机屏幕的像素显示密度。 2、ldpi、mdpi、hdpi、xhdpi、xxhdpi android对移动设备不同屏幕分辨率的分类 3、pt，pc，sp pt：磅（point的音译

C# - VS2019页面布局容器splitContainer和groupBox小结

阅读更多关于 C# - VS2019页面布局容器splitContainer和groupBox小结

前言在WinFrm应用程序中，产品的外观、布局将直接影响用户第一体验，所以对于开发者来说，在没有美工支持的前提下，应当注意系统页面的布局，本章主要讲解splitContainer和groupBox的一些常规用法。 splitContainer 拖到一个 splitContainer1 到主界面上，默认效果如下。常用属性： IsSplittedFixed 是否锁定左右/上下拖动 BorderStyle 设定边缘显示样式 Oritentation 设定分割方向， Horizontal 上下分割， Vertical 左右分割 groupBox 拖到一个 groupBox1到主界面上，默认效果如下。常用属性： Text 标题栏 Dock 对齐方式总结合理利用splitContainer和groupBox设定界面，可以让产品更加考究，提升用户体验。类似的容器还有很多，后续将继续更新使用心得。来源： https://www.cnblogs.com/jeremywucnblog/p/11909701.html

初学者的垃圾代码

阅读更多关于初学者的垃圾代码

对于一个学了不到两周的新手菜鸟来说，写的代码几乎都是垃圾是无法更改的，我现在还不能正确的熟练运用CSS，而且现在写的代码都是些乱用标签元素的，导致了许多能简单实现的样式代码变得复杂化，代码精简，效率最优，出现这么多垃圾代码有些是定位的胡乱使用，有些是内边距还有外边距使用不清楚导致的，页面布局没有合理清晰的逻辑思路，今天也明白了一点，在页面布局上要做到先做大致的布局，然后填充内容，最后再是样式，这样的流程会使页面制作上会更加的合理，避免产生更多的垃圾代码。来源： CSDN 作者：伯纳乌中的右路走廊链接： https://blog.csdn.net/weixin_42855541/article/details/81462994

弹性、静态、响应式、自适应布局之间的区别

阅读更多关于弹性、静态、响应式、自适应布局之间的区别

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。　在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem）　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见content"width=640,user

水平居中布局与滚动条跳动的千年难题

阅读更多关于水平居中布局与滚动条跳动的千年难题

绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~例如，妇女之友大淘宝的首页： .warp{ width:1190px; margin:0 auto; position:relative; } 然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了： 1，信息流页面，如新浪微博，是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。 2，JS交互，本来默认页面高度不足一屏，结果点击了个“加载更多”，内容超过一屏，滚动条出现，页面主体就会左侧跳动。 3，结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。造成的结果就是，导航尼玛怎么跳来跳去！当前优化这种体验问题，一般有两种解决方法：高度尺寸不确定的，例如，新浪微博，使用： body { overflow-y: scroll; } 高度确定的，例如淘宝网首页。使用CSS把页面尺寸布局骨架搭好，再在里面吐数据。于是，要么没有滚动条，要么滚动条直接出现。不会出现跳动。然而，然而

订阅页面布局