文章/答案/技术大牛

发布

社区首页 >问答首页 >创建类似Windows 8开始屏幕的网页(新手)

问创建类似Windows 8开始屏幕的网页(新手)
EN

Stack Overflow用户

提问于 2012-11-13 12:14:12

回答 2查看 5.9K关注 0票数 1

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

我不确定这是不是该问的地方，但我想知道是否有人能帮我指出正确的方向。我想做一个网站，看起来像Windows8的开始屏幕(这是一个link to an image，如果由于某些原因，你不知道它是什么样子的)。

这个想法是让类似的不同长度的块状物体(可能不像Windows8的网格那样整齐)，人们可以水平滚动，上面可以有一些“活动”的东西。单击一个可以使用一些AJAX技术来切换到另一个菜单，或者在页面上打开一个信息窗口。有点像Outlook/Hotmail不需要重新加载就可以切换屏幕。包装盒项目的信息可能来自数据库。

我在PHP、MySQL和JavaScript方面有少量的经验-足以理解一些代码和编写简单的脚本。为了我的项目构想，我应该专注于学习什么？我只是在寻找一个学习的路线图。

谢谢!

windows-8

php

javascript

ajax

web-applications

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-11-13 13:05:58

你可以用css和2个图片宽度来模拟win8的外观，不管它是普通的还是宽的，只需在样式中添加额外的类即可。使用jQuery，你可以让图标/页面可拖拽等等，你可以简单地测量宽度并通过ajax加载更多的内容，就像懒惰加载但水平加载一样，使用ondblclick=""来启动应用程序/内容的加载，这是我在30分钟内想出来的。Source & images

<!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>

票数 3

Stack Overflow用户

发布于 2012-11-13 12:24:23

假设站点上的每个“块”代表数据库中的一行(这意味着没有继承的父子关系)，很容易简单地使用CSS3来创建块，使用jQuery来做滚动效果(以及悬停，因为面对现实吧，移动的鱼是非常棒的)。

集成jQuery和Ajax将允许您以平面文件或面向对象的方式进行数据库调用。

如果你想做一些疯狂的事情，比如在一个页面上有两个“块”，你需要将2+表中的数据放到这个页面上，那么你可能还想研究一下嵌套查询，因为它们很可能会派上用场。

祝好运

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13355504

复制

相似问题

问创建类似Windows 8开始屏幕的网页(新手)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建类似Windows 8开始屏幕的网页(新手)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建类似Windows 8开始屏幕的网页(新手)
EN