页面布局

web app变革之rem

由 最后都变了- 提交于 2020-03-13 23:55:45
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这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布

页面布局上 左 右底部

由 无人久伴 提交于 2020-03-09 06:19:21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DIV+CSS布局教程</title> <style type="text/css"> #Container{ width:100%; margin:0 auto;/*设置整个容器在浏览器中水平居中*/ background:#CF3; } #Header{ height:80px; background:#093; } #logo{ padding-left:50px; padding-top:20px; padding-bottom:50px; } #Content{ height:100%; /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度

01 DIV+CSS 固定页面布局

由 微笑、不失礼 提交于 2020-03-09 06:15:45
本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。 DIV+CSS布局中主要CSS属性介绍： Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。 Margin: Margin属性用于设置两个元素之间的距离。 Padding: Padding属性用于设置一个元素的边框与其内容的距离。 Clear: 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。 实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图： 代码： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

DIV+CSS布局-固定页面开度布局

由 ∥☆過路亽．° 提交于 2020-03-09 06:14:25
DIV+CSS布局中主要CSS属性介绍： Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。 Margin: Margin属性用于设置两个元素之间的距离。 Padding: Padding属性用于设置一个元素的边框与其内容的距离。 Clear: 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。 实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图： 代码： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR

今日头条屏幕适配方案（AndroidAutoSize）

由 大城市里の小女人 提交于 2020-03-07 02:34:38
鸿洋提出的屏幕适配 AndroidAutoLayout ，目前已经停止维护，故不建议使用 今日头条适配方案AndroidAutoSize框架链接： https://www.jianshu.com/p/4aa23d69d48 ，以及关于该方案的文章： https://www.jianshu.com/p/4aa23d69d481 下面我做了一下简单的梳理，便于自己更好的掌握，多谢大神为我们做的贡献！ AndroidAutoSize 和 AndroidAutoLayout 的区别： AndroidAutoLayout 只能使用 px 作为布局单位，而 AndroidAutoSize 恰好相反，在布局中 dp、sp、pt、in、mm 所有的单位都能支持，唯独不支持 px,这也意味着 AndroidAutoSize 和 AndroidAutoLayout 在项目中可以共存，互不影响，所以使用 AndroidAutoLayout 的老项目也可以放心的引入 AndroidAutoSize，慢慢的完成屏幕适配框架的切换 下面主要介绍下今日头条的适配方案： AndroidAutoSize 在使用上非常简单，只需要填写设计图尺寸这一步即可接入项目，但需要注意的是，AndroidAutoSize 有两种类型的布局单位可以选择，一个是 主单位 (dp、sp) ，一个是 副单位 (pt、in、mm)

教你如何更好的进行网页布局

由 一笑奈何 提交于 2020-03-06 16:45:06
教你如何更好的进行网页布局（一） 网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的布局。 网页布局类型 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。 1、“国”字型： 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主 要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2、拐角型： 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 3、标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 4、左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文

网页版面设计步骤和布局技巧

由 社会主义新天地 提交于 2020-03-06 16:38:41
版面设计也可以理解为布局设计，就是我们在浏览器上说看的一个完整的页面。设计师们如何将所有要体现的内容有机的整合和分布，达到某种视觉效果，这就叫做版面布局。我们将如何做好网站的版面设计呢？ 本文将介绍网页版面设计的步骤和布局技巧 网页版面设计步骤 首先我认为是“过程注定了结果”，重视你所做的每一步并把它尽量的做到最好，相信结果也不会偏离轨道。下面先让我们来了解一些版面设计的步骤： 1、构思（结构的搭建） 当然在构思之前我们总需要了解很多，如：客户的需求、网站的定位、受众群等很多方面的事情，也就是说需要了解策划方案。如果我们连这些问题都还不清楚的话，请先不要去想着设计，因为在不了解客户需求的情况下，盲目的去把页面设计达到某种视觉效果是很难的、也会很容易被客户推翻的，即使客户不懂，过关了，但是如果没有真正为客户带来价值，它还是失败的。 当我们真正了解客户需求后，你可以尽可能的发挥你的想象力，将你想到的"构思"画上去（用笔和纸或者软件都可以，根据自己的习惯而定），这是属于一个构思的过程，不讲究细腻工整，也不必考虑到一些细节的部分，只要用几条粗陋的线条勾画出创意的轮廓即可。尽可能的多构思一些，以便选择一个最适合的进行搭建。 2、粗略布局 这个阶段是个试用期，我们只要把重要的元素和网页结构相结合，看看框架是否合理、适合客户的需求，如果都不适合你该知道怎么做了！ 3、完善布局

前端基础-HTTP,HTML,浏览器

由 徘徊边缘 提交于 2020-03-05 01:07:31
前端基础 一、HTTP,HTML,浏览器 1、说一下 http 和 https https 的 SSL 加密是在传输层实现的。 (1)http 和 https 的基本概念: http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器 端请求和应答的标准(TCP)，用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以 使浏览器更加高效，使网络传输减少。 HTTP 是一个基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。 它于 1990 年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在 WWW 中使用的是 HTTP/1、0 的第六版，HTTP/1、1 的规范化工作正在进行之中，而且 HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP 协议工作于客户端-服务端架构为上。浏览器作为 HTTP 客户端通过 URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送 响应信息。 https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

iOS -- 开源项目和库

由 為{幸葍}努か 提交于 2020-03-02 05:48:27
TimLiu-iOS 目录 UI 下拉刷新 模糊效果 AutoLayout 富文本 图表 表相关与Tabbar 隐藏与显示 HUD与Toast 对话框 其他UI 动画 侧滑与右滑返回手势 gif动画 其他动画 网络相关 网络连接 图像获取 网络聊天 网络测试 网页框架 WebView与WKWebView Model 通讯录 其他库 数据库 缓存处理 PDF 图像浏览及处理 摄像照相视频音频处理 响应式框架 消息相关 消息推送客户端 消息推送服务器端 通知相关 版本新API的Demo 代码安全与密码 测试及调试 动态更新 AppleWatch 完整项目 好的文章 VPN Xcode插件 美工资源 开发资源 开发资料 swift 他人开源总结 开发博客列表 ======== 具体内容 ============================= ======== UI 下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件。 SVPullToRefresh - 下拉刷新控件。 MJRefresh - 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能。可以自定义上下拉刷新的文字说明。具体使用看“使用方法”。 （国人写） XHRefreshControl - XHRefreshControl 是一款高扩展性

基于HTML5和CSS的登录页面

由 徘徊边缘 提交于 2020-03-01 22:58:11
简介： 初学小萌新一个，一个简单的登录页面，只用到了html和css 其中，背景图可以自行更换，在css样式下的.login background里面。 顶部text文本绝对布局position: absolute;在屏幕上方。 底部floor绝对布局position: absolute;在底部。 中间的登录框和welcome固定游览器中部，不随滚动条改变。 ，只为了完成简单的登录功能，form的action默认的是百度，需要连接别的网址的小伙伴可以自行修改。利用H5的placeholder来默认提示请输入用户名和密码，输入字符就会消失。 最后，如果有什么错误和问题欢迎各位大神指导。 效果图展示： 整体代码如下： 在这里插入代码片 `<!doctype html> <html> <head> <meta charset="utf-8"> <title>login</title> <style type="text/css"> * { margin: 0; padding: 0; } .login { min-height: 960px; background: url(image/sea.jpg); } .login-tip { position: absolute; /* 相对于浏览器进行定位 */ top: 15px; text-align: center; width:
订阅 页面布局