1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <link rel="stylesheet" href="css/tong.css"/>
  6.      <title></title>
  7.  </head>
  8.  <body>
  9.      <!-- 页面顶部 #top-->
  10.      <header id="top">页面顶部</header>
  11.      <!-- LOGO 和 搜索 #top_min-->
  12.      <div id="top_main">LOGO和搜索框</div>
  13.      <!--页面导航#nav-->
  14.      <nav id="nav"></nav>
  15.      <!--banner广告#banner-->
  16.      <div id="banner"></div>
  17.      <!--页面主体内容#main-->
  18.      <section id="main"></section>
  19.      <!--页面底部-配送方式#foot_box-->
  20.      <footer id="foot_box"></footer>
  21.      <!--页面底部-备案号 #footer-->
  22.      <footer id="footer"></footer>
  23.  </body>
  24.  </html>
  25.  
  26.  下面是同用样式
  27.  
  28.  #top,#top_main,#nav,#banner,#main,#foot_box,#footer{border:1px solid #000;}
  29.  /*通用样式*/
  30.  body{font:12px "microsoft yahei",Arial,sans-serif; color:#666;margin:0;padding:0;}
  31.  ul,p,h1,h2,h3,h4,h5,h6,dl,dd,li{margin:0; padding:0; list-style: none;}
  32.  input{border:0;}
  33.  .lf{float:left;}
  34.  .rt{float:right;}
  35.  .clera{clear:both;}
  36.  img{vertical-align: bottom;}
  37.  a{color:#666;  }
  38.  a:hover{color:#ff0700; text-decoration:underline;}
  39.  #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 on tez配置

    1.Tez简介 Tez是Hontonworks开源的支持DAG作业的计算框架,它可以将多个有依赖的作业转换为一个作业从而大幅提升MapReduce作业的性能.Tez并不直接面向最终用户--事实上它允许 ...

  2. php之code tips

    使用list来实现一次获取explode后的特定段值: list( , $mid) = explode(';', $string); 使用NULL === 来代替is_null: is_null和 N ...

  3. set,env,export,set -x,set -e;

    set 用来显示本地变量 env 用来显示环境变量 export 用来显示和设置环境变量 set 显示当前shell的变量,包括当前用户的变量 env 显示当前用户的变量 export 显示当前导出成 ...

  4. [development][C] C语言标准

    GUN C的标准文档: 也就是glibc https://www.gnu.org/software/libc/ http://man7.org/linux/man-pages/dir_section_ ...

  5. python知识点杂记2

    1. 如果已经有一个list或者tuple,要调用一个可变参数怎么办?2. >>> nums = [1, 2, 3]3. >>> calc(*nums)4. 14* ...

  6. ODOO权限管理，在两个方面设置权限

    转载参考https://zhuanlan.zhihu.com/p/29130388 在odoo中新建两个用户user1,user2 新建用户 建完了用户,记得编辑用户,设置密码. 然后以user1用户 ...

  7. 洛谷P5234 越狱老虎桥 [JSOI2012] tarjan

    正解:tarjan+贪心(?并不会总结是什么方法QAQ,,, 解题报告: 传送门! 这题是真的题意杀,,,我我我要不是之前知道题目大意了我怕是怎么看都看不懂这是个什么意思昂QAQ 所以先说下题目大意好 ...

  8. 【PyQt5-Qt Designer】文本框读写操作

    主要内容: 1.读.写 输入控件(Input Widgets)中的内容(str) 2.保存数据到txt文件 3.从txt文件中读内容,与输入控件中内容比较 将上述各种输入控件(Input Widget ...

  9. Email实例

    import java.util.Properties; import javax.activation.DataHandler; import javax.activation.DataSource ...

  10. InnoDB启用大内存页

    在 Linux 操作系统上运行内存需求量较大的应用程序时,由于其采用的默认页面大小为 4KB,因而将会产生较多 TLB Miss 和缺页中断,从而大大影响应用程序的性能.当操作系统以 2MB 甚至更大 ...