我创建了一个类似于
Microsoft Metro UI的简单,轻量级GUI.它由一组浮动元素组成,可根据屏幕大小灵活调整大小:
这是代码:
Index2.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
html{
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
}
div.tiles{
background-color:black;
padding:50px;
}
div.tiles div{
border-radius:2px;
padding:10px;
margin:5px;
color:white;
background-color:#666;
display:marker;
cursor:pointer;
float:left;
width:25px;
height:25px;
}
div.tiles div:hover{
transition:background-color 1s;
-moz-transition:background-color 1s;
-webkit-transition:background-color 1s;
background-color:#060;
-moz-transform:rotate(6deg);
}
div.tiles div.icon{
position:relative;
bottom:0px;
left:0px;
z-index:10;
background-color:red;
}
div.tiles div.w1{width:25px;}
div.tiles div.w2{width:80px;}
div.tiles div.w3{width:160px;}
div.tiles div.w4{width:190px;}
div.tiles div.h1{height:25px;}
div.tiles div.h2{height:80px;}
div.tiles div.h3{height:160px;}
div.tiles div.h4{height:190px;}
mattberg@live.com
RSS
13
IE
Photo
Now Playing
Photo
Shop
SMS
Weather
Investment
Lilly
Lilly
Lilly
Lilly
Lilly
Lilly
Lilly
我在div中定位图标元素时遇到问题.这就是我所拥有的:
这就是我想要的:
换句话说,我希望能够绝对地将元素放置在平铺的div元素中.我尝试了各种CSS定位技术(相对,固定,绝对)但无法解决它.我怀疑是因为瓷砖是浮动元素?
我怎样才能设计每个瓷砖的内容,无论它在网页中的位置如何?