文档章节

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

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
海淀
产品经理
web前端开发小白需要怎样学习才能迅速掌握前端技术?

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

Java编程语言基础入门博客
2017/04/14
0
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
Web前端初学者都会遇到的问题

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

web前端小辰
05/24
0
0
菜鸟程序员必备的5个编程网站,其中一个精品课程经15年改进!

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

W3Cschool
04/18
0
0
浅谈零基础新手学HTML5前端开发学习路线

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

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

没有更多内容

加载失败,请刷新页面

加载更多

web打印控件 LODOP的详细api

web打印控件 LODOP的详细api

wangxujun59
38分钟前
2
0
从一次小哥哥与小姐姐的转账开始, 浅谈分布式事务从理论到实践

分布式事务是个业界难题,在看分布式事务方案之前,先从单机数据库事务开始看起。 什么是事务 事务(Transaction)是数据库系统中一系列操作的一个逻辑单元,所有操作要么全部成功要么全部失...

中间件小哥
41分钟前
6
0
荣登Github日榜!微信最新开源MMKV

MMKV 开源当日即登Github Trending日榜,三日后荣登周榜。MMKV 在腾讯内部开源半年,得到公司内部团队的广泛应用和一致好评。 MMKV 是基于 mmap 内存映射的移动端通用 key-value 组件,底层序...

腾讯开源
50分钟前
3
0
前端取色工具:jcpicker

http://annystudio.com/software/colorpicker/#jcp-download

轻量级赤影
52分钟前
1
0
Swift - 将图片保存到相册

import Photos func loadImage(image:UIImage) { UIImageWriteToSavedPhotosAlbum(image, self, #selector(saveImage(image:didFinishSavingWithError:contextInfo:)), ni......

west_zll
58分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部