文档章节

新手入门) 前端开发小基础

369yun
 369yun
发布于 2015/11/30 15:12
字数 312
阅读 5
收藏 0
点赞 0
评论 0

1.空白模版<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telephone=no, email=no" />
    <title>Document</title>
</head>
<body>

</body>
</html>

2.水平垂直居中

(1)父元素display:table  子元素display:table-cell .用text-align和vertical-align设置水平和垂直居中
(2)transform
(3)flex

3.页面布局


1.header+page 2.page+footer 3. header+page+footer
html:
<header class="header"></header>
<div class="wrap-page">
    <section class="page"></section>
    <section class="page"></section>
    <section class="page"></section>
    ...
</div>
<footer class="footer"></footer>


css:
// 整体布局
.header,.footer,.wrap-page{
  position:absolute;
  left:0;
  right:0;
  background-color: #fff;
}
.header,.footer{
  height:44px;
  background-color: #fff;
  text-align: center;
  z-index:900;
  line-height:44px;
}
.header{
  top: 0;
  border-bottom: 1px solid #f00;
}
.footer{
  bottom: 0;
  border-top: 1px solid #f00;
}
.wrap-page{
  top: 0;
  bottom: 0;
}

// page布局   
// 默认有header无footer,所以top为header的高度,bottom为0    
.page {
  position: absolute;
  left: 0;
  width: 100%;
  top: 44px;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

// layout
// 无header有footer,所以page排除footer的高度,top为0,bottom为footer的高度
.page-not-footer {
  top: 0;
  bottom: 44px;
}
// 有header和footer,所以page排除两者的高度,top为header的高度,bottom为footer的高度
.page-not-header-footer {
  top: 44px;
  bottom: 44px;
}

// page status
.page-active {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.page-prev {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.page-next {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

本文转载自:http://bbs.369cloud.com/forum.php?mod=viewthread&tid=667

共有 人打赏支持
369yun
粉丝 2
博文 33
码字总数 7317
作品 0
海淀
产品经理
web前端开发小白需要怎样学习才能迅速掌握前端技术?

  今天来和大家讲讲零基础小白学习web前端开发,需要怎样学习才能迅速掌握前端技术?学习前端开发又需要用到哪些开发工具呢?这里首先分享一下我自己的经验,我自己目前是搞后端开发【也就是...

Java编程语言基础入门博客 ⋅ 2017/04/14 ⋅ 0

【备忘】2017最新妙味课堂VIP视频教程全套 无加密

下载地址 http://www.ai998.cn/thread-1107-1-1.html 【备忘】2017最新妙味课堂VIP视频教程全套 无加密 课程大纲 01:PhotoShop基础 02:代码入门篇 03:HTML5基础 04:HTML5高级 05:HTML+...

qq_38155396 ⋅ 2017/08/30 ⋅ 0

Web前端初学者都会遇到的问题

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/24 ⋅ 0

菜鸟程序员必备的5个编程网站,其中一个精品课程经15年改进!

你的计算机基础和编程素养决定了你的能力,以及未来的薪资匹配。 当你刚刚入门编程,为了打下扎实的编程基础,w3cschool给新手程序员推荐5个非常适合新手的编程网站: 0、Coursera.org Cour...

W3Cschool ⋅ 04/18 ⋅ 0

浅谈零基础新手学HTML5前端开发学习路线

  浅谈HTML5前端开发学习路线。学习HTML5开发先学学HTML、CSS3、JS这些基本的知识,HTML5学习入门的内容基本差不多,但是学习的成果却千差万别,这就是所谓的基础,所谓万丈高楼平地起,地...

Java编程语言基础入门博客 ⋅ 2017/04/04 ⋅ 0

无线客户端同学快速学习ReactNative的学习曲线

作为非前端开发人员,这两天对React-Native以及所涉及的一些必须的技术进行了一下恶补,把网上比较好的学习资料搜集了一下,方便感兴趣的同学更快的了解和切入RN的开发,并且快速扫清背景知识...

太阳黑子 ⋅ 2016/11/03 ⋅ 0

大话WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

SFLYQ ⋅ 2017/07/14 ⋅ 0

前端开发-从入门到Offer

解决你的前端面试 有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥 Web 性能、构建系统以及 CSS 引擎等...

掘金官方 ⋅ 2017/12/28 ⋅ 0

总有你要的编程书单(GitHub )

目录 IDE IntelliJ IDEA 简体中文专题教程 MySQL 21分钟MySQL入门教程 MySQL索引背后的数据结构及算法原理 NoSQL Disque 使用教程 Neo4j .rb 中文資源 Redis 命令参考 Redis 设计与实现 The ...

汇智网 ⋅ 2017/11/22 ⋅ 0

free-programming-books-zh.md

语言无关MySQL NoSQL PostgreSQL Web WEB服务器 其它 函数式概念 分布式系统 在线教育 大数据 操作系统 数据库 智能系统 正则表达式 版本控制 程序员杂谈 管理和监控 编程艺术 编译原理 编辑...

银月光海 ⋅ 2016/05/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

005. 深入JVM学习—Java堆内存参数调整

1. JVM整体内存调整图解(调优关键) 实际上每一块子内存区域都会存在一部分可变伸缩区域,其基本流程:如果内存空间不足,则在可变的范围之内扩大内存空间,当一段时间之后,内存空间不紧张...

影狼 ⋅ 30分钟前 ⋅ 0

内存障碍: 软件黑客的硬件视图

此文为笔者近日有幸看到的一则关于计算机底层内存障碍的学术论文,并翻译(机译)而来[自认为翻译的还行],若读者想要英文原版的论文话,给我留言,我发给你。 内存障碍: 软件黑客的硬件视图...

Romane ⋅ 今天 ⋅ 0

SpringCloud 微服务 (七) 服务通信 Feign

壹 继续第(六)篇RestTemplate篇 做到现在,本机上已经有注册中心: eureka, 服务:client、order、product 继续在order中实现通信向product服务,使用Feign方式 下面记录学习和遇到的问题 贰 or...

___大侠 ⋅ 今天 ⋅ 0

gitee、github上issue标签方案

目录 [TOC] issue生命周期 st=>start: 开始e=>end: 结束op0=>operation: 新建issueop1=>operation: 评审issueop2=>operation: 任务负责人执行任务cond1=>condition: 是否通过?op3=>o......

lovewinner ⋅ 今天 ⋅ 0

浅谈mysql的索引设计原则以及常见索引的区别

索引定义:是一个单独的,存储在磁盘上的数据库结构,其包含着对数据表里所有记录的引用指针. 数据库索引的设计原则: 为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索...

屌丝男神 ⋅ 今天 ⋅ 0

String,StringBuilder,StringBuffer三者的区别

这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面。 首先说运行速度,或者说是, 1.执行速度 在这方面运行速度快慢为:StringBuilder(线程不安全,可变) > StringBuffer...

时刻在奔跑 ⋅ 今天 ⋅ 0

java以太坊开发 - web3j使用钱包进行转账

首先载入钱包,然后利用账户凭证操作受控交易Transfer进行转账: Web3j web3 = Web3j.build(new HttpService()); // defaults to http://localhost:8545/Credentials credentials = Wallet......

以太坊教程 ⋅ 今天 ⋅ 0

Oracle全文检索配置与实践

Oracle全文检索配置与实践

微小宝 ⋅ 今天 ⋅ 0

mysql的分区和分表

1,什么是mysql分表,分区 什么是分表,从表面意思上看呢,就是把一张表分成N多个小表,具体请看mysql分表的3种方法 什么是分区,分区呢就是把一张表的数据分成N多个区块,这些区块可以在同一...

梦梦阁 ⋅ 今天 ⋅ 0

exception.ZuulException: Forwarding error

错误日志 com.netflix.zuul.exception.ZuulException: Forwarding error Caused by: com.netflix.hystrix.exception.HystrixRuntimeException: xxx timed-out and no fallback available. Ca......

jack_peng ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部