网站找哪些单位做实名认证,中国建设银行官方网站纪念币预约,华设设计集团股份有限公司,网站广告出价平台近期一直受到win8应用的Grid布局困扰#xff0c;经过了半下午加半个晚上的奋斗#xff0c;终于是弄明白了Grid布局方法的规则。之前我是阅读的微软官方的开发教程#xff0c;书中没有详细说明CSS3的布局规则#xff0c;自己鼓捣了半天也是一头雾水#xff0c;于是又找到了… 近期一直受到win8应用的Grid布局困扰经过了半下午加半个晚上的奋斗终于是弄明白了Grid布局方法的规则。之前我是阅读的微软官方的开发教程书中没有详细说明CSS3的布局规则自己鼓捣了半天也是一头雾水于是又找到了官方的启蒙教程的布局一张仔细阅读了一遍又思考了代码并在代码的基础上实验终于是明白了布局方法。官方教程地址是http://msdn.microsoft.com/zh-cn/library/windows/apps/jj841108.aspx 微软基于CSS3开发了Grid布局方法它的思路是定义主网格容器与子网格容器在主网格容器中划分网格在子网格容器中直接选择所在位置。一般所选用的容器都是div元素难点在于div的相互嵌套中主网格容器与子网格容器的关系。 一、单层div的容器用法 首先定义一段简单的html代码包含了一个div块级元素和一些成员如下div idmainGridimg iddisplayImg src./p_w_picpaths/1.jpg width480 height320/button idbutton1Click/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为divB为A内元素C为A内层的divD为C内元素则A的属性可以作用于B和C但不能作用于D在C内需重新定义二级主网格容器。定义网格容器千万不要忘记display属性并且带s的row与column属性与不带s的可以并存从而可以实现对网格内部的继续分割具体过程如下 首先在最外层div内部再嵌套一层div元素并放置一个p元素与一个按钮元素如下 div idmainGridimg iddisplayImg src./p_w_picpaths/1.jpg width480 height320/button idbutton1Click/buttondiv idsecondGridp idp1Test Click2/pbutton idbutton2Click2/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进行调用例如classtest则调用要写成 .test{} 转载于:https://blog.51cto.com/570842253/1412907
