网页布局
主讲人：张彩虹
本节主要内容一、常见的二级页面二、在CSS中实现间距的属性三、实训
一、常见的二级页面
荷花图片欣赏网页如图3-22。是网站结构中的二级页面，需要在一级页面通过链接才能访问到。从首页的页面与二级页面的对比来看，我们将要制作的荷花图片欣赏网页的页面结构较为简单。
二、在CSS中实现间距的属性1.div盒模型的外延边距属性：margin表示元素的外延边距，是到父容器的距离。表3-9外边距属性。
属性名属性值说明margin1个像素值设置元素上、右、下、左外间距2个像素值用空格隔开第一个值设置上、下外边距属性，第二个值设置右、左外边距属性3个像素值用空格隔开第一个值设置上外边距属性，第二个值设置右、左外边距属性，第三个值设置下外边距属性4个像素值用空格隔开第一个值设置上外边距属性，第二个值设置右外边距属性，第三个值设置下外边距属性、第四个值设置下外边距属性margin-top1个像素值div到父容器的上外间距margin-right1个像素值div到父容器的右外间距margin-bottom1个像素值div到父容器的下外间距margin-left1个像素值div到父容器的左外间距
2.div的边框属性如表3-10、表3-11、3-12所示。属性名属性值说明?borderborder-width属性值border-style属性值border-color属性值用空格分隔设置元素的边框线条粗细、线型和边框色?两组属性值用逗号分隔第一组设置元素的上、下边框第二组设置元素的右、左边框?三组属性值用逗号分隔第一组设置元素的上边框第二组设置元素的右、左边框第三组设置元素的下边框??四组属性值用逗号分隔第一组设置元素的上边框第二组设置元素的右第三组设置元素的下边框第四组设置元素的左边框????表3-11单独地为各边边框设置属性属性名属性值说明border-topborder-top-width元素上边框粗细border-top-style元素上边框线型border-top-color元素上边框颜色border-rightborder-right-width元素右边框粗细border-right-style元素右边框线型border-right-color元素右边框颜色border-bottomborder-bottom-width元素下边框粗细border-bottom-style元素下边框线型border-bottom-color元素下边框颜色border-leftborder-left-width元素左边框粗细border-left-style元素左边框线型border-left-color元素左边框颜色
属性名属性值说明示例border-widththin定义细的边框。border-width:thin;medium默认。定义中等的边框。border-width:medium;thick定义粗的边框。border-width:thick;length允许您自定义边框的宽度。border-width:1px;inherit规定应该从父元素继承边框宽度。border-width:inherit;
4.设置元素边框的样式属性：border-style,只有当这个值不是none时边框才可能出现。如表3-13所示
属性名属性值说明示例border-stylenone定义无边框。border-style:none;hidden与none相同。不过应用于表时除外，对于表，hidden用于解决边框冲突。border-style:hidden;dotted定义点状边框。在大多数浏览器中呈现为实线。border-style:dotted;dashed定义虚线。在大多数浏览器中呈现为实线。border-style:dashed;solid定义实线。border-style:solid;double定义双线。双线的宽度等于border-width的值。border-style:double;groove定义3D凹槽边框。其效果取决于border-color的值。border-style:groove;ridge定义3D垄状边框。其效果取决于border-color的值。border-style:ridge;inset定义3Dinset边框。其效果取决于border-color的值。border-style:inset;outset定义3Doutset边框。其效果取决于border-color的值。border-style:outset;inherit规定应该从父元素继承边框样式。border-style:inherit;
5.