Javascript 设计Metro风格网站的CSS和JS技术_Javascript_Css_Jquery Plugins_User Interface_Microsoft Metro

Javascript 设计Metro风格网站的CSS和JS技术

javascript css jquery-plugins user-interface

Javascript 设计Metro风格网站的CSS和JS技术,javascript,css,jquery-plugins,user-interface,microsoft-metro,Javascript,Css,Jquery Plugins,User Interface,Microsoft Metro,我正在使用标题身体{ 填充：0；保证金：0；背景色：#dcf0f9；方向：rtl； } .clearfix:之前，.clearfix:之后{ 内容：“；显示：表格； } .clearfix:之后{ 明确：两者皆有； } .tile_1_1{ 宽度：120px；高度：120px； } .瓷砖2_1{ 宽度：248px；高度：120px； } .tile_2_2{ 宽度：248px；高度：248px； } .瓷砖1_2{ 宽度：120px；高度：248px； } .瓷砖4_3{

我正在使用


标题
身体{
填充：0；
保证金：0；
背景色：#dcf0f9；
方向：rtl；
}
.clearfix:之前，.clearfix:之后{
内容：“；
显示：表格；
}
.clearfix:之后{
明确：两者皆有；
}
.tile_1_1{
宽度：120px；
高度：120px；
}
.瓷砖2_1{
宽度：248px；
高度：120px；
}
.tile_2_2{
宽度：248px；
高度：248px；
}
.瓷砖1_2{
宽度：120px；
高度：248px；
}
.瓷砖4_3{
宽度：504px；
高度：376px；
}
.瓷砖{
浮动：对；
保证金：4倍；
框阴影：插入0 1px rgba（255、255、255、0.2）；
}
.底部{
页边距底部：0；
}
.左下角{
利润率：4×4×0；
}
.右下角{
保证金：4px 0 0 4px；
}
.底部\左\右{
保证金：4px0；
}
.顶{
边际上限：0；
}
.左上角{
利润率：0.4px4p0；
}
.右上角{
利润率：0.04×4×4；
}
.上左右{
利润率：0.4px 0；
}
.左{
左边距：0；
}
.对{
右边距：0；
}
.左/右{
保证金：4px0 4px0；
}
.第4栏{
宽度：504px；
浮动：对；
}
.第2栏{
宽度：248px；
浮动：对；
}
.左栏{
利润率：0.4px 0；
}
.中柱{
利润率：0.4px 0.4px；
}
.右栏{
利润率：0.4倍；
}
.backToOrigin{
利润上限：-120px；
}
#容器{
边缘顶部：150px；
宽度：3000px；
}
#A部分{
浮动：对；
宽度：1016px；
}
#B节{
浮动：对；
宽度：504px；
右边距：112px；
}
#幻灯片放映{
背景色：#aaa；
}
B.类型B{
背景色：#21b044；
}
A.类型A{
背景色：#1f65c5；
}
C.类型{
背景色：#21b1e5；
}
雷德博克斯先生{
背景色：#fd3f1b；
}
.黄盒子{
背景色：#fdbe21；
}
格雷博克斯先生{
背景色：#5A5A；
}
格林博克斯先生{
背景颜色：绿色；
}

我使用float在页面中放置瓷砖

我知道这不是这种设计的最佳方法

我希望这些瓷砖在将来是动态的，我的意思是我将添加用于拖动、删除和移动这些瓷砖的JS，并相互推动以适应这个位置，另一件事是我想设计一个响应性强的页面，我的意思是通过调整窗口大小，这些瓷砖可以移动，改变位置，调整大小

我检查了，但需要从头开始做更多的功能

这是我的问题：

是否有更好的CSS解决方案，而不是使用浮动和无定位？（绝对、相对和…）

（与未来JS和上级声明无冲突）

支持IE8对我来说很重要

谢谢你的帮助，这也是我的第一个问题；）

我创建了类似的东西，我只使用float

s来创建这些块。看见它可以跨浏览器工作，我希望这可以帮助您

编辑：更新示例以显示使用不同大小块时的布局。尽管如此，该示例仅使用1个

标记作为目标。

您可能希望查看类似的内容，因为我认为这就是您想要达到的效果

是一篇关于它的博文。

为什么不使用position:absolute？（顺便说一句，我有幸如此兴奋地发表评论！！！：D）@DumbProducts-

position:absolute

将使拖放和调整大小变得更加困难。但是，我真的想不出更好的方法。。。我认为启用所有这些功能的JavaScript必须相当复杂。谢谢你的评论，亲爱的，关于使用JSF，你说得对。这似乎不允许你在一个大块的左边堆叠两个小块。你最终会得到不可用的空白。如果每个块的大小不一样，可能会有不可用的空白。这个问题可以通过使用多个

作为目标来解决。再次感谢，我没有足够的声誉来投票支持你的答案：）你不必投票支持。。。只需使用小棋盘格将答案标记为需要向上/向下投票按钮，就可以了…非常感谢，我认为我应该将此解决方案与@user1823713的解决方案结合起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #dcf0f9;
            direction : rtl;
        }

        .clearfix:before, .clearfix:after {
            content: "";
            display: table;

        }

        .clearfix:after {
            clear: both;
        }

        .tile_1_1 {
            width: 120px;
            height: 120px;
        }

        .tile_2_1 {
            width: 248px;
            height: 120px;
        }

        .tile_2_2 {
            width: 248px;
            height: 248px;
        }

        .tile_1_2 {
            width: 120px;
            height: 248px;
        }

        .tile_4_3 {
            width: 504px;
            height: 376px;
        }

        .tile {
            float: right;
            margin: 4px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .bottom {
            margin-bottom: 0;
        }

        .bottom_left {
            margin: 4px 4px 0 0;
        }

        .bottom_right {
            margin: 4px 0 0 4px;
        }

        .bottom_left_right {
            margin: 4px 0 0 0;
        }

        .top {
            margin-top: 0;
        }

        .top_left {
            margin: 0 4px 4px 0;
        }

        .top_right {
            margin: 0 0 4px 4px;
        }

        .top_left_right {
            margin: 0 0 4px 0;
        }

        .left {
            margin-left: 0;
        }

        .right {
            margin-right: 0;
        }

        .left_right {
            margin: 4px 0 4px 0;
        }

        .column_4 {
            width: 504px;
            float: right;
        }

        .column_2 {
            width: 248px;
            float: right;
        }

        .column_left {
            margin: 0 4px 0 0;
        }

        .column_midde {
            margin: 0 4px 0 4px;
        }

        .column_right {
            margin: 0 0 0 4px;
        }

        .backToOrigin {
            margin-top: -120px;
        }

        #container {
            margin-top: 150px;
            width: 3000px;
        }

        #sectionA {
            float: right;
            width: 1016px;
        }

        #sectionB {
            float: right;
            width: 504px;
            margin-right: 112px;
        }

        #slideShow {
            background-color: #aaa;
        }

        .typeB {
            background-color: #21b044;
        }

        .typeA {
            background-color: #1f65c5;
        }

        .typeC {
            background-color: #21b1e5;
        }

        .redBox {
            background-color: #fd3f1b;
        }

        .yellowBox {
            background-color: #fdbe21;
        }

        .greyBox {
            background-color: #5a5a5a;
        }

        .greenBox {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="container" class="clearfix">
        <section id="sectionA">
            <div class="column_4 column_right">
                <div id="slideShow" class="tile_4_3 tile top_left_right"></div>
                <div class="tile_2_1 tile tile bottom_right typeA"></div>
                <div class="tile_1_1 tile bottom typeB"></div>
                <div class="tile_1_1 tile bottom_left typeA"></div>
            </div>
            <div class="column_2 column_midde">
                <div class="tile_2_1 tile top_left_right typeB"></div>
                <div class="tile_1_1 tile right typeA"></div>
                <div class="tile_1_1 tile left yellowBox"></div>
                <div class="tile_1_1 tile right typeB"></div>
                <div class="tile_1_2 tile bottom_left typeA"></div>
                <div class="tile_1_1 tile bottom_right redBox backToOrigin"></div>
            </div>
            <div class="column_2 column_left">
                <div class="tile_1_1 tile top_right typeA"></div>
                <div class="tile_1_1 tile top_left typeC"></div>
                <div class="tile_2_1 tile left_right greyBox"></div>
                <div class="tile_2_2 tile bottom_left_right typeC"></div>
            </div>
        </section>
        <section id="sectionB">
            <div class="column_2 column_right">
                <div class="tile_2_1 tile top_right typeA"></div>
                <div class="tile_1_1 tile right typeC"></div>
                <div class="tile_1_1 tile left typeA"></div>
                <div class="tile_2_2 tile bottom_left_right greenBox"></div>
            </div>
            <div class="column_2 column_left">
                <div class="tile_1_1 tile top_right greenBox"></div>
                <div class="tile_1_1 tile top_left yellowBox"></div>
                <div class="tile_2_1 tile left_right typeC"></div>
                <div class="tile_1_2 tile bottom_right typeA"></div>
                <div class="tile_1_1 tile left typeB"></div>
                <div class="tile_1_1 tile bottom_left greyBox"></div>
            </div>
        </section>
    </div>
</body>