`

常用div布局命名 和 容易忘记的html代码

 
阅读更多

1: html头
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <link rel="stylesheet" href="style.css" media="all">
 <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
 <link rel="shortcut icon"  href="http://www.123box.com/logo.ico" type="image/x-icon">

 

2. <label> 标签的 for 属性 规定 label 与哪个表单元素绑定。

 显式的联系：   @Html.LabelFor(model=>mode.Name) 输出：  <label for="Name">Name</label> 
             <label for="SSN">Social Security Number:</label>

                          <input type="text" name="SocSecNum" id="SSn" /> (可以把struct的封装的标签学习一遍) 

                      @Html.LabelFor(m => m.UserName)  :::::::  <label for="UserName">用户名</label>

 

 

3：参考asp.net mvc 命名方法   

<!DOCTYPE html>
<html>
   <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>

    <body>
        <header>
             <div class="content-wrapper">
                       <div class="float-left"><p></p></div>
                        <div class="float-right">
                   <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("主页", "Index", "Home")</li>
                            <li>@Html.ActionLink("关于", "About", "Home")</li>
                            <li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
                        </ul>
                    </nav>
                    </div>
               <div>
</header>

  <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
   <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - 我的 ASP.NET MVC 应用程序</p>
                </div>
            </div>
        </footer>
 </body>
</html>

 

 

3: asp.net mvc 3 命名方式

 

  <div class="page">
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>

 

4：asp.net mvc2 的命名：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

 

 

 

 

 

5： header  header-con        bodyer   bodyer-con   footer  footer-con

 

 

6:外面包裹

 <div class="page">
           <div id="main">

                     class="left'  class="right"


7.  header  header-con        

      main 

             <div class="container" style="width:990px;">     </div>  

     footer   footer-con

 

vim 使用zen coding

书上：html:xt   ctrl+y+, 要快

link:css       ctrl+y+, 要快

 

分享到：
| css 清除浮动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div布局软件-主要用于div对网页进行前期的布局

    Div布局，全称为“Division布局”，是HTML中一种常用的布局方法，常用于创建复杂且灵活的网页结构。本篇将详细介绍Div布局的概念、优势以及如何使用Div布局软件进行可视化设计。 **Div布局基础** Div元素在HTML中...

    DIV+CSS常用的网页布局代码

    ### DIV+CSS常用的网页布局代码知识点解析 #### 一、基础知识概述 在现代网页开发中，**DIV+CSS**是一种非常流行的布局方式。通过合理的利用HTML中的`&lt;div&gt;`元素结合CSS样式表来实现页面布局，可以使得网页更加...

    div和css布局代码

    根据提供的标题、描述以及部分代码内容，我们可以总结出与“div和css布局代码”相关的几个重要知识点： ### 1. CSS基本属性理解 在提供的代码片段中，我们首先可以看到一些常用的CSS属性及其用法。 #### `margin`...

    css+div布局源码模板

    Div元素是HTML中的一个常用容器标签，通过CSS，我们可以对Div进行定位、尺寸设定、样式调整等，实现丰富的网页布局。 二、布局方式 1. 流动布局：Div元素按照从左到右，从上到下的顺序排列，适用于简单的单列布局。...

    html div布局

    HTML中的`div`元素是一种非常重要的布局工具，它在网页设计中扮演着组织和分隔内容的角色。`div`是“division”的缩写，意为分区，可以通过CSS样式进行定制，实现各种复杂的网页布局。 首先，我们要理解`div`的基本...

    DIV+CSS网站布局从入门到精通源代码

    DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计，以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析，分别从不同...

    DIV布局十大技巧以及DIV盒子模型

    3. **浮动布局**：`float`属性是早期`DIV`布局常用的方法，通过设置`left`或`right`使元素浮动，实现多列布局。但需注意清除浮动避免父元素高度塌陷。 4. **定位布局**：`position`属性（如`relative`、`absolute`...

    精通CSS+DIV网页样式与布局源代码

    本资源"精通CSS+DIV网页样式与布局源代码"提供了深入理解和掌握这两种技术的宝贵资料，旨在帮助开发者实现优雅、灵活且响应式的网页设计。 CSS是一种样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言...

    divcss布局大全 疯狂代码.zip

    divcss布局大全 疯狂代码.zip请下载好了之后将.zip后缀驹改为mht即可打开 2008年9月26日divcss布局入门实例目录:DIV+CSS布局入门示例（目录） 本示例通过五个步骤的介绍，基本形成了如下效果的页面。我们可以详细的...

    div+css网页布局设计模板源代码

    综上所述，`div+css`网页布局设计模板源代码提供了丰富的学习资源，涵盖了网页设计的基础和进阶知识，无论是初学者还是经验丰富的开发者，都能从中获益。通过实际操作和理解这些模板，我们可以更好地掌握网页布局的...

    css+div布局实例

    CSS+DIV布局实例是学习网页布局时不可或缺的一部分，它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式，实现灵活多变的设计效果。 CSS是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等...

    table布局网页转换为div+CSS布局的转换软件

    这种软件能够自动将基于`table`的HTML代码转换为使用`div`和`CSS`进行布局的新代码。在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变，无论是对于简化网页代码，还是提升...

    div页面框架布局

    在实际开发过程中，压缩包中的"div框架"文件可能包含了具体的HTML、CSS和JavaScript代码示例，这些示例可以帮助我们更好地理解和应用EasyUI的布局功能。通过学习和研究这些示例，我们可以掌握如何结合div和EasyUI来...

    DIV+CSS常用布局模板

    - 分析提供的"DIV+CSS常用布局模板"源代码，理解每个模板的结构和CSS规则。 - 实践修改模板，尝试调整颜色、字体、间距等，以提升对CSS的控制能力。 - 尝试创建自己的布局，从简单的两栏布局到复杂的多列响应式...

    div布局测试页面

    自己写的div布局测试页面，希望与大家多多分享。谢谢

    DIV＋CSS＋HTML布局（三行两列布局）

    在三行两列布局中，HTML代码会创建一系列的`&lt;div&gt;`元素，这些元素作为容器，承载着不同的内容区块。例如： ```html &lt;div class="row"&gt; &lt;div class="column left"&gt;&lt;/div&gt; &lt;div class="column right"&gt;&lt;/div&gt; &lt;/div&gt;...

    Div+Css布局案例源代码

    这个“Div+Css布局案例源代码”压缩包包含了一系列的网站页面和首页布局实例，旨在帮助开发者更好地理解和掌握Div+CSS布局技术。 Div（Division）在HTML中是一种用于分组元素的容器，它可以将网页划分为多个独立的...

    DIV布局，网页结构

    通过CSS（层叠样式表）控制DIV元素的位置、大小和其他样式属性，可以实现灵活多变的网页布局效果。 #### DIV布局基本概念 DIV是一种块级元素，能够包含其他的HTML元素，如文本、图片、列表等。在默认情况下，DIV...

Magicbox
Global site tag (gtag.js) - Google Analytics