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 ...
随机推荐
- IsoAlgo3d三维管道软件
IsoAlgo3d三维管道软件 eryar@163.com 1.概述 IsoAlgo3d三维管道软件主要用于将目前国际主流管道设计软件AVEVA PDMS和Intergraph SmartPlatn3 ...
- vim 计算器寄存器使用
我们可能会在vim的使用中,碰到下面的情况 当我正在写一周预算的时候,我想计算下每天我买菜花2.7,每天买两顿,周死晚上出去吃,周六额外买1.5斤14.8一斤的猪肉... 这时候你打算怎么办呢,是不是 ...
- [BZOJ3526][Poi2014]Card 线段树
链接 题意:有一些卡牌,正反各有一个数,你可以任意翻转,每次操作会将两张卡牌的位置调换,你需要在每次操作后回答以现在的卡牌顺序能否通过反转形成一个单调不降的序列 题解 线段树上维护 \(f[o][0/ ...
- android 图片特效处理之光照效果
这篇将讲到图片特效处理的光照效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理:图片上面的像素点按照给定圆心,按照圆半径的变化,像素点的RGB值分别加上相应的值作为当前点的RGB值. 例: ...
- thinkphp中 Illegal offset type异常
thinkphp中 Illegal offset type异常 一.错误提示 二.解决思路 1.看出错提示中的函数为assign函数,那说明是我们在从控制器assign数据到页面的部分出现了错误 2. ...
- FFT之大数乘法
#include <iostream> #include <stdio.h> #include <cmath> #include <algorithm> ...
- IOS应用在ios7（iPhone5／iPhone5s）上不能全屏显示
前言 [IOS应用在iOS7系统或者iPhone5/iPhone5s上不能全屏显示,应用画面上下各有1条黑色,但是在其他系统或者型号的手机上却是正常显示 Paste_Image.png Paste_I ...
- Sql Server 基础语法
来自:http://www.cnblogs.com/AaronYang/archive/2012/04/24/2468093.html Sql Server 基础语法 -- 查看数据表 select ...
- python自学群里遇到的小题汇总
题目一: 请使在3秒内计算出一组的数据,偶数在奇数前(注意不使用for while等循环的方法)格式如下1,2,3,4,5,6,7,8,9,10输出结果是2,1,4,3,6,5,8,7,10,9 解决 ...
- Java反射之getInterfaces()方法
今天学习Spring3框架,在理解模拟实现Spring Ioc容器的时候遇到了getInterfaces()方法.getInterfaces()方法和Java的反射机制有关.它能够获得这个对象所实现的 ...