<!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. shell脚本之xargs使用的一些案例

    首先看一下文本信息: # cat text1.txt 1 2 3 4 5 使用xargs格式化一下: # cat text1.txt  | xargs 1 2 3 4 5 使用xargs格式化,每两个 ...

  2. Flink – submitJob

    Jobmanager的submitJob逻辑, /** * Submits a job to the job manager. The job is registered at the library ...

  3. 应用docker化

    1)首先安装源代码工具Git.  [root@master~]# yum install-y git  2)从GitHub上下载示例的Java应用源代码.  [root@master~]# cd/op ...

  4. 手动建立mapping以及增加属性

    只能创建index时手动建立mapping,或者新增field mapping,但是不能update field mapping 1.手动建立mappingPUT /website{ "ma ...

  5. 终极大招——Scrapy框架

    Scrapy框架 Scrapy 是一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的用途 ...

  6. 数据库——MongoDB增删改查

    MongoDB增删改查操作 本文包含对数据库.集合以及文档的基本增删改查操作 数据库操作 #1.增 use config #如果数据库不存在,则创建并切换到该数据库,存在则直接切换到指定数据库. #2 ...

  7. Python3学习之路~3.3 内置函数

    Python内置函数表: 内置参数详解:https://docs.python.org/3/library/functions.html?highlight=built#ascii 用法: #Auth ...

  8. TCP路由网络通信

    路由器 实现跨网段通信   路由器的工作原理是基于路由器中的路由表来实现数据包的路径选择 当路由器收到一个数据包的时候,会读取数据包的目标IP地址,根据目标IP地址来匹配路由表中的规则 单个路由器不会 ...

  9. vue中filter的用法

    test() { var arr1 = ["A", "B", "C","C","A"]; var r ...

  10. 1: process

    https://blogs.sap.com/2013/08/20/creating-a-search-page-sap-crm-70-ehp-1/ https://www.cnblogs.com/sa ...