Win8 HTML5与JS编程学习笔记(二)
近期一直受到win8应用的Grid布局困扰,经过了半下午加半个晚上的奋斗,终于是弄明白了Grid布局方法的规则。之前我是阅读的微软官方的开发教程,书中没有详细说明CSS3的布局规则,自己鼓捣了半天也是一头雾水,于是又找到了官方的启蒙教程的布局一张,仔细阅读了一遍,又思考了代码,并在代码的基础上实验,终于是明白了布局方法。官方教程地址是:http://msdn.microsoft.com/zh-cn/library/windows/apps/jj841108.aspx
微软基于CSS3开发了Grid布局方法,它的思路是定义主网格容器与子网格容器,在主网格容器中划分网格,在子网格容器中直接选择所在位置。一般所选用的容器都是div元素,难点在于div的相互嵌套中主网格容器与子网格容器的关系。
一、单层div的容器用法
首先定义一段简单的html代码,包含了一个div块级元素和一些成员,如下:
<div id="mainGrid">
<img id="displayImg" src="./images/1.jpg" width="480" height="320"/>
<button id="button1">Click</button>
</div>
现在的显示布局为:
接下来通过设置CSS来修改它。
第一步是定义主网格容器,即把mainGrid定义为主网格容器,方式如下:
#mainGrid {
display:-ms-grid;
-ms-grid-columns:auto;
-ms-grid-rows:480px 480px;
}
其中display属性指明为-ms-grid网格布局类型容器,其中ms代表微软,下面的-ms-grid-columns与rows分别指定了行和列的划分距离,每一个数据代表网格中的一个部分,不同部分之间用空格分隔,例如上面的代码指明了一列、两行网格,其中列随显示元素的大小变化,两行都是480px那么长。
然后是对主容器内元素进行定义,因为元素直接在主网格容器之内,所以直接调用即可,如下:
#displayImg{
-ms-grid-row:1;
}
#button1{
-ms-grid-row:2;
}
这里和主容器相比去掉了s,使用-ms-grid-row或者column来定位它位于网格的哪一个部分,可以看到图片元素选择了第一行,按钮元素选择了第二行,由于只有一列,所以无需选择。这就相当于把图片和按钮放入网格的上半部分和下半部分。
接下来对图片的大小进行优化,使用max-height与max-width属性可以指定图片显示的极限大小;使用height与width则强制规定图片显示的大小。
对于图片元素,添加限制后变为如下CSS代码:
#displayImg{
-ms-grid-row:1;
width:480px;
max-height:320px;
}
显示效果如下:
由此可见利用网格可以高效的实现美观的布局。
二、多层div的容器用法
对于多层的div嵌套,一般思路是由最外层规定总体网格布局,然后由第二级网格布局继续分割,直至进入最底层div,也就是说上一级div是本级div的主网格布局,只有最内层div内部的元素才是纯粹的子网格布局。换句话说,在中间层的CSS代码中,会出现带s和不带s的row与column同时出现的情况。
需要注意的是,不连续的容器与元素之间不能直接传递网格,例如A为div,B为A内元素,C为A内层的div,D为C内元素,则A的属性可以作用于B和C,但不能作用于D,在C内需重新定义二级主网格容器。定义网格容器千万不要忘记display属性,并且带s的row与column属性与不带s的可以并存,从而可以实现对网格内部的继续分割,具体过程如下:
首先在最外层div内部再嵌套一层div元素,并放置一个p元素与一个按钮元素,如下:
<div id="mainGrid">
<img id="displayImg" src="./images/1.jpg" width="480" height="320"/>
<button id="button1">Click</button>
<div id="secondGrid">
<p id="p1">Test Click2</p>
<button id="button2">Click2</button>
</div>
</div>
现在要实现的是字符和按钮在当前所显示元素的右边,并且文字和按钮各占一列。
要实现这个功能,需要把mainGrid网格改为两列,然后让secondGrid选择占据主网格的第一行第二列,再在secondGrid中重新定义一行两列的网格,来放置段落和按钮,具体代码如下
#mainGrid {
display:-ms-grid;
-ms-grid-columns:auto auto;
-ms-grid-rows:320px 10px 10px;
}
#secondGrid {
display:-ms-grid;
-ms-grid-column:2;
-ms-grid-columns:120px 120px;
}
#p1 {
-ms-grid-column:1;
}
#button2 {
-ms-grid-column:2;
}
显示效果如下:
经过上面两个练习,我掌握了Grid布局的基本方法,体会到了它的便捷之处,它很方便,但也不太好学,先将自己的体会写在这里,供自己以后查阅,也供大家参考。
补充:近期学习win8的官方教材电子书,发现其中使用了section标签,section标签要调用css应当先指定class属性,然后使用".<class>"进行调用,例如class="test",则调用要写成 .test{}
Win8 HTML5与JS编程学习笔记(二)的更多相关文章
- Win8 HTML5与JS编程学习笔记(一)
微软的Visual Studio提供了多种构成win8应用的方式,其中最让我感到激动的是基于网页设计语言的开发模式,它提供了结合HTML5与Javascript来开发应用的方法,通过这种方法进行开发, ...
- vue.js路由学习笔记二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- linux shell编程学习笔记(二) --- grep命令
Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...
- FFmpeg编程学习笔记二:音频重採样
ffmpeg实现音频重採样的核心函数swr_convert功能很强大,但是ffmpeg文档对它的凝视太过简单.在应用中往往会出这样那样的问题,事实上在读取数据->重採样->编码数据的循环中 ...
- 【Linux_Shell 脚本编程学习笔记二、打印菜单】
综合实例: 打印选择菜单,一键安装Web服务 [root@zuoyan script]# sh menu.sh 1.[install lamp] 2. [install lnmp] 3. [ex ...
- 多线程编程学习笔记——async和await(二)
接上文 多线程编程学习笔记——async和await(一) 三. 对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...
- 学习笔记(二)--->《Java 8编程官方参考教程(第9版).pdf》:第七章到九章学习笔记
注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...
- 纯JS实现KeyboardNav(学习笔记)二
纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...
- 转 网络编程学习笔记一:Socket编程
题外话 前几天和朋友聊天,朋友问我怎么最近不写博客了,一个是因为最近在忙着公司使用的一些控件的开发,浏览器兼容性搞死人:但主要是因为这段时间一直在看html5的东西,看到web socket时觉得很有 ...
随机推荐
- EasyUI常用组件(基础)
---------------------------------------------------------------------------------------------------- ...
- Ubuntu安装telent服务器时出现:apt-get:Package has no installation
当我在终端敲下这条命令的时候,系统就提示telnetd:apt-get:Package has no installation sudo apt-get install xinetd telnetd ...
- JAVA面向对象-----封装
我们日常使用的电脑主机,把cpu.内存.主板等等都封装到机箱里面去.假如没有机箱的话的出现什么问题,主机.主板全部都散落在一处,然后开机没有开机按钮,那么需要我们直接操作接跳线才能把电脑开启.这样子的 ...
- UNIX网络编程——原始套接字的魔力【续】
如何从链路层直接发送数据帧 上一篇里面提到的是从链路层"收发"数据,该篇是从链路层发送数据帧. 上一节我们主要研究了如何从链路层直接接收数据帧,可以通过bind函数来将原始套接字绑 ...
- java中&和&&的区别 位运算
1.1. 逻辑与的运算符功能 1.1.1. 测试&& public static void main(String[] args) { int x=5; if (x==6 && ...
- 剑指Offer——美团内推+校招笔试题+知识点总结
剑指Offer--美团内推+校招笔试题+知识点总结 前言 美团9.9内推笔试.9.11校招笔试,反正就是各种虐,笔试内容如下: 知识点:图的遍历(DFS.BFS).进程间通信.二叉查找树节点的删除及中 ...
- antlr v4 使用指南连载4——词法规则入门之黄金定律
词法规则入门 黄金定律一二 若输入串能被多个词法规则匹配,那么声明在词法文件最前面的规则生效. parser parser grammar HelloParser; options { languag ...
- Android简易实战教程--第七话《在内存中存储用户名和密码》
首先是配置文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...
- Unable to instantiate Action, MenuAction, defined for 'QueryMenuAll' in namespace '/'MenuAction
我刚好也遇到这样的情况,发现是自己的配置文件里写错了,spring里的id属性值要对应struts里class属性值.
- open_links_per_instance 和 open_links 参数说明
1.1 OPEN_LINKS Property Description Parameter type Integer Default value 4 Modifiable No --即修改需要重启实 ...