页面布局 | 易学教程

移动端布局

阅读更多关于移动端布局

移动布局 1.移动设备有手机和ipad 安卓系统 ios系统安卓系统的内置浏览器是谷歌 ios内置 safari浏览器他们的内核都是web，不考虑兼容性，需要考虑的问题是安卓和ios的区别问题 2.布局(写页面) 要考虑以下几点设置的宽度设备的实际大小（设备的分辨率）厂家给的页面的大小设计稿上的大小浏览器的视口（大小）浏览器自带的可以通过用 document.documentElement.clientWidth 查看，在移动设备上如果不做视口处理默认是 980 例子：设备宽是320 页面宽是1200 浏览器视口是980px，三者不统一，我们用移动设备看页面，浏览器视口会自动缩放，以100%完整的展示页面，就会变得不清楚，特别挤。第一我们需要把这个三个变得统一 1.移动设备宽(320) 要和浏览器视口宽一致在head之间加一个meta标签 name=‘viewport’ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 设备宽度和浏览器视口一致时，如果页面大于这个数字，就会出现滚动条 2.当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过的部分会被截掉

CSS布局中position详解

阅读更多关于 CSS布局中position详解

本文旨在普及一下position的用法，CSS中position的使用率相当之高，对于新入行的小白，不仅要知其然，还要知其所以然。 position（定位类型），主要有4种属性值 : static、fixed、relative、absolute，任何元素的默认position属性值都是static（静态）。元素可以使用TRBL定位，但必须先设定position属性，否则无法发挥效果。根据不同的position属性值，TRBL作用不同。下面是各个属性值的简单介绍： static，为position的默认属性值，即没有定位，元素出现在正常的流中，静态定位的元素不会受到top, bottom, left, right影响。 fixed：元素位于浏览器窗口固定位置，即使窗口滚动也不会移动；Fixed定位使元素位置脱离文档流，因此不占据空间；Fixed定位的元素可以和其他元素重叠。 absolute（绝对定位）：其元素位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>即浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位； relative（相对定位）：是相对于元素的正常位置，配合TRBL进行定位。相对定位时存在元素重叠现象，但原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

DIV-CSS布局中position属性详解

阅读更多关于 DIV-CSS布局中position属性详解

本文向大家描述一下DIV CSS布局中的position属性的用法，position属性主要有四种属性值，任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative（相对）以及absolute（绝对）。如何学习DIV+CSS布局之position属性如果用position属性来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute。定位(position)布局页面说容易非常容易，只需要记住这节课最后一句话就可以了，说困难，那是相当的难理解，需要一定的耐心，不过还好，KwooJan给大家总结的已经很通俗易懂了。如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。” 任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative（相对）以及absolute（绝对）。【DIV+CSS布局之position属性:absolute】意思是：他的意思是绝对定位

一篇真正教会你开发移动端页面的文章(二)

阅读更多关于一篇真正教会你开发移动端页面的文章(二)

移动端开发的干货篇之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面好了，让我们开始吧，从哪里开始呢？从设计图开始，即PSD稿件：移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同，具体体现在设计图的尺寸上，现在移动端的设计图尺寸大多以iPhone5和iPhone6的设备像素尺寸作为依据，比如拿到一张PSD设计图，它的总宽度为640px(iPhone5)或者750px(iPhone6)。本例就拿iPhone6的设计图尺寸为标准进行讲解，其它设计图尺寸道理是一样的，这并不影响我们的开发。首先我们要有一张设计图才行，看下图，假设我们有一张设计图，它很简单，只有一个红色的方块：拿到了设计图，于是你开开心心的开始写代码了，你打开了编辑器，并写下了如下HTML代码： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body>

rem适配布局（rem+less+媒体查询和 rem+flexible.js）

阅读更多关于 rem适配布局（rem+less+媒体查询和 rem+flexible.js）

1. rem 基础　rem 是一个相对单位，类似于 em ，em 是父元素字体大小。　em 是相对于父元素的字体大小来说的　rem 是相对于 html 元素字体大小来说的　rem 优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制　比如：根元素（html ）设置的 font-size=12px；非根元素设置 width：2rem；则换成px 表示 24px（12px*2rem） 2. 媒体查询（@media）　@media 可以针对不同的屏幕尺寸设置不同的样式　语法规范：　　@media mediatype and | not | only (media feature){ 　　　　CSS - Code; 　　} 用 @media 开头 mediatype 媒体类型　　　　all：用于所有设备，　　　　print：用于打印机和打印预览，　　　　screen：用于电脑屏幕，平板电脑，手机等关键字 and not only 　　　　and：可以将多个媒体特性连接到一起，相当于“且”的意思　　　　not：排除某个媒体类型，相当于“非”的意思，可以省略　　　　only：指定某个特定的媒体类型，可以省略 media feature 媒体特性必须有小括号包含　　　　width：定义输出设备中页面可见区域的宽度　　　　max

H5页面左图右边文字如何布局

阅读更多关于 H5页面左图右边文字如何布局

<! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > 商品 </ title > < meta content ="yes" name ="apple-mobile-web-app-capable" > < meta content ="yes" name ="apple-touch-fullscreen" > < meta content ="telephone=no" name ="format-detection" > < meta content ="black" name ="apple-mobile-web-app-status-bar-style" > < meta name ="viewport" content ="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> < style type ="text/css" > * { margin : 0 ; padding : 0 ;} .int_goods a { display : block ; height : 3.467rem ; background : #fff ; padding : 0.800rem ; display :

长尾关键词的布局

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

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

Day 10--学习与编码（三）

阅读更多关于 Day 10--学习与编码（三）

今天把flex布局学完了，发现flex也不是万能的，还是得靠html的基础才行。于是去多学了几个属性，页面才逐渐变成自己想要的样子。但是不知道为啥总是比demo少一点高级感，还达不到预期。然后写了两个页面分别是备货员和配送员的工作界面。（大概这种感觉）我发现这个举一反三还行，但是脱离js语法单纯的去自己想新东西是挺难的。现在在学怎么获取用户信息显示在个人主页上，明天也继续，然后继续跟着视频学函数和属性。今天还肝了c++，不过分配给软件课设的时间也还好！明天可以尽力！希望能把没做到的稍微做到一些吧（。总之今天就是肝！其实也还挺充实的。然后我发现一定要多动手尝试和实践！自己建一个项目，把网上的知识敲一敲试一试，真好用！来源： https://www.cnblogs.com/darkhill3e/p/11426352.html

新的页面布局方式

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

1 多列布局 1.1 多列布局介绍实现类似于报纸的布局方式 ) 1.2 多列布局的相关CSS属性 columns 设置的列数和每列的宽度。复合属性 columns：<' column-width '> || <' column-count '> column-width 设置每列的宽度（类似于最小宽度）：用长度值来定义列宽。不允许负值 auto：根据 <' column-count '> 自定分配宽度 column-count 设置列数：用整数值来定义列数。不允许负值 auto：根据 <' column-width '> 自定分配宽度 column-gap 设置列与列之间的间隙：用长度值来定义列与列之间的间隙。不允许负值 normal：与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。 column-rule 列与列之间的边框,复合属性同border类似 column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '> column-rule-width 列与列之间的边框厚度：用长度值来定义边框的厚度。不允许负值 medium：定义默认厚度的边框。 thin：

新的页面布局方式

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

新的页面布局方式 1 多列布局 1.1 多列布局介绍实现类似于报纸的布局方式 ) 1.2 多列布局的相关CSS属性 columns 设置的列数和每列的宽度。复合属性 columns：<' column-width '> || <' column-count '> column-width 设置每列的宽度（类似于最小宽度）：用长度值来定义列宽。不允许负值 auto：根据 <' column-count '> 自定分配宽度 column-count 设置列数：用整数值来定义列数。不允许负值 auto：根据 <' column-width '> 自定分配宽度 column-gap 设置列与列之间的间隙：用长度值来定义列与列之间的间隙。不允许负值 normal：与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。 column-rule 列与列之间的边框,复合属性同border类似 column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '> column-rule-width 列与列之间的边框厚度：用长度值来定义边框的厚度。不允许负值 medium：定义默认厚度的边框。

订阅页面布局