网页设计【综合案例篇】.pptVIP

上面代码在浏览器中的各种文本效果在实际设计表现中运用频率很高。 （3）css 字体属性 css 字体属性定义文本的字体名字、大小、加粗和风格（如斜体）等。使用字体名字，可以使用font-family 属性，如下定义了body中的所有文本使用微软雅黑字体。 body{font-family:微软雅黑} 如果用户的电脑上没有微软雅黑，可能出现一种不确定的字体，这时候，可以多指定几种字体，如下： body{font-family:微软雅黑,宋体,楷体} 这样会从左到右，选择字体。 9.2.6 css盒模型 css盒子模型又称框模型，它是html+css最核心的知识之一，理解这个概念可以更好的理解html的各个元素是怎样布置在浏览器页面中的。 上面这个图表示html的每个标签都可以具有这些属性，它分别定义了每个标签的外边距(margin)、边框（border)、内边距（padding) 和内容（content)。这几个属性的含义分别是： 外边距（margin)：最外层的外边距，和另一个html元素的距离，当然可以为0。外边距是透明的，没有颜色，肉眼无法看到。 边框(Border）：围绕在内边距和外边距之间的边框，可以有宽度，并且也可以有颜色。边框也可以有样式，如点画线，实心线等，后面会详细介绍。 内边距(Padding)：内容和边框之间的距离，内边距是透明的。 内容(content)：内容区表示盒子模型的内容，主要显示文本、图像、链接等。 （1）外边距（margin）属性 margin属性定义了外边距，它可以单独设置上，下，左，右的边距，也可以一次改变所有的属性。单独设置上下左右边距的好处是：可以设置左边距为10px，右边距为0px。这样可以灵活的控制元素的总体大小。 单独指定上下左右边距的属性是：上边距（margin-top）、（下边距）margin-bottom、（左边距）margin-left、（右边距）margin-right。 所有边距可以取如下值： 除了写出完整的margin-left，marging-right等，margin也可以简写。一般情况margin可以有四个值，如下： margin:35px 40px 65px 90px; 表示： 上边距为35px 右边距为40px 下边距为65px 左边距为90px 细心的读者，会发现margin:35px 40px 65px 90px等价于 margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:90px; margin也可以接受3个值，如下： margin:35px 40px 65px; 表示： 上边距为35px 左右边距为40px 下边距为65px 等价于： margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:40px; margin也可以接受2个值，如下： margin:25px 50px; 上下边距为25px 左右边距为50px 等价于 margin-top:25px;margin-right:50px;margin-bottom:25px;margin-left:50px; margin也可以接受1个值，如下： margin:25px; 所有的4个边距都是25px 等价于 margin-top:25px;margin-right:25px;margin-bottom:25px;margin-left:25px; 2）边框（border）属性 边框（border）属性允许你指定一个元素边框的样式和颜色。css边框有如下的属性： 左面代码在浏览器中的效果将有虚线红色边框和实线绿色边框两种。 （3）填充(padding）属性 填充(padding）属性定义元素边框与元素内容 之间的空间。padding的取值和margin相同， 可以为30px、10%、auto等类似值。 （4）盒模型完整示例 下面的代码是一个完整的盒模型示例（见图9.15），代码中它设置了内边距padding、边框border、外边距margin：（图） 填充属性的应用效果 通过本例，我们还需要了解盒模型整个元素占用的总宽度和总高度，其计算公式分别如下： 如果将静态网页比作成一个人，那么html就是人的骨骼、css则是血肉、而javascrpit就是人的动态。而理解javaScript的现在最好的方式之一就是了解它的历史。这有助于全面理解javaScript在整个计算机理论和工业界中所处的重要位置。 9.3 javaScript脚本基础 9.3.1 javaScript的简介 javaScript的诞生于1995年