<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <link rel="stylesheet" href="css/tong.css"/>

     <title></title>

 </head>

 <body>

     <!-- 页面顶部 #top-->

     <header id="top">页面顶部</header>

     <!-- LOGO 和 搜索 #top_min-->

     <div id="top_main">LOGO和搜索框</div>

     <!--页面导航#nav-->

     <nav id="nav"></nav>

     <!--banner广告#banner-->

     <div id="banner"></div>

     <!--页面主体内容#main-->

     <section id="main"></section>

     <!--页面底部-配送方式#foot_box-->

     <footer id="foot_box"></footer>

     <!--页面底部-备案号 #footer-->

     <footer id="footer"></footer>

 </body>

 </html>

 下面是同用样式

 #top,#top_main,#nav,#banner,#main,#foot_box,#footer{border:1px solid #000;}

 /*通用样式*/

 body{font:12px "microsoft yahei",Arial,sans-serif; color:#666;margin:0;padding:0;}

 ul,p,h1,h2,h3,h4,h5,h6,dl,dd,li{margin:0; padding:0; list-style: none;}

 input{border:0;}

 .lf{float:left;}

 .rt{float:right;}

 .clera{clear:both;}

 img{vertical-align: bottom;}

 a{color:#666;  }

 a:hover{color:#ff0700; text-decoration:underline;}

 #top,#top_main,#nav,#banner,#main,#foot_box,#footer{margin:0 auto; padding:0; width: 1210px;}

HTML布局规范的更多相关文章

  1. css书写规范 & 页面布局规范 &常用案例经验总结

    CSS 属性书写顺序(重点) 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 displa ...

  2. 符合SEO的HTML布局规范

    少用例如iframe等标签引入内容,可以不用尽量不用,因为搜索引擎无法搜索到框架里面的内容: <!--页面注解--> <html> <head> <title ...

  3. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  4. Flex布局语法

    flexbox 弹性盒布局和布局原理 新版的flexbox规范分两部分:一部分是container,一部分是 items. flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`flo ...

  5. 好代码是管出来的——C#的代码规范

    代码是软件开发过程的产物,代码的作用是通过编译器编译后运行,达到预期的效果(功能.稳定性.安全性等等),而另外一个重要作用是给人阅读.对于机器来说只要代码正确就能够正确的运行程序,但是人不同,如果代码 ...

  6. React Native基础&入门教程：初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

  7. HTML编码规范 - (WEB前端命名规范)

    HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  8. htnl类名命规范

    html 命名规则 一.注意事项: 1. 一律小写; 2. 尽量用英文; 3. 不加中杠和下划线; 4. 尽量不缩写,除非一看就明白的单词. 主要的 master.css 模块 module.css ...

  9. React Native布局

    一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...

随机推荐

  1. 分布式锁 AP需求 CP需求

    小结: 1. 2019给Java程序员的唯一1条建议 https://mp.weixin.qq.com/s/dpx4GsGgZ0xtvzKd5riJng

  2. PHP之类型转化

    类型转化的判别 PHP在变量定义中不需要(或者不支持)明确的类型定义:变量类型是根据使用该变量的上下文所决定的, 也就是说,如果把一个string值付给变量$var,$var就成了一个string,如 ...

  3. [math][mathematica] archlinux 下 mathematica 的安装 (科学计算软件 mathematica/matlab/sagemath)

    ONLINE: http://www.wolframalpha.com/ GPL: segamath: http://www.sagemath.org/ famous and not free: ma ...

  4. 优云软件又双叒通过CMMI ML3评估 ， 研发和质量管理水平创新高

    2017年第三季度,SEI授权的主任评估师对优云软件研发中心进行了CMMI软件能力成熟度模型评估,优云软件顺利通过复评. 这是继2011年12月优云软件首次通过CMMI ML3级的评估认证以来,第二次 ...

  5. java 线程 （三）线程并发的安全性 同步代码块

    package cn.sasa.demo1; import java.util.concurrent.ExecutionException; public class ThreadDemo { pub ...

  6. 【PyQt5-Qt Designer】QSpinBox-微调框

    QSpinBox-微调框 QSpinBox类提供了一个微调框小部件. QSpinBox被设计为处理整数和离散值集合(例如,月份名称):使用QDoubleSpinBox 可以作为浮点数的调整. QSpi ...

  7. 移动端rem布局（阿里）

    该方案使用相当简单,把下面这段已压缩过的 原生JS(源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) < ...

  8. netstat 查看端口

    -l 仅列出有在监听(listen)的服务状态 -n 拒绝显示别名,能显示数字的全部转化成数字 -p 显示建立相关链接的程序名 -t 仅显示 tcp 相关选项 -u 仅显示 udp 相关选项 -a 显 ...

  9. iOS添加pch文件

    1.第一步,创建pch文件 第二步设置pch文件:相对地址,填写$(SRCROOT)/YTCompleteCarSell/PrefixHeader.pch  $(SRCROOT)是项目地址/项目名/p ...

  10. Error, some other host already uses address 192.168.0.202错误解决方法

    Error, some other host already uses address 192.168.0.202错误解决方法 今天配置虚拟机网卡的时候遇到错误:Error, some other h ...