<!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. hive优化之调整mapreduce数目

    一.调整hive作业中的map数 1.通常情况下,作业会通过input的目录产生一个或者多个map任务.主要的决定因素有: input的文件总个数,input的文件大小,集群设置的文件块大小(目前为1 ...

  2. canvas 线性规划

    小结: 1.线性规划 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. LITTLE-ENDIAN（小字节序、低字节序） BOM——Byte Order Mark 字节序标记 数据在内存中的存放顺序

    总结: 1. endian 字节存放次序 字节序,顾名思义字节的顺序,再多说两句就是大于一个字节类型的数据在内存中的存放顺序(一个字节的数据当然就无需谈顺序的问题了). 2. LITTLE-ENDIA ...

  4. post/get in console of JSarray/js 数组详细操作方法及解析合集

    https://juejin.im/post/5b0903b26fb9a07a9d70c7e0[ js 数组详细操作方法及解析合集 js array and for each https://blog ...

  5. [dpdk] dpdk编译成动态库使用 -- PCI port自动发现与pmd动态加载

    1.  修改配置文件 .conf, 设置如下变量的值. [root@D129 x86_64-native-linuxapp-gcc]# cat dpdk/x86_64-native-linuxapp- ...

  6. day3_字典

    一.说明 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示: dict = {key1:value1,key2 ...

  7. Linux中的轻量级进程

    在Linux中,轻量级进程可以是进程,也可以是线程.我们所说的线程,在Linux中,其实是轻量级进程之间共享代码段,文件描述符,信号处理,全局变量时: 如果不共享,就是我们所说的进程. 进程是资源管理 ...

  8. 安装MongoDB报错

    尝试多次,最后找到解决方式: 在安装的最后一步的时候不要勾选左下角的compass即可 命令行mongod --version测试安装是否成功

  9. 20180310 KindEditor 富文本编辑器

    问题: 如何判断富文本编辑器文本内容非空 错误的办法,采用js 对控件本身的txt ID 号抓取获取值,由于加载富文本编辑器时,界面的ID 已经经过了修改或者可以用转换来说,所以抓取是无效果的. 需要 ...

  10. DNS服务基础原理介绍

    FQDN 全称域名 localhost(主机名或者是别名).localdomain(域名)    FQDN=主机名.域名 根域               . 顶级域名       .com   .n ...