web网页界面设计.ppt

1、主讲人：洪小平、网站制作CSS风格设计与使用(5)、网站制作、浙江金融职业学院、学习内容、1. CSS定位与DIV版结构基本概念2. CSS定位与DIV版结构应用、Part2: CSS定位与DIV版结构基本概念包含各种HTML元素。 只需在声明时进行适当的控制，其中的各标记元素就会变更。 例10-1 .一般来说，与角色类似，网站制作，浙江金融职业学院，两者的区别： (1)是块级要素，其包围的要素自动换行。 只是行内元素，不会在其前后换行。 没有结构意义，只应用样式，其他内联元素不合适宜时，可以使用元素。 (2)标签可以包含在标签中作为其子要素，但是相反不成立，即标签不能包含标签。 例10-2.

2、html，网站制作，浙江金融职业学院，2 .盒子模型，(1)盒子模型的概念盒子模型是内容填充(间隙)盒子marrer 1一个盒子的宽度或高度是内容(2)边界属性通常用于隔离元素，并且在校正元素的实际宽度和高度时包括边界，因为边界周围是元素的最外周。 border的职业腻子粉主要有三种： color (颜色) :#FFFFFF width (宽度) :thinmediumthick和(长度：特定的值)，在默认奥尔特下为medium style (星形) 在此，none和hidden都不显示边框。 实例10-3.html，网站制作，浙江金融职业学院，(3)填充，填充是用于控制内容和边界之间的距离，

3、10px .在html中加入填充的例子10-4.html例子10-6.html 因此，如果需要设置填充四个方向的值，则可以将四个句子合并到填充语法中。网站制作、浙江金融职业学院、(4) margin、margin是指通过修改要素与要素之间的距离为10-4.html而知道margin的意思。 添加margin-bottom语句。 效果见例10-8.html，网站制作，浙江金融职业学院，3 .要素定位，位置浮点z索引，网站制作，浙江金融职业学院，(1)浮点，其值很简单。 如果元素设置为向左或向右浮动，则元素靠近父元素的左侧或右侧。 示例10-14.html 10-14.html上的示例定义了三个子

4、摇滾乐。 一个是父摇滾乐，另一个是子摇滾乐。页面设计、浙江金融职业学院、浮动属性值的设定例，在设定子摇滾乐son1向左浮动之前，页面效果设定子摇滾乐son1的浮动的值为左的情况下，页面效果、页面设计、浙江金融职业学院如下进行分析，将浮动设定为左在示例10-14.html中，子摇滾乐son1向左移动，并且由于对于父摇滾乐来说其内容不属于父摇滾乐，因此父摇滾乐的高度变短，并且子摇滾乐son2向上移动到云同步。 子摇滾乐son2的框扩展到整个父摇滾乐，但其内容与son1不重叠，包围son1的周围，保持son1子摇滾乐内设定的margin距离。 这样，如果不在son2中设置框和背景，则有效地包围了so

5、n1块。 例如，如果放置帽的斯坦共和国不移动子摇滾乐son1而与子摇滾乐son2向右浮动，则son2在父摇滾乐的向右浮动，父摇滾乐的高度也与之相应地变短，但是子摇滾乐son1不受到任何影响。例10-16.html、网站制作、浙江金融职业学院、案例练习、10-18-0.html、10-18.html 10-19-0.html、10 clear 3360左； 清除浮动对左侧的影响。 清除： both； 清除浮点对两侧的影响。网站制作、浙江金融职业学院；(2)Position、Position字面上指定子摇滾乐的位置，即子摇滾乐相对于其父摇滾乐的位置和相对于其自身的位置。 position prop

6、erty有四个名为staticabsoluterelativefixed的修订值。 差动奥尔特是静态的。 Absolute表示绝对定位，例如10-20.html，网站制作，浙江金融职业学院，查询密码解读，网站制作，浙江金融职业学院，如果设置为Absolute，子摇滾乐不再依赖于父摇滾乐，并且该左边框距页面左边缘的距离为20px的子摇滾乐的上边的距离为以补充知识点、顶部、灯光、底部和左侧四个css属性。 所有这些个都用于位置属性，其中子摇滾乐的每个边界表示距页边框的距离，或每个边界表示距原始位置的距离。 仅当位置代理腻子粉设置为absolute或relative时才有效。 四个这些个值不仅可以设

7、置为像素，还可以设置为百分比。 10-21.Html、10-22.html、网站制作、浙江金融职业学院、操作实例技巧：如果父摇滾乐包含两个子摇滾乐，则将子摇滾乐的位置属性设置为absolute后的效果。 示例： 10-23 .如果html两个子摇滾乐的位置都设置为Absolute，则两个子摇滾乐都不属于父摇滾乐，并且相对于页面进行定位。 例如：如果将10-24.html两个position propery腻子粉都设置为absolute，则两个propery腻子粉都将基于各自的propery腻子粉进行化学基部署，不再属于父子摇滾乐。 在两个子摇滾乐重叠的部分中，子摇滾乐2位于子摇滾乐1之上。 如

8、果封摇滾乐位置残奥定计量器设置为relative，则与设置为absolute完全不同。 在这种情况下，子摇滾乐是相对于父子摇滾乐放置的。 与toprightbottomleft的四个专业技术腻子粉配合使用。 例： 10-25.html，网站制作，浙江金融职业学院，(3)Z-index，网站制作，浙江金融职业学院，定位例：文字阴影效应，操作分析：首先制作两个子摇滾乐，内容是文字本身，最后用z-index调整过说唱乐关系即可。 10-28.html、网站制作、浙江金融职业学院、查询密码分析： # block 1位置：相关； z指数：1； 块2颜色： # aaaaa； /*阴影色* /位置：相对；

9、顶级：-1.06 em； 移动阴影*/left:0.1em； z指数：0； /*阴影重日式榻榻米关系*/、网站制作、浙江金融职业学院、网页常用版结构的CSS查询密码、body font-family: Arial； 字体尺寸： 13px； 魔法顶端： 0px；网站制作、浙江金融职业学院、# container position : relative； width:100%； #banner height:80px； 博德尔：1 px固态# 00000； 文本对齐3360中心； 背景色彩： # a2d9ff； padding:10px； 魔法底部：2 px；网站制作、浙江金融职业学院、# content float :左； 链接浮点：右； width:200px； 文本对齐3360中心； 博德尔：1 px固态# 00000； 魔法少女3360-200 px；网站制作、浙江金融职业学院、#footer clear:both； 文本对齐3360中心； height:30px； 博德尔：1 px固态# 00000；网站制作、浙江金融职业学院、网站制作