7
Tôi đã tạo một đơn giản, trọng lượng nhẹ, GUI tương tự như Microsoft Metro UI. Nó bao gồm một tập hợp các yếu tố đó là nổi để làm cho nó linh hoạt lại khá lớn theo kích thước của màn hình: 
Cách định vị biểu tượng trong giao diện web giống như metro? (bao gồm hình ảnh)
Đây là mã:
<!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>Index2</title>
<style type="text/css">
.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;}
</style>
</style>
</head>
<body>
<div class="tiles clearfix">
<div class="w4 h2">
[email protected] <div class="icon">icon</div>
</div>
<div class="w4 h2">
RSS
</div>
<div class="w4 h2">
13
</div>
<div class="w2 h2">
IE
</div>
<div class="w2 h2">
Photo
</div>
<div class="w4 h2">
Now Playing
</div>
<div class="w4 h2">
Photo <div class="icon">icon</div>
</div>
<div class="w2 h2">
Shop
</div>
<div class="w2 h2">
SMS
</div>
<div class="w4 h2">
Weather <div class="icon">icon</div>
</div>
<div class="w4 h2">
Investment
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
</div>
</body>
</html>
Tôi có một vấn đề định vị các phần tử biểu tượng trong các div. Đây là những gì tôi có:
và đây là những gì tôi muốn:
Nói cách khác tôi muốn để có thể xác định vị trí các yếu tố trong các yếu tố div lát gạch hoàn toàn. Tôi đã thử các kỹ thuật định vị CSS khác nhau (tương đối, cố định, tuyệt đối) nhưng không thể giải quyết được. Tôi nghi ngờ đó là vì các ô là nổi yếu tố?
Tôi làm cách nào để có thể thiết kế nội dung của mỗi ô bất kể vị trí của nó trong trang web?
+1 để làm rõ hình ảnh! – jholster
đồng ý! Một ví dụ tuyệt vời về một câu hỏi được giải thích tuyệt vời. –
@AlexStack Bạn là anh hùng của tôi. Tôi có thể sử dụng mã này không? –