前端学习笔记番外篇:仿WIN8 Metro UI DIV+CSS练习


       之所以叫番外篇,是因为这章是不算在学习进度里面的,这一章理由前面学习的相关知识进行仿造Metro UI进行DIV+CSS的布局练习。本次练习的代码含有js运行效果,所以想要看到完美的效果,请尽量在IE以外的浏览器进行测试。因为是一次普通的练习,所以并没有刻意针对IE做兼容。用IE运行,不影响css效果,但js效果运行会非常的……怎么说啦….反正坑爹就是了。

 

       先看看要达到的效果:

 

image

 

额….虽然说是Metro风格有那么一点点牵强,不过细节什么的就不用在意啦….我们来分析一下,像这样的界面要怎么做。首先,我们一眼就可以发现,页面上的DIV数量如果不经过大脑去数的话,为16个…不过因为拼图区域是居中在显示,所以在拼图区域外面肯定还有一个父级div,然后上面的Start文字的处理方式有两种,要么是拼图区域的父级div,要么就是另外一个div。而这里我是把文字这块另外算的一个div来处理的,所以页面上总的div数目就有18个!那么,我们先根据嵌套关系,写好相应的HTML代码:

 

html

 

好了,直到这里我们已经把眼睛感受到的结构转化成代码方式了。现在就应该是编写css代码让其能达到我们最后看到的效果。从现在开始,我们开始使用“外部样式表”的方式来进行css代码的引用,以达到内容和表现分离的原则(参见:http://www.52css.com/article.asp?id=657)。外部样式表的引用方式为:

“<link rel="stylesheet" type="text/css" href="../css/css.css"/>”

href中的内容是css文件的相对地址,或者绝对地址。看看效果图….首先最显眼的是这些东西,背景紫色,然后拼图区域居中,Start文字与拼图区域左边基本在一条线上。那么ok我们先来处理这几个效果,代码如下:

 

css


运行效果如下:

 

image

 

恩?…..左下角的日文?那是我的豆瓣音乐歌词= =||….不过细节不用在意,至少效果是我们想要的。

 

好了,现在我们可以对content(拼图区域,后面统称content)里面的div进行css的编写了。我们先通过效果图来分析一下,content中的布局是类似拼图的布局,而且每个div的大小不一样,但是在排版方面是有迹可循的。我们先根据效果图把其中div的大小分成四个大小,最下面一行为的两个为两个个大小,然后前三排的最后后面一行为一个大小,第二排的前两个和第三排三四个为一个大小,然后其他的div为一个大小,通过这样的分类后,我们可以为这16个div加上相应的class属性:

 

html

 

因为他们的高度都一样,所以我们以宽度来分类,如上,宽度分为160px,170px,75px,330px,340px,五个宽度。然后加上class属性后我们就可以考虑要怎么样写css才能排成效果图中的效果。其实,都不用怎么考虑就能想到,要达到这种效果,我们肯定是用浮动来进行布局。所以css代码也就呼之欲出了:

 

css

 

现在我们再看看效果:

 

image

 

基本上好像就是这个样子,不过其中好像有几个的颜色不是一样的,没事,像这样的我们可以对其进行单独的编写就好,这里就不演示了。这里提供实例代码,代码中的js部分并不在这里并不进行讲述。

 

代码下载地址:http://115.com/file/an8wu2ka#


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM