网页设计基础9.pptVIP

第九讲 CSS之空间控制2盒子模型 Box Model 实验八讲评 实验八讲评 实验八讲评 CSS属性float的取值只有两种:right或left,不存在其他的值。例如： 实验八讲评 实验八讲评 CSS属性 clear CSS属性 border CSS允许为元素设置“边框”，使用border属性，border属性类似background属性，由一些要素组成： 边框border的语法 边框的粗细 border-width 属性border-width允许使用关键词和像素两中方法定义边框的粗细： 边框的样式 border-style 属性border-style允许使用关键词定义边框的样式 共8种 : 边框的颜色 border-color 属性border-color允许使用关键词、RGB比例和色彩代码来设置边框的颜色。 Border的四个边 盒子模型 Box Model 盒子模型 – 内容区域 内容区域用来存放文本，图片等内容 它的大小恰恰能容下所需要保存的内容。 文本区域并不实际存在,而是帮助大家理解用的 盒子模型 – 边框border 用它可以给能确定范围的HTML标签画边框 它可以定义边框线的宽度、类型、和颜色 盒子模型 – padding padding位于内容区域和边框 border 之间 它没有任何颜色和装饰 我们可以用padding 来控制内容区域与border的距离 Padding语法 由于边框有上、右、下、左四个方向，所以内容域与边框的距离也分为top、right、bottom、left这四个方向 使用padding属性时需注意其取值必须按照上右下左的顺时针顺序，不能颠倒 盒子模型 – margin margin是位于边框外围的一圈透明的空间 它没有任何颜色和装饰 一般我们用margin控制元素之间的距离 margin语法 由于边框有上、右、下、左四个方向，所以边框外边界的距离也分为top、right、bottom、left这四个方向 使用margin属性时需注意其取值必须按照上右下左的顺时针顺序，不能颠倒 盒子模型的三个要素 border: 1px solid gray; padding:1px 2px 2px 3px; margin: 20px 0px 20px 20px; 课后作业 无 上机练习 见课程网站实验九 纸上得来终觉浅，绝知此事要躬行（王安石） 边框与文本间 的留白padding 纸上得来终觉浅，绝知此事要躬行（王安石） padding-top: 10px; padding-right:15px; padding-bottom:12px; padding-left:18px; padding: 10px 15px 12px 18px; top right bottom left 或 纸上得来终觉浅，绝知此事要躬行（王安石） 边框与外边界间的留白margin 外边界（不显示） margin-top: 10px; margin-right:15px; margin-bottom:12px; margin-left:18px; margin: 10px 15px 12px 18px; 或 纸上得来终觉浅，绝知此事要躬行（王安石） top right bottom left 问题： 使用给定的HTML源代码，实现如右图片的布局。 div id product1 a name p1 茶树洁面胶 规格：250ml 市场价格：130 元 本站价格：100.99元 功能：清洁控油 介绍：一种非常温和不刺激肌肤的 脸部洁面胶，适合各个年龄层的男女使用，尤适合易患有问题肌肤的人。… a href #top 返回页首 HTML代码 参考答案 #product1 width:500px; border: 3px groove olive; margin-left:100px; float:left; background:url ../image/bodyshop_p1.jpg no-repeat 0% 25%; padding-left:250px; navigator 网站标题、大娘头像 footer 网页的版权信息,站点地图等 sidebar 三种 招牌 面条 container 大娘致辞（三段） 特供面条（列表） 实验八要求将范大娘面吧首页实现如图的布局 div id “navigator” div id “footer” div id “sidebar” div id “container” div id “navigator” div id “footer” div id “sidebar” div id “container” 回忆navigator