<!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. 用em包图片记

    像这种很常见的字体旁边带图标的,很多都是用em的background去实现. <li><em class="wx"></em><a hre ...

  2. AngularJs $watch监听模型变化

    $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 举个栗子 ...

  3. PHP 小知识

    -- 获取/设置响应的 HTTP 状态码 mixed http_response_code ([ int $response_code ] ) -- ... 操作符知道是什么么?看看 PHP 官方的 ...

  4. 【pyqtgraph绘图】在pyqtgraph中绘图

    解读pyqtgraph官方API-在pyqtgraph中绘图 参考: http://www.pyqtgraph.org/documentation/plotting.html 在pyqtgraph中绘 ...

  5. fopen 的使用

    1, fopen() 的使用,在linux环境下,我们可以使用man fopen查看使用说明: #include <stdio.h> FILE *fopen(const char *pat ...

  6. Android Studio安装配置

    1.首先我们进官网 http://www.android-studio.org/  (注意一下除了SDK外还需要JDK) 2.选择历史版本下载 3.随意选择版本这里笔者选用1.2.1版本,主要下带bu ...

  7. 让网站不去请求favicon.ico图标

    让网站不去请求favicon.ico图标 favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404.出于优 ...

  8. iis子站点

    在iis已有的站点下可以继续添加”应用程序”,就构成子站点:需要访问子站点app下的程序,只想在controller/action前,加个app就行,即app/controller/action 这样 ...

  9. 什么是url？

    什么是URL? URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址. URL举例 http://www.sohu.com/s ...

  10. AsyncStorage和Promise配合使用

    代码: AsyncStorage封装 import {AsyncStorage} from "react-native"; class DeviceStorage { //保存数据 ...