常用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+, 要快

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值