文档章节

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

369yun
 369yun
发布于 2015/11/30 15:12
字数 312
阅读 5
收藏 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
海淀
产品经理
私信 提问
【备忘】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
0
菜鸟程序员必备的5个编程网站,其中一个精品课程经15年改进!

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

W3Cschool
04/18
0
0
web前端开发小白需要怎样学习才能迅速掌握前端技术?

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

Java编程语言基础入门博客
2017/04/14
0
0
Web前端初学者都会遇到的问题

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

web前端小辰
05/24
0
0
无线客户端同学快速学习ReactNative的学习曲线

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

太阳黑子
2016/11/03
8
0

没有更多内容

加载失败,请刷新页面

加载更多

NPM install -save 和 -save-dev 傻傻分不清

本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html 回顾 npm install 命令 最近在写Node程序的时候,突然对 npm install 的-save和-save-dev 这两个参数的使用...

翔飘飘
11分钟前
0
0
spring-boot:run启动时,指定spring.profiles.active

Maven启动指定Profile通过-P,如mvn spring-boot:run -Ptest,但这是Maven的Profile。 如果要指定spring-boot的spring.profiles.active,则必须使用mvn spring-boot:run -Drun.profiles=test......

颖辉小居
11分钟前
0
0
抛弃console.log(),拥抱浏览器Debugger

译者按: 切换成本真的不高,建议使用开发者工具来Debug! 原文:How to stop using console.log() and start using your browser’s debugger 译者: Fundebug 为了保证可读性,本文采用意译...

Fundebug
15分钟前
0
0
Flask框架web开发:零基础入门

Flask框架是Python开发的一个基于Werkzeug和Jinja 2的web开发微框架,它的优势就是极其简洁,但又非常灵活,而且容易学习和应用。因此Flask框架是Python新手快速开始web开发最好的选择,此外...

笔阁
28分钟前
7
0
VMware前路难测,多个厂家群雄逐鹿

在人们高谈Salesforce、亚马逊等新兴云计算厂商取得的成就时,以VMware、HPE和Cisco为代表的老牌厂商也在进行着自己的转型和变化,而且还取得一定的进展。以VMware为例,虚拟机巨头公布了第二...

linuxCool
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部