html+css+div.docx

1、html+css+div1.那为什么还有那么宽的白边呢？这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时，body，h1h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body margin:0;，就可以把body默认的外边距去掉，这时再预览一下，白边就没了。body margin: 0px; 2.这里的选择器类型是新手朋友最容易迷糊的地方，类：是指定义一个class，可以多个对象引用；标签：指对默认的html标签进行重新定义，如可以定义bodymargin:0，意思是 将body的外边距设置为0，h2color:#f00是将所有h2标签的文字颜色设

2、置为红色；高级它把ID和伪类放到一块了，是一个设置不合理的地方，在cs4版本中已经分开了。ID是以#开始，id只能作用于一个对象，不能作用于多个对象，优先级高于class，这是id和class的区别。3.同样和固定宽度居中一样，我们只需要设置div的外边距为auto即可实现居中了。#layout margin:auto; height: 300px; background: #99FFcc; width: 80%; 4.一列二至多块布局一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部（header）、主体（mainconten

3、t）、询问（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.为什么两个相邻的容器中间的间距不是10px，而是5px呢？按照我们正常的理解，认为应

4、该是两个值相加，其实这里是两个合并后取最大值。用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心（有关块级元素和行内元素的概念在下一节讲到）。6.何为块级元素，何为行级元素呢？这里还有内联元素。（又叫做内嵌元素、行内元素、直进式元素）（inline element）内联元素 一般都是基于语义级（semantic）的基本元素。内联元素只能容纳文本或者其他内联元素。（block element）块级元素和 inline element都是赫塔缪勒规范中的概念

5、。Block element 会顺序以每次另起一行的方式一直往下排。也就是说block element 是换行的，但是当inline element有了这样的属性：display ： block ； 那么 就会和block element 没有什么区别了（inline element 也是必须换行了。）Display： inline ；这个属性能够修复著名的IE双倍浮动边界 问题。Block element 1 ddress - 地址 2 * blockquote - 块引用 3 * center - 举中对齐块 4 * dir - 目录列表 5 * div - 常用块级容易，也是css la

6、yout的主要标签 6 * dl - 定义列表 7 * fieldset - form控制组 8 * form - 交互表单 9 * h1 - 大标题 10 * h2 - 副标题 11 * h3 - 3级标题 12 * h4 - 4级标题 13 * h5 - 5级标题 14 * h6 - 6级标题 15 * hr - 水平分隔线 16 * isindex - input prompt 17 * menu - 菜单列表 18 * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 19 * noscript - 可选脚本内容（对于不支持script的浏览器显

7、示此内容） 20 * ol - 排序表单 21 * p - 段落 22 * pre - 格式化文本 23 * table - 表格 24 * ul - 非排序列表Inline element1 * a - 锚点 2 * abbr - 缩写 3 * acronym - 首字 4 * b - 粗体(不推荐) 5 * bdo - bidi override 6 * big - 大字体 7 * br - 换行 8 * cite - 引用 9 * code - 计算机代码(在引用源码的时候需要) 10 * dfn - 定义字段 11 * em - 强调 12 * font - 字体设定(不推荐) 13

8、* i - 斜体 14 * img - 图片 15 * input - 输入框 16 * kbd - 定义键盘文本 17 * label - 表格标签 18 * q - 短引用 19 * s - 中划线(不推荐) 20 * samp - 定义范例计算机代码 21 * select - 项目选择 22 * small - 小字体文本 23 * span - 常用内联容器，定义文本内区块 24 * strike - 中划线 25 * strong - 粗体强调 26 * sub - 下标 27 * sup - 上标 28 * textarea - 多行文本输入框 29 * tt - 电传文本 30

9、 * u - 下划线 31 * var - 定义变量 可变元素1 * applet - java applet 2 * button - 按钮 3 * del - 删除文本 4 * iframe - inline frame 5 * ins - 插入的文本 6 * map - 图片区块(map) 7 * object - object对象 8 * script - 客户端脚本 7.Css语法 及格式#layoutcolor:#fff;border:1px;solid:#ccc;红色 代表 CSS选择器，蓝色 代表属性，绿色 代表 值；如图所示，CSS语法由如下三部分构成，选择器：可以是ID、C

10、LASS或标签；属性和值是用来定义这个物件的某一个特性。如一张桌子的长120cm，宽60cm，套用css的格式为，桌子长:120cm;宽:60cm;，这样是不是容易理解。8.Div 是 #, class 是 .；Div的优先级高于class；比如说今天三班的学生上体育课，小明留下来打扫卫生。那么三班的学生上体育课这是一个类，而小明打扫卫生这是个id，虽然小明也是三班的学生，但id高于class，所以小明执行打扫卫生的任务。9.两列自适应宽度布局：有一列要自己浮动，另一列的margin 要和浮动的宽度相同。如：#side background: #99FF99; height: 300px; w

11、idth: 120px; float: left; #main background: #99FFFF; height: 300px; width: 300px; margin-left: 120px; 给他们添加父级div#content width:470px; margin:0 auto;(居中)Content width = side.width + main.width;10.Float 浮动；CSS中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明宽度，否则它会尽可能的窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

12、(所谓尽可能的窄是 紧紧的内贴 )11.三列自适应宽度：一般常用结构式左列和右列固定，中间列根据浏览器自适应。而在写入div标签的时候要注意顺序：先写左列 float-left，且固定宽度，在写右列float-right，要固定宽度;最后再写中间列。三列固定宽度：在自适应宽度的基础上增加父级div ，必须固定宽度。12.list-style-type;(针对列表之类的 list 嘛)默认是实心圆：disc；常用的是 list-style-type:none;不使用项目符号；13.text-decoration ;（检索或设置对象中文本的装饰）：none : 默认值。无装饰 blink : 闪烁

13、 underline : 下划线 line-through : 贯穿线 overline : 上划线 检索或设置对象中的文本的装饰。有 href 特性的 a ，以及 u ， ins 对象默认值为 underline 。对象 strike ， s ， del ，默认值是 line-through 。 假如 none 值在属性声明的最后，所有的先前的其他取值都会被清除。例如，声明 text-decoration: underline overline blink none 等于声明 text-decoration: none 。 假如对象没有文本(如 img 元素)或者是空元素(如：)， 此属性不

14、会发生作用。 假如你设置 body 对象的此属性值为 none ， a 对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。 指定块对象的此属性将影响其所有内联子对象。而此影响一旦发生，块对象容器最终会受到影响。在IE4+中可用的值为 overline 和 blink 。虽然 blink 值被提供，但它不会被作用。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 textDecoration；14.标签的默认样式：大多数标签都有自己的默认样式，比如第二天课程中遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h

15、1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd margin: 0px; padding: 0px; font-size: 12px; font-weight: norm

16、al; ul list-style: none; img border-style: none; 15.css派生选择器派生选择器可以帮助你节约大量的class定义。#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; #menu ul和#menu ul li即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul

17、标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。16.css选择器的分组被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。17.讲解块级元素和内联元素时提到display，今天用到了display:block;和dis

18、play:none;值为none时表示将这个元素隐藏，为block时表示将它的隐藏状态改为显示状态详细介绍请参考css手册。18.Position，相对定位（relative）和绝对定位（absolute）；1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素相对于它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角。4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。