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 ...
随机推荐
- Java的线程机制
一.Java中实现多线程的两种方式1) 继承Thread类 Thread类包括了包括和创建线程所需的一切东西. Thread 最重要的方法是 run().编写线程程序时须要覆盖 run() 方法,ru ...
- Http协议简介【转】
HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...
- sql创建外键
建立外键关系:先建主表再见从表:主表:create table zhu(code int parimary key,name varchar(20)) ;从表:create table cong(co ...
- OpenCV —— 图像处理
使用图像结构中所定义的高层处理方法(图形和视觉范畴)来完成特定任务 平滑处理 cvSmooth 处理后图像与输入图像的大小相同(不用考虑边缘) 中值滤波 CV_MEDIAN 不支持 in pla ...
- Flask的快速入门详细笔记
Flask的框架结构对应关系及理解 1.简介 简单介绍下Flask是一个轻量级的web前端框架,不像django那样本身具备一套完整的页面体系,轻量级说明了完全可以自定义,从功能逻辑到业务处理,都可以 ...
- c++操作当前窗体句柄
句柄 这一概念是MFC里的一个类.MFC有专门的函数来获取窗体句柄. HWND hwnd; hwnd=CreateWindow("my own windowshandle",&qu ...
- error while loading shared libraries: libpcre.so.0的解决办法
error while loading shared libraries: libpcre.so.0的解决办法 http://blog.csdn.net/xjkwq1qq/article/detail ...
- FragMent-通过Arguments方法 跟activity通信
今天主要学习下通过Arguments,实现activity 给fragment传递数据.这个方法也是通过参数bundle来进行数据传输的 直接看如下代码 一,定义一个fragment,在oncreat ...
- Android学习笔记进阶17之LinearGradient
具体的看一下博文:Android学习笔记进阶15之Shader渲染 package xiaosi.BitmapShader; import android.app.Activity; import a ...
- android图片特效处理之锐化效果
这篇将讲到图片特效处理的锐化效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理: 一.简单算法:分别获取当前像素点和八个周围像素点的RGB值,先求出当前像素点的RGB值与八个像素点RGB值的 ...