Html5 JumpStart学习笔记3：Advanced Layout and Animation

Module Agenda

　　Legacy(遗产) layouts

　　Flexbox

　　Grid

　　Transforms

　　Transitions(过渡、转变) and Animations

1、Legacy layouts

（1）positioning

    #id01{position:absolute;top:25px;left:50px;z-index:0;}#id02{position:relative;top:25px;left:50px;z-index:1;}

　　position有四个属性值：relative、absolute、fixed、static。仅根据字面意思不是很好理解，以实例解释如下：（参见http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html）

<!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><title></title><style>/*relative 是相对元素本身的位置进行偏移relative的偏移是基于对象的margin的左上侧absolute：（1）当sub1的父级对象也设置了position属性，且position的属性值为absolute或relative时，sub1按照父级对象来定位，这个定位点将忽略padding，从padding的左上角进行定位（2）如果sub1不存在一个有着position属性的父对象，那么就以body定位sub2的位置到哪里去了呢？由于position设为absolute后，导致sub1溢出正常的文档流，就像它不属于parent一样。此时sub2将获得sub1的位置，它的文档流不再基于sub1，直接从parent开始。fixed 是特殊的absolute，即fixed总是以body为定位对象static 是position的默认值，一般不设置position属性时，会按照正常的文档流进行排列*/#sub1{position:relative;padding:5px;top:5px;left:5px;    }</style>
</head>
<body><div id="parent"><div id="sub1">sub1</div><div id="sub2">sub2</div></div>
</body>
</html>

（2）display

    .vanish{display:none;}.centered{display:table-cell;min-height:200px;min-width:200px;text-align:center;vertical-align:middle;border:1px solid #ff4444;}

　　注意display属性有一个值是table-cell，可以将子元素垂直居中显示，下面以一张图片在div中的居中显示来说明：

a. 用了display:table-cell的效果

<head><meta charset="utf-8" /><title></title><style>div {display:table-cell;height:400px;width:400px;text-align:center;vertical-align:middle;border:1px solid #ff4444;}</style>
</head>
<body><div><img src="机柜微环境.png" /></div>
</body>

b. 没用display:table-cell的效果

<head><meta charset="utf-8" /><title></title><style>div {/*display:table-cell;*/height:400px;width:400px;text-align:center;vertical-align:middle;border:1px solid #ff4444;}</style>
</head>
<body><div><img src="机柜微环境.png" /></div>
</body>

　　效果杠杠滴，大家可以随意感受一下。以前吧，做这种图片的居中显示，要把图片放在<table>的<tr>的<td>中，十分麻烦；自从用了table-cell，腰不酸腿不疼了，大家如果有更好的药可以推荐一下。

（3）float

（4）z-index

2、Flexbox

（1）horizontal or vertical，这个玩意儿可以做成横的，也可以做成竖的

（2）packing : is the alignment of the child items along the excessive(过多的) layout.packing controls the spacing of the child items in the horizental direction. packing控制着子元素在水平方向上的间距

　　下面是微软JumpStart教程上的例子，此例主要说明-ms-flex-pack属性的用法：

<body><div id="flexbox1"><div></div><div></div><div></div></div><style>.flexbox #flexbox1 {margin-top:20px;    display:-ms-flexbox;   width:100%;-ms-flex-pack:distribute;/*分配，散布*/border:1px solid gray;}.flexbox #flexbox1 > div{min-width:80px;min-height:80px;}  .flexbox #flexbox1 > div:nth-child(1){background-color:red;}      .flexbox #flexbox1 > div:nth-child(2){background-color:green;}    .flexbox #flexbox1 > div:nth-child(3){background-color:blue;}</style>
</body>

　　由于上例中“-ms-flex-pack:distribute;”，使flexbox的子元素散列分布，三个div左右留有相同宽度的间隔。

（3）alignment

（4）flex

　　下面的例子主要说明-ms-flex属性的用法，该属性有三个参数：第一个是relative amount（相对大小，是各个div间的相对大小），第二个是recommended size（推荐的大小，其父级元素对此属性做了控制，不需要太多设置）。主要理解第一个参数的用法。

.flexbox #flexxingFlexbox{    margin-top:20px;    display:-ms-flexbox;
}
.flexbox #flexxingFlexbox > div {min-width:80px;min-height:80px;}
.flexbox #flexxingFlexbox > div:nth-child(1){background-color:red;-ms-flex:1 0 auto;}
.flexbox #flexxingFlexbox > div:nth-child(2){background-color:green;-ms-flex:2 0 auto;}
.flexbox #flexxingFlexbox > div:nth-child(3){background-color:blue;}

　　上例中，绿色div的-ms-flex属性的第一个参数值“2”是红色div该参数值“1”的两倍，所以绿色div的长度是红色的两倍。

（5）wrapping（包装）

　　Flexbox items can wrap to the next line instead of causing overflow.下面展示了当-ms-flex-wrap属性值为wrap时的效果

.flexbox #wrappingFlexbox {margin-top:20px;    display:-ms-flexbox;-ms-flex-wrap:wrap;    width:100%;
}
.flexbox #wrappingFlexbox > div {min-width:140px;min-height:140px;    background-color:gray;    margin:5px;    font-size:60px;   padding:15px;
}
.flexbox #wrappingFlexbox > div:nth-child(7) {background-color:red;
}

you may actually be asking,"is the flexbox what's used to implement tails on the start screen in windows8?"--No!

3、Grid

（1）power of tables but implemented in CSS

（2）absolute rows and columns

（3）fractional(部分的；分数的；分级的) rows and columns

<body><div id="simple"><h2>Simple</h2><div class="explanation">This simple 2x2 grid has 4 elements that are each assigned their own "cell".</div><div class="msgrid"><div>A</div><div>B</div><div>C</div><div>D</div></div></div><style>/* Simple */.grid #simple > div.msgrid { display: -ms-grid; -ms-grid-columns: 250px 250px; -ms-grid-rows: 250px 250px; }.grid #simple > div.msgrid > div { border: 1px solid gray; }.grid #simple > div.msgrid > div:nth-child(2) { -ms-grid-column: 2; -ms-grid-row: 1; }.grid #simple > div.msgrid > div:nth-child(3) { -ms-grid-row: 2; }.grid #simple > div.msgrid > div:nth-child(4) { -ms-grid-column: 2; -ms-grid-row: 2; }</style>
</body>

（4）spanning(生成；跨越；横跨)

/* Rowspans */
.grid #rowspans > div.msgrid {display: -ms-grid;-ms-grid-columns: 100px 1fr 100px;-ms-grid-rows: 100px 1fr 100px;width:600px;height: 400px;
}.grid #rowspans > div.msgrid > div:nth-child(1) {-ms-grid-column: 1;-ms-grid-row: 1;-ms-grid-row-span: 2;border: solid 2px blue;
}.grid #rowspans > div.msgrid > div:nth-child(2) {-ms-grid-column: 2;-ms-grid-row: 2;-ms-grid-column-span: 2;border: solid 2px green;
}.grid #rowspans > div.msgrid > div:nth-child(3) {-ms-grid-column: 2;-ms-grid-row: 3;border: solid 2px red;
}

（5）alignment

4、Transforms

rotate (旋转)

skew (歪斜)

scale (比例；缩放)

translate (调动；平移)

#pic:hover{  transform:scale(2) translate(50px,50px) rotate(10deg);
}

5、Transitions(过渡、转变) and Animations

transition

.someClass{   transition: all 1s;
}
.someClass:hover{     border-radius: 50%;
}

animation

.animate-get-angry {animation: get-angry 5s forwards;
}@keyframes get-angry {0%   {box-shadow: 0 0 1px 1px #000000;text-shadow: 0 0 #ffffff;border-radius: 0%;}60%  {color: #991100; font-size: 22pt; text-shadow: blue;}80%  {color: #FF0000; font-size: 24pt; }90%  {color: #22DD22; font-size: 16pt; }100% {color: #110000; font-size: 40pt; background-color: #000000; font-weight: bold;box-shadow: 0 0 30px 15px #000000;border-color: black; text-shadow: 0 0 10px 2px #22DD22;border-radius: 50%; }
}

转载于:https://www.cnblogs.com/jacktag/archive/2013/04/12/3017449.html

Html5 JumpStart学习笔记3：Advanced Layout and Animation相关推荐

前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础今天是居家隔离第一天,自学HTML5. 1.1HTML概述什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
cs224w（图机器学习）2021冬季课程学习笔记20 Advanced Topics on GNNs
诸神缄默不语-个人CSDN博文目录 cs224w(图机器学习)2021冬季课程学习笔记集合文章目录 1. Advanced Topics on GNNs 2. Limitations of Grap ...
web前端html5+css3学习笔记(1)
开启我的第一篇博客~~~ 记录学习html+css的笔记目录一.认识两位先驱二.计算机的组成 1.硬件 2.软件三.浏览器与内核四.网页标准五.HTML历史* 一.认识两位先驱图灵:人工 ...
HTML5 CSS学习笔记
最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程_哔哩哔哩_bilibili 代码地址:HTML5+CSS: 用于学习.练习前端的相关知识. 目录 HTML 1.html ...
前端（HTML5基础学习笔记）
以下学习路线都是基于自己看的黑马程序员视频总结而来学习路线:HTML5 -> CSS3 -> H5C3 一.HTML简介 1. 网页 2. 常用游览器 3. Web标准(重点) 二.HT ...
HTML5 案例学习笔记
目录 1 meta标签 1.1 简介 1.2 属性及取值 1.3 案例 2 常用标签 2.1 标题 2.2 段落 2.3 换行 2.4 水平分隔线 2.5 删除线 2.6 下划线 2.7 加粗 2. ...

Html5 JumpStart学习笔记3：Advanced Layout and Animation

Html5 JumpStart学习笔记3：Advanced Layout and Animation相关推荐

最新文章

热门文章