常见布局种类

1列布局

自上而下的,1般头部进行固定宽度,高度设置为自动

两列布局

自适应的两列布局：width用百分比+float；
固定宽度的两列布局：width：具体值/父级元素的宽度肯定，width+百分比；+float;
如果没有加float的话，不能实现并排的两列布局。

3列布局

传统的3列布局依托于float实现
特殊的3列布局：左右固定，中间自适应情况，左右使用绝对定位来实现，中间用margin实现.
3列布局：左边和右边固定，中间自适应：

CSS中的定位机制

标准文档流
浮动
绝对定位

网页简单布局之结构与表现的原则

最大化的简化html的结构，然后用css进行设置，减少html与css的契合度
不应当为了样式而添加无意义的标签
结构与表现分离，结构简洁，构建结构不斟酌布局样式

CSS元素隐藏

{ display: none; /* 不占据空间，没法点击 */ }
{ visibility: hidden; /* 占据空间，没法点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，没法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间，没法点击 */ }
{ position: relative; top: -999em; /* 占据空间，没法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间，没法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间，没法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

CSS中清除浮动最优方法

在父级添加 overflow：hidden
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行致使内容被隐藏掉，没法显示需要溢出的元素

父元素也设置浮动（加个float：left/right）
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会遭到影响，不可能1直浮动到body，不推荐使用

父元素设置 display:table
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已改变，由此酿成的1系列问题，得不偿失，不推荐使用

使用 :after 伪元素
优点：需要注意的是 :after 是伪元素，不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨1点，这是1种态度。
由于IE6⑺不支持:after，使用 zoom:1 触发 hasLayout。
缺点：兼容性不是很好。

在浮动的元素后面添加空标签
清除浮动
优点：简单明了
缺点：无意义的空标签，不利于语义化

DIV+CSS规范命名集合

命名规范说明
1）、所有的命名最好都小写
2）、属性的值1定要用双引号(“”)括起来，且1定要有值如class=”divcss5”,id=”divcss5”
3）、每一个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4）、空元素要有结束的tag或于开始的tag后加上”/”
5）、表现与结构完全分离，代码中不触及任何的表现元素，如style、font、bgColor、border等
6）、定义，应遵守从大到小的原则，体现文档的结构，并有益于搜索引擎的查询。
7）、给每个表格和表单加上1个唯1的、结构标记id
8）、给图片加上alt标签
9）、尽可能使用英文命名原则
10）、尽可能不缩写，除非1看就明白的单词

DIV+CSS命名参考表

CSS样式命名	说明	CSS文件命名	说明
wrapper	页面外围控制整体布局宽度	master.css,style.css	主要的
container或#content	容器,用于最外层	module.css	模块
layout	布局	base.css	基本公用
head,#header	页头部份	layout.css	布局,版面
foot,#footer	页脚部份	themes.css	主题
nav	主导航	columns.css	专栏
subnav	2级导航	font.css	文字、字体
menu	菜单	forms.css	表单
submenu	子菜单	mend.css	补钉
sideBar	侧栏	print.css	打印
sidebar_a,#sidebar_b	左侧栏或右侧栏
main	页面主体
tag	标签
msg#message	提示信息
tips	小技能
vote	投票
friendlink	友谊连接
title	标题
summary	摘要
loginbar	登录条
searchInput	搜索输入框
hot	热门热门
search	搜索
search_output	搜索输出和搜索结果类似
searchBar	搜索条
search_results	搜索结果
copyright	版权信息
branding	商标
logo	网站LOGO标志
siteinfo	网站信息
siteinfoLegal	法律声明
siteinfoCredits	信誉
joinus	加入我们
partner	合作火伴
service	服务
regsiter	注册
arr/arrow	箭头
guild	指南
sitemap	网站地图
list	列表
homepage	首页
subpage	2级页面子页面
tool,#toolbar	工具条
drop	下拉
dorpmenu	下拉菜单
status	状态
scroll	转动
.tab	标签页
.left.right.center	居左、中、右
.news	新闻
.download	下载
.banner	广告条(顶部广告条)

导入样式及脚本

传统方式

援用线上CDN
- <script type="text/javascript" href="xxx/xxx.js"> 这是援用JS文件
- <script type="text/css" href="xxx/xxx.css">这是援用CSS文件
援用本地文件
- <script type="text/javascript" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.js"> 这是援用JS文件
- <script type="text/css" src="http://www.wfuyu.com/uploadfile/cj/20150502/xxx/xxx.css">这是援用CSS文件

新规范

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时1般不需要指定 type 属性，由于 text/css 和 text/javascript 分别是它们的默许值。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

------分隔线----------------------------