标签：加载速度 osi opera footer ati 基本原理 链接 友情 tool
static静态定位（不对它的位置进行改变，在哪里就在那里）
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
fixed固定定位（参照物--浏览器窗口）---做 弹窗广告用到
生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative（相对定位 ）（参照物以他本身）
生成相对定位的元素，相对于其正常位置进行定位。
absolute（绝对定位）(除了static都可以，找到参照物-->与它最近的已经有定位的父元素进行定位)
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一切皆为框
块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ;
行内元素: span,strong,a等元素 即：内容显示在行中称 "行内框";
使用display属性改变成框的类型 即：display:block; 让行内元素设置为块级元素，display:none; 没有框
相对定位：
如果对一个元素进行相对定位，它将出现在它所在的位置上。
通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
.adv_relative { position: relative; left: 30px; top: 20px; }
绝对定位：
元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。.adv_absolute { position: absolute; left: 30px; top: 20px; }
、
frameset框架：
<frameset> ---- 用来定义一个框架；双标签
不能和 <body> 一起使用
rows、cols属性
rows 定义行表示框架有多少行（取值 px / % / * ）
cols 定义列表示框架有多少列（取值 px / % / * ）
frame子框架
src 显示的网页的路径
name 框架名
frameborder 边框线（取值 0 / 1）
<frame> ---- 表示框架中的某一个部分；单标签，要跟结束标志
<noframes>属性
<noframes> 提供不支持框架的浏览器显示body的内容；双标签
<frameset>
<frame src=“” />
<frame src=“” />
<frame src=“” />
<noframes>
<body>内容</body>
</noframes></frameset>
<iframe>内联框架
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
允许和 body 一起使用
width 宽（取值 px / %）
height 高（取值 px / %）
name 框架名
frameborder 边框线（取值 0 / 1）
src 显示的网页的路径
opacity透明属性
对于IE6/7/，使用filter:alpha(opacity:值;) 值为0-100
对于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值为0-1
对于早期火狐，使用-moz-opacity:值; 值为0-1
所以写透明属性时，一般写法是
opacity
{
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决}
border-radius圆角边框属性
border-radius:10px;
向 div 元素添加圆角边框
box-shadow阴影属性
box-shadow 属性向框添加阴影效果,后面跟4个参数。
box-shadow:0px 0px 10px #000;
<embed>属性
是HTML5中新增的标签,媒体嵌入插件标签，可以通过<embed>插入音频或视频
<embed src=“media/music.mp3” />
格式.mid .wav .mp3等
CSS部分导图总结
企业DIV使用频率高的命名方法
网页内容类
---
注释的写法: /* Footer */ 内容区/* End Footer */
摘要: summary
箭头： arrow
商标： label
网站标志： logo
转角/圆角： corner
横幅广告： banner
子菜单： subMenu
搜索： search
搜索框： searchBox
登录： login
登录条：loginbar
工具条： toolbar
下拉： drop
标签页： tab
当前的： current
列表： list
滚动： scroll
服务： service
提示信息： msg
热点：hot
新闻： news
小技巧： tips
下载： download
栏目标题： title
热点： hot
加入： joinus
注册： regsiter
指南： guide
友情链接： friendlink
状态： status
版权： copyright
按钮： btn
合作伙伴： partner
投票： vote
左右中：left right center
标题: title
id的命名:
---
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
页面结构
---
导航
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
功能
class的命名:
.barnews { }
.barproduct { }
.left { float:left; }
.bottom { float:bottom; }
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
颜色:使用颜色的名称或者16进制代码,如
字体大小,直接使用"font+字体大小"作为名称,如
对齐样式,使用对齐目标的英文名称,如
标题栏样式,使用"类别+功能"的方式命名,如
---
注意事项::
一律小写;
尽量用英文;
不加中杠和下划线;
尽量不缩写，除非一看就明白的单词.
---
推荐的 CSS 书写顺序：
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
width
height
margin
padding
border
background
display
list-style
position
float
clear
显示属性
自身属性
文本属性
CSS精灵原理以及应用
该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。
一个简单的例子：
一张图片作出一个按钮的三个状态
一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active <a class="button" href="#">链接</a>
加入右侧的图片为：200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
a { display:block;
width:200px;
height:65px;
line-height:65px; /*定义状态*/
text-indent:-2015px; /*隐藏文字*/
background-image:url(button.png); /*定义背景图片*/
background-position:0 0; /*定义链接的普通状态，此时图像显示的是顶上的部分*/
}
a:hover { background-position:0 -66px; /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active { background-position:0 -132px;
/*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}
更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值
如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位
优点：
减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
不足：
CSS雪碧的最大问题是内存使用
影响浏览器的缩放功能
拼图维护比较麻烦
使CSS的编写变得困难
CSS 雪碧调用的图片不能被打印
错误得使用 Sprites 影响可访问性
标签：加载速度 osi opera footer ati 基本原理 链接 友情 tool
原文地址：http://www.cnblogs.com/mumusen/p/7453022.html
