Question

自从HotDog pro＆amp; amp;记事本，当然使用表格布局。我最终准备好只使用div，li，CSS作为布局，但我的问题是，在VS2010中布局页面的正确方法是什么？

当我使用表格布局时，它很简单，我可以在视觉上看到我创建的内容和元素的位置，例如下面的示例 - 我应该如何在VS2010中使用div等来做到这一点？

<table width="300" border="0" cellpadding="5">
  <tr>
    <td><img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" /></td>
    <td><h2>This is some text to the right of the picture...</h2></td>
  </tr>
  <tr>
    <td colspan="2">Here some text underneath</td>
  </tr>
</table>

Answer 1

我想说你应该学习Css并使用div等来布局页面。在我看来，你不应该使用任何WYSIWYG并从头开始编写标记，如果你知道如何，它也同样快。或者如果你想要一个好的基本css框架来以类似网格的方式处理布局，那么试试960 Grid System。

至于看你正在做什么，我会说最简单的使用。在webbrowser中打开网站并点击刷新。

Answer 2

以下是ASP.NET MVC中使用Blueprint CSS framework。

的母版页的示例

它有两列彼此相邻，下面有一个页脚。

 <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head runat="server">
        <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

        <asp:ContentPlaceHolder ID="MetaDescription" runat="server" >
        </asp:ContentPlaceHolder>

        <asp:ContentPlaceHolder ID="MetaKeywords" runat="server">
        </asp:ContentPlaceHolder>

        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 


         <asp:ContentPlaceHolder ID="HeadContent" runat="server"/>

    </head>

    <%=Html.Flash() %>

    <body>
        <div id="flash" style="display:none"></div>

        <div class="container">

            <div id="main" class="span-24 last">

                <div class="span-5">

                    <div id="logo">

                    </div>

                    <% Html.RenderAction("MainMenu", "Cms"); %>

                </div>


                 <div class="span-19 last">

                    <div id="headerTekst">
                        <div class="padding-30">
                            <h1 class="right uppercase">Some text</h1>
                        </div>
                    </div>

                    <div class="padding-10">
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                     </div>
                 </div>

                <div class="clear"></div>  
            </div>



            <div id="footer" class="span-24 last">

            </div>
    </div>  


    </body>

    </html>

Answer 3

要编写HTML代码，您绝对不应该在所有Visual Studio中使用。请改用 Dreamweaver 。

当设计页面的布局时，使用设计视图比使用Visual Studio更好的Adobe Dreamweaver工具。

仅当需要对页面进行编程以使其成为动态时，应该打开IDE 并编写代码。

Answer 4

对于布局，我将Firefox与FireBug插件一起使用。它为您提供实时反馈。它没有变得更好。一旦我拨打了更改，我将更改复制到项目中的html或css。

WYSIWYG程序很好。这就是我学习的方式。像其他一切一样，最终你会想知道幕后发生了什么。

Answer 5

如果您需要使用支持HTML 4.01的浏览器，请使用div，但如果您的布局过于复杂，最终会被div soup限制并理解您的标记并进行更改将变得很麻烦。

如果您可以使用支持HTML 5的现代浏览器（或添加各种hacks以使其正常工作），我会采用这种方式，因为您的标记将具有更多的语义含义并且更容易理解。而不是像这样制作导航：

<div class="nav">
   <ul>
       <li>Home</li>
       <li>About</li>
   </ul>
</div>

您可以使用HTML5：

<nav>
    <ul>
       <li>Home</li>
       <li>About</li>
   </ul>
</nav>

或者如果你发布博客而不是这样做：

<div class="post">
<h1>Example Blog Post</h1>
   <div class="entry">
      <p>Blog text goes here...</p>
   </div>
   <div class="entryFooter">
      <p> Posted in example category.</p>
   </div>
</div>

你会这样写：

<article>
   <header>
      <h1>Example Blog Post</h1>
   </header>
   <p>Blog text goes here...</p>
   <footer>
      <p>Posted in example category.</p>
   </footer>
</article>

正如您所看到的，它更容易理解，并且仍然提供您正在寻找的表格结构。

然后定位所有你想要的东西我会使用CSS3，但如果你需要支持旧浏览器再使用CSS2。

要在VS2010中执行此操作，只需打开.aspx或.ascx页面并开始编写标记。我发现像Dreamweaver这样的产品在使用设计器界面时会产生垃圾标记，所以最好的办法是自己手工编写。

此外，如果您确实使用HTML5路线并想要在VS2010中进行智能感知，那么这里有一个addon。

如何在不使用表格的情况下在VS2010中布局页面？

5 个答案: