CSS设计彻底研究模板.ppt

第15课 CSS网页布局综合实践 在图像软件中设计方案 第15课 CSS网页布局综合实践 整体结构分析 第15课 CSS网页布局综合实践 CSS样式设计 与编码 第15课 CSS网页布局综合实践 修改新页面方案 XHTML与HTML的重要区别例子 标记名称必须小写 bodyptext /p/body 属性名称必须小写 img src=“images/02.jpg”/ 标记必须严格严格嵌套 在HTML中正确： bi这行文字以粗体倾斜显示/b/i 但在XHTML中必须写成： bi这行文字以粗体倾斜显示/i/b 标记标记必须封闭 HTML : XHTML: ????? ptext line ptext line /p 空元素的标记也必须封闭 HTML： XHTML: ????? text line br???? text line br/ XHTML与HTML的重要区别例子 属性用双引号括起来 img src=“images/02.jpg” width=“60”/ HTML中60的引号可以省略 属性值必须使用完整形式 input disabled=true / HTML中=true可以省略 区分“内容标记”与“结构标记” 内容标记中不允许嵌入结构标记，如 内容标记p /p包含一段文字，不能嵌入table结构标记 ID选择器 两种选择器都无效，使用默认效果 虽然这里可以显示，但是不符合规范 1.使用Javascript控制网页是通过ID实现的，此时使得Javascript无法正常工作 2.在布局时，针对网页不同部分进行不同设置，对于各个部分而言在网页中也应该是唯一的，因此逻辑上来说，不应该在一个网页中产生多个相同ID的元素 不能对同1元素同时使用2个ID选择器 也不能对2个元素使用同1个ID CSS中的几何题 先来计算水平方向的宽度，计算过程如下。 1、a：由于body的margin设置为0，因此a的值为ul的左margin， 即15像素。2、b：ul的左padding加li的左margin，即25像素。3、c：第2个li的border，即5像素。4、d：li的左padding，即10像素。5、e：计算完其他项目后再计算这个宽度，注意这里的文字和右 边框之间没有间隔，因为右padding为0。6、f：第2个li的border，即5像素。7、g：ul的右padding加上li的右margin，即25像素。8、h：ul的右margin，即15像素。 CSS中的几何题 现在来计算e的宽度。把水平方向除e以外的各项加起来，等于100像素，因此e的宽度为浏览器窗口的宽度减去100像素。 然后计算竖直方向的宽度。 1、i：由于body的margin设置为0，因此i的值为ul的上margin， 即15像素。2、j：ul的上padding加上li的上margin，即25像素。3、k：li的上下margin加上文本高度，即34像素。4、l：两个li相邻，因此上面的li的下margin和下面的li的上margin 相遇，发生“塌陷”现象，因此l的值为二者中较大者，二者 现在相同，因此l的值为20像素。 CSS中的几何题 5、m：第2个li的border，即5像素。6、n：li的上下padding加上两行文字的高度，即48像素。7、o：第2个li的border，即5像素。8、p：ul的下padding加上li的下面margin，即25像素。9、q：两个ul相邻，因此上面的ul的下margin和下面的ul的上 margin相遇，发生“塌陷”现象，因此q的值为二者中较大 者，二者现在相同，因此q的值为15像素。 CSS中的几何题 接下来，从r开始就前面的相同了，这里不再赘述。 　　最后，对于盒子的宽度再强调说明一下，上面的这个例子中所有的盒子都没有设置width属性，在没有设置width属性时，盒子会自动向右伸展，直到不能伸展为止。如果某个盒子设置了width属性，那么盒子的宽度就以该值为准。而盒子实际占据的宽度是width+padding+border+margin的总宽度。　　注意，在ie6/7和Firefox中都遵循上述原则，但是较低版本的ie对于宽度的计算与此不同，不过现在使用低于ie6的浏览器的人非常少了，一般不用考虑。 第12课 圆角设计 “4图像”法(11/01/unfixed-width.htm) body div id=rounded h3UNfixed Rounded/h3 p 这是一个不固定宽度的圆角框，由