div+css教学教案(学习入门到精通~)详细讲解.doc
《div+css教学教案(学习入门到精通~)详细讲解.doc》由会员分享,可在线阅读,更多相关《div+css教学教案(学习入门到精通~)详细讲解.doc(101页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、|divcss 教程(入门到精通)目录:一、divcss 教程(入门到精通)详细讲解二、DIV+CSS 网页布局常用基础知识三、divcss 常用布局入门四、divcss 网站首页布局实例教程一、divcss 教程(入门到精通)详细讲解CSS 高度_css heightDIV CSS 高度基础知识这里的 CSS 高度是指通过 CSS 来控制设置对象的高度。使用 CSS 属性单词height。单位可以使用 PX,em 等常用使用 PX(像素)为单位。实例:.yangshiheight:300px;即设置了 yangshi 选择器对象高度为 300px。CSS 高度单词:height CSS 最大
2、高度:max-height (IE7及以上版本浏览器支持) CSS 最小高度:min-height (IE7及以上版本浏览器支持) CSS 上下居中:line-height 以上可跟值为数字加单位。Html 初始高度与 DIV+CSS 高度对照以前 html 直接设置高度 width=“300“这种方式嵌入表格标签内,而且无需带单位,默认以 px(像素)为单位。实例:我的高度为 100px我高度为 50px分别设置了高度为100px 和50px 的两行表格|接下来我们讲解 CSS 高度使用方法及技巧1、CSS 自适应高度一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即可实
3、现此效果。同时也无需使用 height:auto 来实现高度自适应。通常默认情况下不设置高度,对象高度即是自适应高度。2、固定高度及隐藏超出固定高度的内容很多时候我需要设置对象固定高度同时让多余的内容不显示出来。解决办法:设置固定高度值,和设置内容不被溢出(隐藏超出内容)如设置一个高度为50px;宽度为50px,并禁止内容超出此高度宽度,为了观看效果同时设置对象为1px 黑色边框演示,CSS 代码:.yangshi height:50px; width:50px; overflow:hidden; border:1px solid #666;Html body 内代码: 演示,内容测试内容高度
4、超出演示实例,divcss5实例CSS 固定高度效果截图:3、说明观看此上图,看出设置固定高度宽度并设置1px 的黑色边框,并且实现内容未超出设置高度宽度。禁止溢出设置 CSS 高度、 CSS 宽度的 CSS 属性单词及值 overflow:hidden; 。|3、设置最小高度使用 CSS 单词 :min-height为什么要设置最小高度?有时特别是在文章页面里因为文章内容多少参差不齐,所以我们可以使用最小高度设置让左右结构的布局对齐,感觉饱和一点,但是我们又不能设置固定高度,因为内容可能多可能少,当多的时候自然设置固定高度就不会显示完整内容。这里有个问题就是 IE6不支持最小高度设置( mi
5、n-height) ,解决办法使用 css hack 方法来解决,大家知道区别不同浏览器时候用的 css hack 中 IE6可以使用“_”来区别其它浏览器。最小高度运用:.yangshimin-height:50px; _height:50px;这样就可以解决此问题,说明这里就不能再使用 overflow:hidden;-CSS overflow 设置隐藏超出内容溢出。完整 CSS html 最小高度实例代码:CSS 高度实例 .yangshi min-height:50px; _height:50px;width:150px;border:1px solid #666; 演示,内容测试内容
6、高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例,divcss5实例效果图:|以上是超出内容自动适应高这里是内容够少,未能充满设置最小高度。无论在 IE6还是 IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设置。关于 CSS height 高度总结说明:这里讲解 CSS height 与 html height 区别及用法,同时讲解了最小高度、自适应高度、固定高度的设置及运用。2、CSS 宽度 CSS width一、宽度基础知识CSS 宽度是指通过 CSS 样式设置对应 div 宽度,以下我们了解传统 html 宽度、宽度自适应、固定宽度等宽度知识。传统 Html 宽
7、度属性单词:width 如 width=“300“;CSS 宽度属性单词:width 如 width:300px;最大宽度单词:max-width 如 max-width:300px; css 手册中了解 max-width:http:/ 。最小宽度单词:min-width 如:min-width:300px css 手册中了解 min-width:http:/ CSS 在线手册 中 width 手册了解详细基础知识:http:/ 初始宽度与 DIV+CSS 宽度对照1、传统 html 中宽度 width=“300“,即设置对应元素宽度为300px(像素) 。而宽度值后无需跟单位,默认情况下以
8、像素(px)为单位。如:我的宽度为300px即:设置了对应表格 td 的宽度为300px.2、 div css 中宽度设置 width:300px;,即设置对应 CSS 样式为300px,这里需要跟单位。如:#header width:300px;即:定义 header CSS 选择器样式为300px 宽度。而在标签运用:我的宽度为300px 宽度三、css 宽度演示与讲解1、CSS 宽度自适应常常我们看见一个网页宽度随浏览器宽度改变而自动改变,如 一样,宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。如果网页总宽度为80%即 width:80%;,将使此宽度知道自适应宽度为浏览器|80
9、%。当然前提是设置最外层没有宽度限制条件下。DIV CSS 自适应宽度例子:CSS 样式代码:body margin:0 auto; text-align:center;.yangshi width:80%; border:1px solid #003; margin:0 auto;Html 中 body div 代码:我是80%自适应宽度这样即设置内容居中,为了方便测试加上1px 黑色边框。大家可以测试观察其内容是随浏览器拉大而宽度变宽而自适应宽度80%,而左右两边始终有10%宽度留着,因为设置此 box 宽度为80%。以上为 CSS 宽度(width)演示图解。2、CSS 宽度固定固定即设
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- divcss 教学 教案 学习 入门 精通 详细 讲解
限制150内