html+css综合运用.ppt

HTML+CSS 综合运用 构建网页 网页结构 网页整体布局 概念 整体布局指针对于整个网页大局上的布局。设计整个网页分几块内容，每块放什么东西，每块大小所占比例，是否自适应等问题。 局部布局，针对的是细节。如这个文字设计多大，位置如何，什么颜色等细节问题。 目前网页布局就两种方式 a）table b）div+css table布局较简单，兼容性强，上手容易。 div+css提高页面浏览速度，提高搜索引擎对网页的索引效率。 table布局 table就是把整个网页分格子一样分成几行几列。 如： table tr td头部/td /tr tr td导航/td /tr tr td主区/td /tr tr td脚部/td /tr /table div+css 用div盒模型结构给各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。 如： div class=header头部/div div class=nav导航/div div class=main主区/div div class=footer脚部/div 布局 自适应布局 指网页布局能够适应显示器的不同分辨率，适应是指不会界面变形，自动扩展或缩小高宽度。 固定布局 指网页布局采用固定高宽度的模式，不随着显示器分辨率的改变和发生改变，在所有分辨率下都保持固定的高宽度。 分辨率 是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细 。如最开始的 800X600 1024X768（目前一般以这个为基准。在中国） 1280X600等 布局 学习三列自适应宽度 如：W3C网页的布局。 居中 水平居中 文字居中 text-align: center; 元素居中 块级元素 margin：auto； 行内元素 text-align: center; 垂直居中 文字居中 line-height：等于文字父元素高度（仅单行文本，多行文本使用下面的方式） 元素居中 如果元素是td或th，使用vertical-align:middle 如果是图片，可以采用图片背景居中 background-position: center center; 如果是其他元素，可以使用margin（父元素高度固定的情况下） 其他情况下就比较复杂了。 居中 回忆 display 元素已学过哪些值 dispaly:设置元素的显示方式 table-cell：让元素像table的td和th方式显示。 这个就用于元素垂直居中 注意：有些浏览器不支持，如IE6 IE7 inline-block 让元素自己是行内元素，但其子元素为块级元素。 显示的效果类似float属性，但不会发送卡位的现象。 注意：有些浏览器不支持。 其他自己自学。 菜单 纵向菜单 纵向二级菜单 横向菜单 横向二级菜单 CSS hack 由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack! 总结 目前CSS和HTML只是讲了写简单的基本的东西。只是皮毛。 如果想要真正掌握还需要花时间找相关资料认真学习。 * *