<!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. xCode 升级9.3之后巨卡

    因为项目要适配iPhone8, iPhoneX 等.需要升级Xcode需要升级到9.3.但是 MAC系统是10.12的,需要升级到10.13. 系统升级完之后升级Xcode.之后Xcode 就各种卡. ...

  2. MyEclipse中JDK运行环境和编译环境的设置

    一.设置myEclipse中新项目使用的JDK 1.运行环境   [Window]->[Preferences]->[Java]->[Installed JREs] 步骤:Add-- ...

  3. (转载)centos7启用端口

    转载:原文地址:https://www.cnblogs.com/moxiaoan/p/5683743.html   1.firewalld的基本使用 启动: systemctl start firew ...

  4. 我的grunt学习笔记

    什么是grunt?  Grunt是一个JavaScript任务运行器,用于自动执行频繁任务(如压缩,编译,单元测试)的工具.它使用命令行界面来运行在文件中定义的自定义任务(这个文件称为Gruntfil ...

  5. 这个zsh超级棒

    https://github.com/robbyrussell/oh-my-zsh wget用法: http://man.linuxde.net/wget https://pan.baidu.com/ ...

  6. 页面调用qq

    tencent://message/?uin=516999605&Site=&Menu=yes

  7. Android Studio 下载与安装配置

    一.下载 Android Studio下载链接:http://www.android-studio.org/ 1.进入安卓中文社区官网进行下载. 2.下载完成. 二.安装与配置环境 1.选择“此电脑” ...

  8. FastList使用

    之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过Android的朋友都 ...

  9. MySQL分支Percona

    MySQL分支Percona 转载自:http://www.cnblogs.com/cevin/archive/2012/05/12/2496859.html 官方网站:http://www.perc ...

  10. Emmagee——开源Android性能测试工具

    工具:Emmagee作者:孔庆云 网易(杭州)质量保证部 开源地址:https://github.com/NetEase/Emmagee Wiki:https://github.com/NetEase ...