跟燕青一起学Windows8应用开发:使用HTML+CSS制作居中布局


         跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率跟燕青一起学Windows8应用开发:使用HTML+CSS自适应垂直方向分辨率中笔者介绍了自适应的水平和垂直布局,那么还有神秘布局是程序经常遇到的呢?嗯,猜对了,那就是居中布局。最为常见的运用场合是登录窗口,本篇博客也将以此例,讨论如何制作居中布局。



         在设计居中布局时,HTMLCSS对运行的屏幕分辨率一无所知,那么如何才能够自适应屏幕分辨率呢?非常幸运,CSS中的topleft属性能够按照百分百进行定位,对于屏幕中心点,它的位置应该是left50%; top: 50%;。接下一个问题是:我如何制定界面的左上角坐标呢?在跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率一文中,我们知道了margin属性可以制定其于边界的距离,并且让人兴奋的是,它还能够是负值!WOW,看到了胜利的曙光了吗?:-)



 



在介绍CSS设置之前,不管三七二十一,我们先写个HTMLDIV吧,如图1所示

























1



1设计了一个登录界面,笔者将具体登录内容删除,重点讲解其中心位置布局。



 



2中的设置是本例的重点,它将position设置为绝对坐标(它将直接按照屏幕为中心,而不考虑其任何的子父包含关系)。因为登录界面的宽度是300个像素,高度是200个像素,所以按照中心点计算,界面应该向上偏移150个显示,向左偏移100个像素,映射到CSS的属性中,其设置为:margin-left: -150px; margin-top: -100px。为了让读者容易看清整体的布局,笔者将登录界面的背景设置为红色,在正常使用状态下,背景的设置可能是不需要的。







2



 



运行一下,图3是你要的结果吗?







3



Greato(_)o 哈哈



 



居中布局相比较于跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率跟燕青一起学Windows8应用开发:使用HTML+CSS自适应垂直方向分辨率中的水平和垂直布局而言,它是非常简单的,但是还是有几个基本点需要注意。为此,笔者还是留一道题目加深居中布局的理解:-)



 



题目1如何在屏幕某个特殊部位内进行居中布局?比如说屏幕的左上角有一个500x400的区域,我需要将login界面在此区域内居中布局。



 



【参考】



1.        
跟燕青一起学Windows8应用开发:创建HTML5 Metro应用程序



2.        
跟燕青一起学Windows8应用开发:安装Visual Studio 2011



3.        
跟燕青一起学Windows8应用开发:安装Windows8操作系统



4.        
跟燕青一起学Windows8应用开发:用CSS文件妆点你的应用



5.        
跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率



6.        
跟燕青一起学Windows8应用开发:使用HTML+CSS自适应垂直方向分辨率



 








有关编译器优化的更完整信息,请参阅优化通知

2 评论

顶部
匿名的头像

win8是用html5开发应用?太牛逼了

匿名的头像

学习了,谢谢

添加评论

有一个技术问题? 访问我们的论坛网站或软件产品有问题? 联系支持部门.