十天学会web标准

CSS布局入门,第一天XHTMLCSS基础知识,本节知识点,css样式css优先级css盒模型组成,css样式,加载css样式有以下四种外部样式内部样式行内样式,css优先级,id优先级高于class后面的样式覆盖前面的指定的高于继承行内样式高于内部或外部样式总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的,css盒模型组成,第二天一列布局,一列布局,一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局,一列固定宽度,#layoutheight:300px;width:400px;background:#99FFcc;,一列固定宽度居中,列固定宽度居中和一列固定宽度相比，我们要解决的问题就是居中。这里我们用到css的外边距属性：margin。在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。#layoutheight:300px;width:400px;background:#99FFcc;margin:auto;,一列自适应宽度,自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。#layoutheight:300px;background:#99FFcc;#layoutheight:300px;width:80%;background:#99FFcc;bodymargin:0;,一列自适应宽度居中,同样和固定宽度居中一样，我们只需要设置div的外边距为auto即可实现居中了。bodymargin:0px;#layoutmargin:auto;height:300px;background:#99FFcc;width:80%;,一列二至多块布局,一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、底部（footer）。采用固定宽度居中的方式，代码如下：bodymargin:0;padding:0;#headermargin:5pxauto;width:500px;height:80px;background:#9F9;#mainmargin:5pxauto;width:500px;height:400px;background:#9FF;#footermargin:5pxauto;width:500px;height:80px;background:#9f9;,第三天二列和三列布局,二列和三列布局,二列自适应宽度二列固定宽度二列固定宽度居中三列自适应宽度三列固定宽度三列固定宽度居中,xhtml的块级元素(div)和内联元素(span),块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。,xhtml的块级元素(div)和内联元素(span),在一般的块级元素诸如段落、标题.、列表,、表格、表单、DIV和BODY等元素。而内联元素则如:表单元素、超级链接、图像、.块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。,xhtml的块级元素(div)和内联元素(span),如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。,float属性,在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。,二列自适应宽度,下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。#sidebackground:#99FF99;height:300px;width:120px;float:left;#mainbackground:#99FFFF;height:300px;width:70%;margin-left:120px;,二列固定宽度,两列固定宽度只需要把#main的宽度由百分比改为固定值#sidebackground:#99FF99;height:300px;width:120px;float:left;#mainbackground:#99FFFF;height:300px;width:350px;margin-left:120px;,二列固定宽度居中,两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div：#contentwidth:470px;margin:0auto;#sidebackground:#99FF99;height:300px;width:120px;float:left;#mainbackground:#99FFFF;height:300px;width:350px;margin-left:120px;,三列自适应宽度,三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。bodymargin:0;#sidebackground:#99FF99;height:300px;width:120px;float:left;#side1background:#99FF99;height:300px;width:120px;float:right;#mainbackground:#99FFFF;height:300px;margin:0120px;,三列固定宽度,三列固定宽度可以在三列自适应基础上添加一个父div，并设置这个div的宽度即可bodymargin:0;#contentwidth:470px;margin:0auto;#sidebackground:#99FF99;height:300px;width:120px;float:left;#side1background:#99FF99;height:300px;width:120px;float:right;#mainbackground:#99FFFF;height:300px;margin:0120px;,第四天纵向导航菜单及二级弹出菜单,本节内容,纵向列表纵向二级列表相对定位和绝对定位,纵向列表,是纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作例day4_1,纵向二级列表,二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单，移去鼠标后自动消失例day4_2,相对定位和绝对定位,position:relative;如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素相对于它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）,相对定位和绝对定位,position:absolute;表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）,相对定位和绝对定位,父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角,相对定位和绝对定位,相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右,第五天超链接伪类,本节内容：,链接的四种样式将链接转换为块状用css制作按钮首字下沉,链接的四种样式,a:linkcolor:#FF0000/*未访问的链接*/a:visitedcolor:#00FF00/*已访问的链接*/a:hovercolor:#FF00FF/*鼠标移动到链接上*/a:activecolor:#0000FF/*选定的链接*/,将链接转换为块状,链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一display:block的css属性即可,用css制作按钮,学会了把超链接转换为块级元素，想制作个css按钮简直太简单了，只需在上一步的基础上增加一个按钮的背景图片即可实现。例day5_1,首字下沉,首字下沉是css伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，应用如下伪元素：:first-letter,第六天html列表,主要内容：,ul无序和ol有序列表改变项目符号样式或用图片定义项目符号横向图文列表浮动后父容器高度自适应,ul无序和ol有序列表,无序列表，是以ul包含li的形式，默认每行前的符号是圆点，可以通过样式表改为无、方块，空心圆等。有序列表是以ol包含li的形式，是以数字为项目符号的,改变项目符号样式或用图片定义项目符号,从样式表编辑器中可以看到，有好多种形式，包括改为ol默认那样以数字有序列表显示。另外项目符号还可以以图像形式这种形式对图像控制不是很灵活，所以实际应用当中一般用背景图片来实现,横向图文列表,横向图文列表是在上一步的基础上增加图片并让列表横向排列，最终实现效果如下：,浮动后父容器高度自适应,当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。要解决这个问题，需要使用以下样式overflow:auto,第七天横向导航菜单,主要内容：,横向列表菜单用图片美化的横向导航cssSprites,横向列表菜单,要实现横向导航菜单，只需要把li横向排列就可实现了。最主要就是用float让li向左浮动后，实现横向排列,用图片美化的横向导航,cssSprites,CSSSprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。,cssSprites,讲CSSSprites之前，先把背景图片给搞清楚#menuulliabackground:#cccurl(images/nav_bg2.gif)00no-repeat;css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个