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

最新推荐文章于 2024-07-11 15:29:37 发布

weixin_30596343

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量92

点赞数

文章标签：前端 ui xhtml ViewUI

原文链接：http://www.cnblogs.com/fatlee/archive/2012/05/25/learn_css_html2_OVA.html

版权

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

先看看要达到的效果：

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

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿metro风格UI</title>
</head>
<body>
     <div id=”start”>Start</div>
     <div id=”content”>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
     </div>
</body>
</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我们先来处理这几个效果，代码如下：

csshtml,body{
	min-width:700px;
	min-height:450px;
	background-color:#320442;
}

#start{
	width:690px;
	margin-top:50px;
	font-size:46px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#E2CDEB;
	margin:80px auto 0px auto;
}

#content{
	display:table;
	width:700px;
	height:450px;
	margin:50px auto 50px auto;
	background-color:#000;//便于效果的展示，可以先加个黑色的背景色
}

运行效果如下：

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

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

html    	<div class="w160"></div>
        <div class="w160"></div>
        <div class="w160"></div>
        <div class="w170"></div>
        <div class="w75"></div>
        <div class="w75"></div>
        <div class="w160"></div>
        <div class="w160"></div>
        <div class="w170"></div>
        <div class="w160"></div>
        <div class="w75"></div>
        <div class="w75"></div>
        <div class="w160"></div>
        <div class="w170"></div>
        <div class="w330"></div>
        <div class="w340"></div>

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

css
#content div{
	height:100px;
	margin:5px;
	float:left;
}

.w160{
	width:160px;
	background-color:#4BAEB4;
}

.w170{
	width:170px;
	background-color:#F5AF3D;
}

.w75{
	width:75px;
	background-color:#96B335;
}

.w330{
	width:330px;
	background-color:#791869;
}

.w340{
	width:340px;
	background-color:#DE543A;
}

现在我们再看看效果:

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

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

转载于:https://www.cnblogs.com/fatlee/archive/2012/05/25/learn_css_html2_OVA.html

weixin_30596343

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记番外篇：仿WIN8 Metro UI DIV+CSS练习

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

扫一扫