网站建设的流程.ppt

CSS属性 CSS属性-布局 宽度属性（width）:值为数值，单位为px/% 高度属性（height）:值为数值，单位为px/% CSS属性-背景 背景色属性(background-color)：为元素设定背景色 背景图属性(background-image):为元素设定背景图。写法： .nav{background-image:url(背景图片的地址及全称) } 背景重复属性（background-repeat):和背景图搭配使用，设置背景图是否平铺，值有：repeat-x/repeat-y/no-repeat 背景附着属性（background-attachment）:和背景图搭配使用，设定图片是否跟随内容滚动。值：scroll/fixed 背景定位属性（background-position）:和背景图搭配使用，设定背景图片显示的位置。 背景属性(background):背景属性的综合属性。 语法：background:背景颜色 背景图像 背景位置 背景重复 背景附着 例如：background:#f00 url(img/tu.jpg) right no-repeat fixed CSS属性-边框 边框风格属性(border-style):设定边框风格，值有:none（无）/solid(实线)/dotted(点划线)/dashed（线段） 边框宽度属性(border-width):设定边框宽度，数值，单位为px 边框颜色属性(border-color):设定边框色 边框属性(border):是边框属性的综合应用。 语法：border:边框宽度 边框风格 边框颜色 例如：border:5px solid #f00 CSS属性-边距（外补丁、外边距） 边距属性（margin）:设定页面中一个元素所占空间的边缘(边框)到相邻元素边框之间的距离。 属性值的4种方式： 四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右 一个值：四个方向 CSS属性-填充（内间距\内补丁、内边距） 间距属性（padding）:设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 属性值的4种方式： 四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右 一个值：四个方向 DIV+CSS的重点知识-盒子模型 XHTML+CSS布局页面中的核心！它规定了网页元素如何显示及元素间相互关系。 什么是盒子模型：CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景。网页中的大部分对象，实际呈现形式都是一个个盒子形状对象 ，页面都是由一个个盒子形状的区域拼合而成的。盒模型关系到网页设计中排版、布局、定位等操作，任何元素都必须遵循盒模型规则。 header footer mainbody sidebar mainbody banner left right 盒子模型-构成 包括 margin Border Padding content (内容) background 内容区 Padding-top Padding-bottom Padding-left Padding-right border-top border-right border-left border-bottom margin-top marginr-right margin-bottom margin-left 盒子模型-尺寸 盒子的实际大小（公式）： 宽 =左右margin+左右border+左右padding+width 高 =上下margin+上下border+上下padding+height 例如：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px 宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px 高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px 盒模型的补充 Margin总是透明的，padding也是透明的，但padding受背景影响，能够显示背景色或背景图。 Margin可以定义负值，但border和padding不支持负值。 Margin、border、和padding都是可选的，它们默认值为0。我们可以单独定义一边或统一定义盒子四边的属性值。 如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义border-styl