DIV+CSS学习笔记
第十五章 定位
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显示的网页的路径
第十七章 css高级属性
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命名规范
企业
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左右中：
leftrightcenter标题:
titleid的命名:
---
导航：
nav主导航：
mainbav子导航：
subnav顶导航：
topnav边导航：
sidebar左导航：
leftsidebar右导航：
rightsidebar菜单：
menu子菜单：
submenu标题:
title摘要:
summary容器:
container页头：
header内容：
content/container页面主体：
main页尾：
footer导航：
nav侧栏：
sidebar栏目：
column页面外围控制整体布局宽度：
wrapper左右中：
leftrightcenter页面结构
---
导航
标志：
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书写顺序：colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontentwidthheightmarginpaddingborderbackgrounddisplaylist-stylepositionfloatclear显示属性
自身属性
文本属性
附录二 CSS精灵
CSS精灵原理以及应用
该图片使用
CSSbackground和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或者PNGsprite在大小上非常可能比把一张图分成多张得来的图片总尺寸小。减少鼠标滑过的一些
bugIE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。不足：
CSS雪碧的最大问题是内存使用影响浏览器的缩放功能
拼图维护比较麻烦
使
CSS的编写变得困难CSS雪碧调用的图片不能被打印错误得使用
Sprites影响可访问性
DIV+CSS学习笔记的更多相关文章
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- DIV+CSS学习笔记（CSS）
css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- CSS学习笔记10 相对定位，绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
随机推荐
- FragmentTransaction的commit和commitAllowingStateLoss的差别
1.什么是FragmentTransaction? 使用Fragment时.能够通过用户交互来运行一些动作.比方添加.移除.替换等. 全部这些改变构成一个集合,这个集合被叫做一个transaction ...
- jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- [BZOJ4184]shallot 线段树+线性基
链接 题意:给你每个数字出现的时间和消失的时间,求每个时刻最大异或和 题解 按照时间建立线段树,线段树每个节点开个vector存一下这个时间区间有哪些数,然后递归进入的时候加入线性基,开一个栈记录一下 ...
- SQL Server performance for alter table alter column change data type
最近在搞一个升级脚本,发现有一张业务表中的某些字段长度需要调整,直接使用alter table alter column进行修改发现修改一列要用十几分钟!!!两三个列那用时简直不能容忍啊!google ...
- ElasticSearch、Kibana Web管理
ElasticSearch的Web管理 http://localhost:9200/ http://localhost:9200/cluster/health?pretty http://localh ...
- scrollwidth ,clientwidth ,offsetwidth 三者的区别
clientwidth:内容可视区域的宽度 offsetwidth:元素整体宽度 scrollwidth:实际内容的宽度
- TOJ 2233 WTommy's Trouble
2233. WTommy's Trouble Time Limit: 2.0 Seconds Memory Limit: 65536KTotal Runs: 1499 Accepted R ...
- [Angular & Unit Testing] Testing Component with Store
When using Ngrx, we need to know how to test the component which has Router injected. Component: imp ...
- iOS应用笔记之git的本地使用
什么是git (1)什么是git >git是一个 "分布式"的版本号控制工具 >git的作者是Linux之父:Linus Benedict Torvalds,当初开发g ...
- js获取单选button的值
<!DOCTYPE html> <html> <body> <script type="text/javascript"> func ...