Question

我正在从桌面应用程序（WPF / Winforms）过渡到浏览器应用程序，我正在寻找一个关于布局应用程序的良好资源。我不是指这里的设计，只是布局的机制。

例如，“不要使用表格进行布局”似乎出现了很多。我已经提出了以下作为一个非常简单的应用程序布局，不使用表格（实际数据网格除外）：

<html>
<head>
<style>
    .layoutRoot {width: 960px; border: 1px solid black; margin-left: auto; margin-right: auto; padding: 25px;}
     div { border: 1px solid black;}
    span { border: 1px solid black;margin: 5px;}
    button { margin: 5px;}
    .floatLeft{ float: left; }
    .floatRight{ float: right;}
    .dataGrid {width: 100%; height: 400px; border: 1px solid blue;}
</style>
</head>
<body >
    <div class="layoutRoot">
        <span class="floatLeft">My Site Name</span>
        <span class="floatRight" >Login Link</span>
        <table class="dataGrid"><tr><td>The Order Line Items goes here</td></tr></table>
        <button>Cancel Order</button>
        <button class="floatRight" >Continue</button>
        <span class="floatRight" >Order Total</span>
        <span class="floatRight" >Order Subtotal</span>
    </div> 
</body>

有更好的方法吗？

我用谷歌搜索了这个主题，但主要是寻找设计（“这看起来不错”），而不是“这就是你如何做到的。”

格雷格

Answer 1

我唯一的改进建议是将宽度更改为百分比。使用Web应用程序以及调整窗口和设备大小的所有大小时，最好尽可能使其响应。它只是为了更好的整体用户体验。

Answer 2

对我来说很好看。

只是想补充一点，有时使用水平列表也很有用。有时，当它们嵌套等时，浮动可能会变得非常混乱。

Web App布局指南

2 个答案: