页面布局 | 易学教程

符合SEO的HTML布局规范

阅读更多关于符合SEO的HTML布局规范

少用例如iframe等标签引入内容，可以不用尽量不用，因为搜索引擎无法搜索到框架里面的内容；  <html> <head> <title>页面标题</title> <meta http-equiv=Content-Language content=zh-cn /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="description" content="网站描述" /> <meta name="keywords" content="关键词" /> <link href="inc/css.css" type="text/css" rel="stylesheet" /> </head> <body> <div> <h1>页面内容标题</h1> <h2>页面相关性标题</h2> <h3>标题系列</h3> <h4>标题系列</h4> <h5>标题系列</h5> <h6>标题系列</h6> <img src="xxx.jpg" alt="图片说明" /> <a href="/" title="链接说明">链接词</a> <strong>重点关键词强调</strong> <b>关键词强调</b> <u>关键词强调</u> <i>关键词强调< /i> <

CSS_相对单位rem

阅读更多关于 CSS_相对单位rem

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 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这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布局的页面。

rem适配布局

阅读更多关于 rem适配布局

rem适配布局 rem基础 rem是一个单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小不同的是rem的基准是相对于html元素的字体大小比如，根元素（html）设置font-size=12px；非根元素设置width:2rem;则换成px表示就是24px； rem的优点就是可以通过检测媒体查询来修改html里面的文字大小来改变元素的大小媒体查询媒体查询（Media Query）是CSS3新语法。 1.使用@media查询，可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 4.目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询语法规范 @media mediatype and not|only (media feature){ CSS-Code; } 1.用@media开头注意@符号 2.mediatype媒体类型将不同的终端设备划分成不同的类型，称为媒体类型 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，只能手机等 3.关键字and not only 关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件 1.and：可以将多个媒体特性连接到一起

移动布局基础

阅读更多关于移动布局基础

移动布局基础浏览器现状 pc端常见浏览器：360,谷歌，火狐，qq，百度，搜狗，IE浏览器移动端常见浏览器：UC,QQ,哦朋，百度，360，谷歌，搜狗，猎豹等等国内的uc和QQ，百度手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是Android修改开发的一样总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可手机屏幕现状移动端设备屏幕尺寸非常多，碎片化严重 Android设备有多种分辨率：480x800,480x854,540x960,720x1280,1080x1920等，还是2k,4k屏等近年来iphone的碎片化也加剧了，其设备的主要分辨率有:640x960,640x1136,750x1334,1242x2208等作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px 移动端调试方法 Chome DevTools（谷歌浏览器）的魔你手机调试搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问总结移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机端开发现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试视口视口（viewport）就是浏览器显示页面内容的屏幕区域

前端之css

阅读更多关于前端之css

什么是 CSS ? 　　CSS (Cascading Style Sheet)译作"层叠样式表",是用于控制或增强网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以控制许多仅使用HTML无法控制的属性。当浏览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标签，并根据内置的解释规则将网页元素呈现出来。CSS决定浏览器将如何描述HTML元素的表现形式。 CSS3模块 CSS3中的模块模块名称功能描述 Basic box model 定义各种与盒相关的样式 Line 定义各种与直线相关的样式 Lists 定义各种与列表相关的样式 Presentation Levels 定义页面中元素的不同样式级别 Speech 定义各种与语音相关的样式。比如音量，音速，说话间歇时间等属性 Background and border 定义各种与背景和边框相关的样式 Text 定义各种与文字相关的样式 Color 定义各种与颜色相关的样式 Font 定义各种与字体相关的样式 Paged Media 定义各种页眉，页脚，页数等页面元数据的样式 Cascading and inheritance 定义怎样对属性进行赋值 Value and Units 将页面上各种各样的值与单位进行统一定义，以供其他模板使用 Image Values 定义对image元素的赋值方式

0基础学习移动端适配

阅读更多关于 0基础学习移动端适配

这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。不管三七二十一，我们先新建一个页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这不是一个demo</title> <style type="text/css"> *{margin: 0; padding: 0;} div{height: 100px; background: red;} </style> </head> <body> <div></div> </body> </html> 在谷歌浏览器下，我们可以看到不同手机的适配情况：可以看出，不管是i5/i6/i6plus下，div的宽度都为980px，这个980是什么值，为什么它好像和移动设备无关？其实这个980所表示的就是布局视口。布局视口layout viewport ：就是移动设备上用来装载我们的网页的那一块区域。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px之间。不同的设备有不同的宽度。最常见的宽度是980。下图是不同设备下布局视口的大小。布局视口有980像素，可是我们的屏幕很小，按理说应该会有滚动条才是，可实际上并没有。这就需要归功于另一个视口

在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？

阅读更多关于在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？

首先给出DOM结构 <divclass="box">　　<divclass="box-left"></div>　　<divclass="box-right"></div></div> 1.利用 float + margin 实现 .box { height: 200px; } .box > div { height: 100%; } .box-left { width: 200px; float: left; background-color: blue; } .box-right { margin-left: 200px; background-color: red; } 2.利用 calc 计算宽度 .box { height: 200px; } .box > div { height: 100%; } .box-left { width: 200px; float: left; background-color: blue; } .box-right { width: calc(100% - 200px); float: right; background-color: red; } 3.利用 float + overflow 实现 .box { height: 200px; } .box > div { height: 100%; } .box-left { width:

前端分享会

阅读更多关于前端分享会

1 前言 1-1 W3C标准 W3C标准，既一系列标准的集合，他的本质是结构标准语言。就像平时使用的HTML,CSS等都要遵守这些标准。我们这里只讨论W3C网页标准。根据网页主要有三部分组成:结构(Structure),表现(Presentation)和行为(Behavior)。对应的标准也分以下三方面: 结构化标准语言：HTML,XML,XHML 表现标准语言: CSS 行为标准语言: ECMAScript 为什么要遵循W3C标准? 对于我们开发者来说，我们是介于浏览器制造商和浏览器终端使用者的中间位置。也相当于说是一个接口的位置，也就是说我们要同时满足浏览器制造商和浏览器终端使用者的需求，用程序的语言来说就是“转换器”。也是说我们要想方设法的让我们的页面、我们的程序支持所有的浏览器，能够满足尽可能多多的用户。 HTML,XML,XHTML三者区别 HTML 指的是超文本标记语言(Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 XML 指可扩展标记语言（EXtensible Markup Language） XML 是一种标记语言，很类似 HTML XML 的设计宗旨是传输数据，而非显示数据 XML

移动端适配方案

阅读更多关于移动端适配方案

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

「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

阅读更多关于「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

本文来自尚妆前端团队南洋发表于尚妆github博客，欢迎订阅。移动端H5页面rem缩放方案flexible.js兼容375px方案的思路参考：移动端高清、多屏适配方案 viewport-and-flexible.js flexible.js github 一个新的项目复用了一些老页面，老页面是使用375px方案进行移动端适配的，meta[viewport]使用的是 <meta name="viewport" content="width=375, user-scalabe=no"> ，而新页面使用的是flexible.js伸缩方案，动态生成meta[viewport] <meta name="viewport" content="initial-scale=[num], user-scalabe=no"> 如何在老页面使用px布局的前提下，新页面使用rem布局，组件也使用rem布局，并且组件可以兼容老页面和新页面是本文的结果。首先会介绍375px方案和rem方案的实现原理。 375px方案 <meta name="viewport" content="width=375, user-scalabe=no"> 375px方案的页面开发过程对新人非常的友好，利用页面的布局视口（layout viewport）为固定值375px，和移动端浏览器窗口的自动缩放功能（视觉视口

订阅页面布局