Question

首先，我是一名高中生和一名非常新的程序员（想想CS101级别）。在我的空闲时间（可悲的是有限），我想尝试一些项目来鼓励我学习更多，我有一个有趣的想法。

我不确定这是否是正确的地方，但我想知道是否有人能让我指出正确的方向。我想创建一个类似于Windows 8开始屏幕的网站（这里是link to an image，如果出于某种原因，你不知道它是什么样的。）

这个想法有类似的块状对象，长度不同（可能不像Windows 8那样整齐），人们可以横向滚动，并且可以在它们上面有一些“活动”的东西。单击一个可以使用一些AJAX技术更改为另一个菜单，或打开页面上的信息窗口。有点像Outlook / Hotmail如何在不重新加载的情况下更改屏幕。盒子项的信息可能来自数据库。

我在PHP，MySQL和JavaScript方面有一些经验 - 足以理解一些代码并编写简单的脚本。我应该把重点放在学习项目的想法上？我只是在寻找一个可以研究的路线图。

谢谢！

Answer 1

您可以使用css和2个图像宽度模拟win8外观，以及它是普通项还是宽项只是将额外的类添加到样式中。使用jQuery，您可以使图标/页面可拖动等，通过一些工作，您可以简单地测量宽度并通过ajax加载更多内容，就像延迟加载但水平，使用ondblclick=""启动加载应用程序/内容，这是我在30分钟内提出的。 Source & images

enter image description here

<!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>basic win8</title>
<style>
*{font-family: "Segoe UI", Frutiger, "Frutiger Linotype";}
body{background-image:url('Win8Background.jpg');}

#wrapper {
    width: 70%;
    padding: 0px;
    margin-left:auto;
     margin-right:auto;
}
.sortable-list li {
    padding: 4px;
    margin: 4px;
    float: left;
    border: 1px solid black;
    list-style-image: none;
    list-style: none;
    list-style-type: none;
    background-color:#204558;
}

#dashboard-layout .item.normal {
    width: 100px;
    height: 100px;
}

#dashboard-layout .item.wide {
    width: 224px;
    height: 100px;
}

.item.normal p{
margin:0px;
padding: 0px;
}

.item.wide p{
margin:0px;
padding: 0px;
}

h1{color:white;}

#left_head{width:45%; float:left;}
#right_head{width:45%; float:right; text-align:right;margin-right:15px;}
</style>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
function update_columns() {
    var positions = []
    $("#dashboard-layout .item").each(function() {
        var $item = $(this);
        positions.push($item.attr('id'));
    });
    $.post("./", { 'positions[]': positions },
        function(data) {
            alert("Update Success - New positions:" + positions);
        }
    );
}

$(function() {
    $("ul.sortable-list").sortable({
        connectWith: "#wrapper",
        placeholder: 'ui-state-highlight',
        tolerance: 'pointer',
        revert: true,
        forcePlaceholderSize: true,
        forceHelperSize: true,
        update: update_columns,
    }).disableSelection();
});
</script>

</head>

<body>

<div id="left_head"><h1>Start</h1></div>
<div id="right_head"><h1>Lawrence Cherone</h1></div>
<div style="clear:both;"></div>

<div id="wrapper">

<ul class="sortable-list" id="dashboard-layout">

    <li id="a" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content a
    </li>

    <li id="b" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content b
    </li>

    <li id="c" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content c
    </li>

    <li id="d" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content d
    </li>

    <li id="e" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content e
    </li>

    <li id="f" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content f
    </li>

    <li id="g" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content g
    </li>

    <li id="h" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content h
    </li>

    <li id="i" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content i
    </li>

    <li id="j" ondblclick="" class="item normal" style="background-image:url(xbox.png); background-size:110px">
    content j
    </li>

    <li id="k" ondblclick="" class="item wide" style="background-image:url(photos.png); background-size:224px">
    content k
    </li>
</ul>

</div>

</body>
</html>

Answer 2

假设每个＆＃34; Block＆＃34;在您的网站上代表数据库中的一行（意味着没有继承的父子关系）它很容易简单地使用CSS3来创建块，jQuery来执行翻转效果（并且悬停，因为让＆＃ 39;面对它，移动的鱼很棒）。

集成jQuery和Ajax将允许您通过PHP作为平面文件或OOP进行数据库调用。

也可能想要查看嵌套查询，因为如果你想做一些疯狂的事情，比如2＆＃34; Block＆＃34;它们很可能派上用场。在一个页面上，您需要将2个表中的数据放到所述页面上。

祝你好运

创建像Windows 8开始屏幕（新手）的网页

2 个答案: