HTML布局规范
<!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布局规范的更多相关文章
- css书写规范 & 页面布局规范 &常用案例经验总结
CSS 属性书写顺序(重点) 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 displa ...
- 符合SEO的HTML布局规范
少用例如iframe等标签引入内容,可以不用尽量不用,因为搜索引擎无法搜索到框架里面的内容: <!--页面注解--> <html> <head> <title ...
- [转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...
- Flex布局语法
flexbox 弹性盒布局和布局原理 新版的flexbox规范分两部分:一部分是container,一部分是 items. flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`flo ...
- 好代码是管出来的——C#的代码规范
代码是软件开发过程的产物,代码的作用是通过编译器编译后运行,达到预期的效果(功能.稳定性.安全性等等),而另外一个重要作用是给人阅读.对于机器来说只要代码正确就能够正确的运行程序,但是人不同,如果代码 ...
- React Native基础&入门教程:初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
- HTML编码规范 - (WEB前端命名规范)
HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...
- htnl类名命规范
html 命名规则 一.注意事项: 1. 一律小写; 2. 尽量用英文; 3. 不加中杠和下划线; 4. 尽量不缩写,除非一看就明白的单词. 主要的 master.css 模块 module.css ...
- React Native布局
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...
随机推荐
- nginx反向代理服务器获取不到端口的问题的解决办法
使用nginx为反向代理服务器时,后端应用程序获取不到请求端口的解决办法. 以下是nginx 简单的配置 server { listen 81; serve ...
- Usage of git
目录 Git 配置 查看配置信息 基本概念 Git 创建仓库 git init git clone 撤销操作 从暂存区恢复文件 从仓库恢复某个文件 版本退回 版本前进 分支操作 删除未跟踪的文件 连 ...
- Flink – SlotSharingGroup
SlotSharingGroup 表示不同的task可以共享slot,但是这是soft的约束,即也可以不在一个slot 默认情况下,整个StreamGraph都会用一个默认的"defau ...
- python fabric实现远程操作和部署示例
https://www.jb51.net/article/48434.htm 近期接手越来越多的东西,发布和运维的工作相当机械,加上频率还蛮高,导致时间浪费还是优点多.修复bug什么的,测试,提交版本 ...
- 制作STM32开发板要买的电子元器件
1.STM32F103VET6芯片 2.电阻(10K.1.5K.1K.510R.47R.27R.0R) 3.电容(104.4.7uf.1uf.22uf.10pf.) 4.二极管(普通二极管D1206. ...
- day1_jmeter接口测试
一.Jmeter-http接口脚本: 步骤: 1.添加线程组 2.添加http请求 3.在http请求中写入接口url.路径.请求方式.参数 4.添加查看结果树 5.调用接口.查看返回值 二.Jmet ...
- 自动化测试:java + testng + maven + reportng + jenkins + selenium (一)_基于win环境
集成环境:jdk1.7 + tomcat1.7+ eclipse mars + maven + testng6.14.2 + selenium-java2.40.0 + reportng1.1.4 + ...
- java jdk安装配置
1. 配置java_home 2. path添加: %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 3. 添加CLASSPATH路径: .;%Java_Home%\bin;% ...
- vue中封装一个全局的弹窗js
/** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...
- MySQL加锁处理分析(转)
add by zhj: 非常棒的一篇文章,是我见过的讲加锁最棒最详细的文章了.之前听过网易的<MySQL微专业>,里面的课程讲的也很好,但锁这块讲的跟 这篇文章相比,还是有差距的.网易&l ...