Fatal编程技术网
  • html/
  • Html 如果不使用表，您应该如何在VS2010中布局页面？

Html 如果不使用表，您应该如何在VS2010中布局页面？

html css asp.net-mvc model-view-controller layout

Html 如果不使用表，您应该如何在VS2010中布局页面？,html,css,asp.net-mvc,model-view-controller,layout,Html,Css,Asp.net Mvc,Model View Controller,Layout,我从beta版开始使用.NET，从hotdogpro¬epad时代开始使用HTML，当然是使用表格布局。我终于准备好只使用div、li、CSS进行布局了，但我的问题是，在VS2010中布局页面的正确方式是什么 <table width="300" border="0" cellpadding="5"> <tr> <td><img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" al

我从beta版开始使用.NET，从hotdogpro¬epad时代开始使用HTML，当然是使用表格布局。我终于准备好只使用div、li、CSS进行布局了，但我的问题是，在VS2010中布局页面的正确方式是什么

<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>
当我使用TableLayout时，它很简单，我可以直观地看到我在创建什么以及元素在哪里，比如下面的示例-我应该如何在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>


这是图片右侧的一些文字。。。
下面是一些文字
我想说的是，您应该学习Css，并使用div等来布局页面。 在我看来，你不应该使用任何所见即所得（WYSIWYG）并从头开始编写标记，如果你知道怎么做的话，它同样快。 或者，如果您想要一个好的基本css框架，以类似网格的方式处理布局，那么请尝试一下

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

以下是ASP.NET MVC中使用的母版页的示例

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

 <%@ 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>


一些文本
要编写html代码，您绝对不能在Visual Studio中使用。改用Dreamweaver

当设计页面布局时使用Adobe的Dreamweaver，使用design view会比使用Visual Studio获得更好的工具

只有当需要对页面进行编程以使其动态化时，才应该打开IDE并编写代码。

对于我与插件一起使用的布局。它能给你实时的反馈。情况没有好转。拨入更改后，我会将更改复制到项目中的html或css中

WYSIWYG程序很好。我就是这样学的。就像其他事情一样，最终你会想知道引擎盖下发生了什么

如果你需要使用支持HTML4.01的浏览器，那么就使用divs，但是如果你的布局变得太复杂，你最终会陷入困境，理解你的标记和进行更改将变得很麻烦

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

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

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



    

  • 家
    • 

  • 关于
    •
您可以使用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>


示例博客文章
博客文本在这里

在示例类别中发布
你可以这样写：

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

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

。
您想了解的是CSS浮点和长方体模型。我不是CSS专家，所以不知道该告诉你什么。我希望不要回到用记事本编码的时代，利用工具（如VS、Dreamweaver）快速布局页面，而不必指定每个元素的顶部和左侧（如果可能的话）我认为Dreamweaver是一个更好的WYSIWYG工具，因为它不会插入大量垃圾HTML。我们有几个“HTML程序员”在我的工作中使用这个。在编写HTML/CSS时，没有理由不使用Visual Studio，因为它做得很好。