1

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

我不确定这是否是正确的地方，但我想知道是否有人可以让我指出正确的方向。我想制作一个看起来类似于 Windows 8 开始屏幕的网站（如果由于某种原因您不知道它的外观，这里是一个图片链接）。

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

我在 PHP、MySQL 和 JavaScript 方面有少量经验——足以理解一些代码并编写简单的脚本。对于我的项目想法，我应该重点学习什么？我只是在寻找要研究的东西的路线图。

谢谢！

4

2 回答 2

3

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

在此处输入图像描述

<!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>
于 2012-11-13T05:05:58.257 回答
0

假设您网站上的每个“块”代表数据库中的一行（意味着没有继承的父子关系），那么简单地使用 CSS3 创建块非常容易，jQuery 来做翻转效果（和悬停，因为让我们面对现实吧，移动的鱼很棒）。

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

可能还想研究嵌套查询，因为如果您想做一些疯狂的事情，例如在一页上有 2 个“块”并且您需要从 2 个以上的表中获取数据到所述页面上，它们很可能会派上用场。

祝你好运

于 2012-11-13T04:24:22.613 回答