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